同じようなエントリ続いているので挨拶は省エネでお送りします
黄金週間巣ごもり男日本人気3大ソーシャルサービスボタン設置記録第3回。完成品画像以下。実物記事フッタ（投稿日時コメント）参照。
それ以外のボタンの設置手順は以下参照。
１．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に記事毎の値がセットされるように、タグを少し修正します。
２．「src」属性の左に「expr:」と記述
以下のように。- src="http://www.facebook.com…
→expr:src="http://www.facebook.com…
３．変数「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"'
４．完成したタグをテンプレートに記述
ここまでの手順でタグは以下のようになっている筈です。「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。
記事本文の後ろとか、当ブログと同じく記事フッタ辺りが人気エリアですかね。
0 件のコメント:
コメントを投稿