ブログをソーシャルネットワークの世界に組み込んでいく
2011年2月15日火曜日 21:28 | 0 Comment | 0 Trackback
Tweet
どーも、pingpanです。
これまでこのブログに、Facebookの「いいね！」ボタンとTwitterの「ツイート」ボタンは設置していましたが、もっとソーシャルネットワークにこのブログを取り込んでいこうと思い、ちょっとずつ手をいれていきたいと思ってます。
Facebookからは色々とソーシャルプラグインが提供されていますが、まずは「comments」から導入してみました。
このブログの下の方を見てもらえばわかるように、Facebookのアカウントでコメントができるようにしてみました。
Facebookにログインしていないとログインを促す表示になっているかと思います。
やり方は簡単。
以下、このあたりの流れをまとめておきます。
--------------------------------------
こちらのページからソースコードが発行できます。
Unique IDは、普通のブログのようなページに挿入するなら不要です。(記事ごとにコメントが分かれるようよろしくやってくれます。同じIDだと同じコメントだと判断するためのIDだと考えればオッケーです。)
Number of Commentsは、表示するコメント数。
Widthは、コメント欄の横幅。サイトに合わせて指定。
Publish Feedは、よくわからんのでそのまま。(英語の分かる人、教えて下さい。)
以上を決めて、[Get Code]でコードを入手。
あとは、取得したコードをサイトやブログに張ればOK！！・・・・とは、いきません。
ソーシャルプラグインを使うには、Application IDというIDを取得しないといけませんので、まだ持ってない人は以下のURLから取得します。
http://developers.facebook.com/setup
サイト名は、ひとまず挿入するサイトやブログの名前を入れておきましょう。
サイトURLは、挿入するサイトやブログのURLを入れておきましょう。
言語は、日本語で。
[Create app]を押して、Application IDを入手します。
ここまでくればもう少しで完成です。
次に、入手したアプリIDをもとに、自身のサイトやブログに以下のHTMLを記載します。
--------------------------------------------------
これは<html>タグの中に追記↓
<html xmlns:fb="http://www.facebook.com/2008/fbml" >
以下は、<body>タグ以降に記載
<!-- Facebook APP -->
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'XXXXXXXXXX', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/ja_JP/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<!-- END Facebook APP -->
XXXXXXXのところは、先ほど入手したご自身のアプリIDを入れて下さい。
ここまでできれば、あとは先ほど取得したcomments用タグ
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=XXXXXXXXXX&xfbml=1"></script>
<fb:comments numposts="10" width="425" publish_feed="true"></fb:comments>
を、サイトの表示したいところに記載して完成です。
XXXXXXXのところは例のごとくアプリIDを入れて下さい。
ちなみに、2か所アプリIDを入れるところがありましたが、これらが一致していないとおかしな挙動になるので気をつけて下さい。
こんな感じで、こちらのサイトもソーシャルネットワークとの連携を強めていきたいと思います。
というわけで、今日は以上。
