ブログとSNSを連携する - Facebook連携

ブログとSNSを連携する - Twitter連携では、ツイートボタンの設置について説明をしましたが、今回は、Facebookとの連携です。

ブログに『シェア』（Share）ボタンと『いいね！』（Like）ボタンを追加してみました。

いいね！（Like）とシェア（Share）の違い

いいね！（Like）ボタン

最近のアクティビティにLike（いいね！）をクリックした内容が下記のように表示されます。

シェア（Share）ボタン

クリックするとコメントの書き込みとサムネイル（画像）の表示有無と選択ができます。下記の例ではサムネイルが他に選択できませんが、理由として考えられるのは、ブログの下書きをiPadのBlogPressで作成したのでPicasaに画像がアップされてしまっているからなのでしょうか。

実際にシェアしてみるとFacebook上には下記のように表示されます。

FacebookのFriend（友人）が更にコメントしたり、いいね！やシェアすることができます。

いいね！（Like）ボタンの設置方法

Like Button - facebook developers に『いいね！（Like）』ボタンの作成ページがあります。英語ページですが、２個のパラメータを設定して『Get Code』をクリックするだけです。

① URL to Like
いいね！とクリックしてもらいたいURLを指定します。

② Layout Style

Standard：

Button_Count：


Box_Count：


③ Get Code

クリックするとコードが生成されるので、iframeのコードをコピーして当該ページに貼り付けます。

※上記の方法は、URLを指定しているためにページ毎にURLを指定しなければなりません。
自動的に貼り付けたページのURLを取得する方法は、利用環境によって異なります。（Bloggerでの方法は後説します。）

シェア（Share）ボタンの設置方法

シェアボタンの作成ページは日本語で用意されています。パラメータの『スタイル』と『カウンタ』を変更するとプレビューで確認できます。『シェアするリンク』は元ページのURLを指定すれば貼り付けをしたページのURLが取得されます。

コードを貼り付けると下記のように表示されます。

シェア

Bloggerに『いいね！』（Like）ボタンを追加する

毎回、本文に上記コードを貼り付けるのも面倒なので、ブログ記事の先頭か最後に表示されるように設定します。またブログエントリーのURLを取得するようにしなければなりません。

下記のコードを利用するとブログエントリー毎のURLが自動で取得できます。

<iframe allowtransparency="true" expr:src="&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;" frameborder="0" scrolling="no" style="border: none; height: 40px; overflow: hidden; width: 500px;"></iframe>

ブログ（本文）の前に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから<div class='post-header-line-1'>を検索
3．<div class='post-header-line-1'>の下にコードを貼付ける。

ブログ（本文）の後に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから<data:post.body/>を検索
3．<data:post.body/>の下にコードを貼付ける。

Bloggerに『シェア』（Share）ボタンを追加する

『いいね！』ボタンと同様にブログ記事の先頭か最後に表示されるように設定します。その場合にはブログエントリーのURLとタイトルを取得できるようにしなければなりませんので、コードを下記のように修正します。

<a name="fb_share" type="button_count" expr:share_url='data:post.url' href="http://www.facebook.com/sharer.php">シェア</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

ブログ（本文）の前に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから<div class='post-header-line-1'>を検索
3．<div class='post-header-line-1'>の下にコードを貼付ける。

ブログ（本文）の後に表示する

1．Bloggerの『デザイン → HTMLの編集』 からウィジェットのテンプレートを展開をチェック。
2．テンプレートから<data:post.body/>を検索3．<data:post.body/>の下にコードを貼付ける。

今日の一曲

YMO散会後の1984年に発売された『S-F-X』は、もう一度、テクノポップは、どうあるべきか、人と機械はどのように融合できるのかを考えさせてくれたアルバムです。

リズム構成、音の作り方、ボーカル、何れもいま聴いても古びていない尖ったセンスを感じさせるアルバムです。また最後のDark Side of The Starでは、アンビエントな世界も示唆しています。

またクレジットには、HARUOMI HOSONO with FRENDS OF EARTHとあり、この時点でFOE結成を考えていたのでしょうか。

今日のオススメは4曲目のStrange Loveです。細かいリズムの組合せも嫌らしさを感じさせず、とてもシュールに仕上がっています。またボーカリスト細野晴臣を堪能できます。