2011年5月5日木曜日

[Blogger]Facebookいいねボタンの設置手順

同じようなエントリ続いているので挨拶は省エネでお送りします

黄金週間巣ごもり男日本人気3大ソーシャルサービスボタン設置記録第3回。
完成品画像以下。実物記事フッタ(投稿日時コメント)参照。
中国人か。今回はFacebookの「いいね!」ボタンです。
それ以外のボタンの設置手順は以下参照。

1.HTMLタグの作成

まず以下ページにアクセス。
お好みに合わせて情報を入力してHTMLコードを作成するわけですが、「URL to Like」には以下の値を入力しておくと、後の作業が多少楽になります。
  • URL to Like:data:post.url
ちなみに当ブログに設置しているいいねボタンの他の設定は以下の通り。
  • Send Button:※チェック外す
  • Layout Style:button_count
  • Width:110
  • Show Faces:※チェック外す
  • Verb to display:like
  • Color Scheme:light
  • Font:※未選択
それぞれの設定項目の意味とか詳細は、申し訳ないですが割愛させていただきます。でもまあ何となく分かると思いますが。

入力し終わったら「Get Code」ボタンを押下して「iframe」のコードをコピーしてください。
※XFBMLは他にいろいろと手間がかかるので、手軽に導入したい場合はお薦めしません
上記設定を行った場合、以下のようなコードとなる筈。

続いて、記事毎にボタンを設置した際に、いいね対象のURLに記事毎の値がセットされるように、タグを少し修正します。

2.「src」属性の左に「expr:」と記述

以下のように。
  • src="http://www.facebook.com…
    expr:src="http://www.facebook.com…

3.変数「data:post.url」を「"」の外に出す

この「変数」の部分が記事毎のURLに置き換わります。ただし「"」で囲むとそのまま「data:post.url」と出力されてしまうので、「'」で囲むようにします。またそれ以外の部分(http://www.facebook…」や「amp;send=false…」)はこのまま出力する必要があるので、そこの部分は「"」で囲みます。
相変わらず文章による説明だとややこしいので、百聞は一見にしかず。
  • expr:src="http://www.facebook.com/plugins/like.php?href=data%3Apost.url&send=false…(中略)…height=21"

    expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "amp;send=false…(中略)…height=21"'

4.完成したタグをテンプレートに記述

ここまでの手順でタグは以下のようになっている筈です。

「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。
記事本文の後ろとか、当ブログと同じく記事フッタ辺りが人気エリアですかね。
(例)記事本文の後ろ
「<data:post.body/>」ってのが記事本文に置き換わる部分です。

(例)記事フッタ
「<div class='post-footer'>」で囲まれた箇所が記事フッタです。


右揃えにしたけりゃ

<div>タグで囲むなどしてください。

関連エントリ

0 件のコメント: