Tabs

2011/05/01

BloggerにFacebookのソーシャルプラグインを導入する方法 このエントリーへのはてなブックマーク数


ソーシャルグラフの魅力やOGPの破壊力は上記のReferenceをご覧下さい。
ここでは実際にBloggerにFacebookの様々なソーシャルプラグイン、具体的には
  1. OGPタグの設置
  2. Like&Sendボタン
  3. コメントボックス
の手順を記載します。
なお、前提条件としてFacebookのアカウントを持っていることが挙げられます。

ものすごく長いので追記を御覧ください。



1.下準備
デザイン→HTMLの編集、で<html b:version='2'...>に、
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'
の2属性を追記する。
私の場合は<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' xmlns:fb='http://www.facebook.com/2008/fbml' xmlns:og='http://ogp.me/ns#'>となっています。

2.App IDの発行
Create an AppからApp IDの発行です。（この手順はGaiaX SocialMedia Lab.さんが詳しいです）

ブログのURLと名前を記入します。

セキュリティチェックを記入します。

Appが申請され、アプリIDが手に入ります。
このアプリIDを後に使います。

3.OGPの発行と埋め込み
本来ならLike ButtonのStep2などでOGPタグを発行するのが筋なのかもしれませんが、面倒くさいので手っ取り早くコピペ出来るものを用意しました。
以下の赤文字を<head>~</head>内にコピペして下さい。***の部分は後で編集します。
<b:if cond='data:blog.pageType == "item"'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
    <meta expr:content='data:blog.pageName' property='og:title'/>
    <meta content='article' property='og:type'/>
    <meta expr:content='data:blog.pageTitle' property='og:description'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
    <meta expr:content='data:blog.title' property='og:title'/>
    <meta content='blog' property='og:type'/>
    <meta content='***' property='og:description'/>
</b:if>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='http://***' property='og:image'/>
<meta content='***' property='fb:app_id'/>
<meta expr:content='data:blog.title' property='og:site_name'/>

なお、記事の本筋とは全くの無関係なんですが、Bloggerにはindex, item, archiveの3種類のページが存在していて、indexは通常の記事一覧、itemは個別記事、archiveは月別などのアーカイブ表示を表しています。
また、ブログが今どのタイプの表示形式であるかについては、data:blog.pageTypeコマンドで見ることが可能のようです。
そしてBloggerではプログラミングでいうif文を<b:if>で表現するので、<b:if cond='data:blog.Type == "***"'>~</b:if>は「もし、ブログの表示形式が***だったら」というif文になるようです。
今回の例では、indexの場合とitemの場合とarchiveの場合、それぞれの状況に応じてOGPのtitleやtype, descriptionを変化させています。

3-1.<meta content='***' property='og:description'/>について
こちらはブログのdescriptionなので、ブログのサブタイや趣旨を書いておきましょう。（一応Bloggerタグあるみたいですが…）

3-2.<meta content='http://***' property='og:image'/>について
こちらはブログなどのウェブサイトのイメージ画像だそうです。
自分のブログで使っているロゴなどを入れておきましょう。
Bloggerの画像はPicasaにアップロードしてアドレスを引っ張ってくるやり方ですので、Picasaに上げたロゴを引っ張ってくることが望ましいです。

3-3.<meta content='***' property='fb:app_id'/>について
こちらがステップ2で記載したApp IDを入力する場所です。
先ほど取得したApp IDをこちらの***に置き換えましょう。

4.Like&Sendボタンを設置する
Like&Sendボタン取得ページはこちらです。
こちらのページの"Step 1 - Get Like Button Code"から必要事項を記入してGet Codeを押してください。

だいたいこんな感じの記述をしていく
上の画像でGet Codeを押せばiframe形式とXFBML形式でLike(&Send)ボタンが生成されるんですが、Bloggerにコピペするには修正箇所が多すぎるので、以下に私が使用しているiframeタグを掲載して、細かな属性値について触れていくことにします。
あとこのキャプチャー作ってから気づいたんですが、Facebookのコード生成過程でコロン":"が%3Aに変換されていることに気づきました。
そしてコピーしたコードから、Blogger独自タグが必要な部分に修正を加えます。

4-1.src属性の値について
こちらがLike&Sendボタンのiframeタグになります。
<iframe expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=true&layout=standard&width=***&show_faces=true&action=like&colorscheme=light&font=verdana&height=80&locale=en_US"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:***px; height:80px;' allowTransparency='true'/>
これをコピペすればすぐにでもLike&Sendボタンが使えるようになりますが、カスタマイズしたい人向けに色々説明を加えていきます。弄る必要の無さそうなところには触れません。

  • send=true Sendボタンを表示するかどうか。send=falseで機能OFF
  • layout=standard button_countかbox_countの3種類から表示形式を選べる
  • width=*** 横幅。2つあるのでどちらも同じ値にしておく
  • show_faces=true Likeしてくれた人の顔をひたすら並べていく（悪趣味）
  • colorscheme=light 色調をlightかdarkか選べる
  • font=verdana フォントを選ぶ。arialやtahomaなど
  • locale=en_US 日本語圏だと「いいね！」「送信」となってダサいと思ったので、英語圏にしてLikeとSendにしてある。いらなければ&locale=en_USを削除

これらの設定の後、<div class='post-header'>や<div class='post-footer'>, <div class='post-footer-line post-footer-line-2'/>の下あたりにiframeタグを貼り付けます。


5.Facebook Commentsを設置する
5-1.JavaScriptコードの記述
次のタグを<head>~</head>内に記述します。
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

5-2.Commentsタグの記述
私の場合、コメント欄は単独記事表示のみでよかったので、以下のように記述しています。
<b:if cond='data:blog.pageType == "item"'>
<fb:comments expr:href='data:post.url' num_posts='*' width='***'/>
</b:if>
<b:if ...>と</b:if>を削除すれば通常のトップページなどでもFacebook Commentsが表示されます。
そして以下、Commentsタグに含まれる属性値の説明です。

  • num_posts='*' Facebook Commentsに表示する最大コメント数。多いと縦に長くなります
  • width='***' 横幅。
修正する必要があるのはこの2箇所です。
これらを修正の後、フッターあたりに設置するとFacebook Commentsが表示できます。Bloggerのコメント欄をどうするかが悩みどころですけど、Facebook利用者が日本にはまだそこまで多くないので両方表示してます。

さて、大分長い記事になってしまいましたが、以上でFacebookのソーシャルプラグインについての説明は以上です。
他にもRecommendationsやLike Box, Live StreamなどFacebookで公開されているソーシャルプラグインはあります。ブログにLive Streamを設置する必要があるかどうかは分かりませんが、Like Boxなどは面白そうですね。時間のある時にでも書いてみたいです。

Key : , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)