ラベル Blogger の投稿を表示しています。 すべての投稿を表示
ラベル Blogger の投稿を表示しています。 すべての投稿を表示

2011年5月5日木曜日

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

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

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

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

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


右揃えにしたけりゃ

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

関連エントリ

投稿者 時刻: 3:06 0 コメント
ラベル: ,

[Blogger]Twitterツイートボタンの設置手順

黄金週間、訳あって巣ごもり暮らしを送っている男がお送りする、日本で人気の3大ソーシャルサービスのボタン設置記録。
第2回はTwitterのツイートボタンです。
それ以外のボタンの設置手順は以下参照。
ちなみに完成品の画像は以下。実物は記事フッタ（投稿日時とかコメントとか）を参照。

１．HTMLタグの作成

まず以下ページにアクセス。
「①ボタンを選択してください…」の部分でいろいろと入力してHTMLコードを作成しますが、「ツイート内テキスト」「URL」には以下の値を入力してください。
  • ツイート内テキスト：data:post.title
  • URL：data:post.url
当ブログと同じく「ボタン」で『水平方向にカウント数を表示』を選択した場合、以下のようなコードとなる筈。
<a
 href="http://twitter.com/share"
 class="twitter-share-button"
 data-url="data:post.url"
 data-text="data:post.title"
 data-count="horizontal"
 data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
はてなブックマークの時と同じく、このままだとタイトル・URLは上記の値で固定となってしまい、記事毎の値が設定されません。よって、記事毎の値がセットされるように、タグを少し修正する必要があります。

２．「data-url」「data-text」属性の左に「expr:」と記述

以下のように。
  • data-url="data:post.url"
    →expr:data-url="data:post.url"
  • data-text="data:post.title"
    →expr:data-text="data:post.title"

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

ここまでの手順でタグは以下のようになっている筈です。
<a
 href="http://twitter.com/share"
 class="twitter-share-button"
 expr:data-url="data:post.url"
 expr:data-text="data:post.title"
 data-count="horizontal"
 data-lang="ja">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。
記事本文の後ろとか、当ブログと同じく記事フッタ辺りがあるあるか。
※尚、テンプレートに貼り付けて保存すると、属性値を囲っている「"」は「'」に変換されます。動作に支障は無いので気になさらぬよう（というかむしろ「'」じゃないと支障がある）。
（例）記事本文の後ろ
「<data:post.body/>」ってのが記事本文に置き換わる部分です。

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



右揃えにしたけりゃ

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

関連エントリ

投稿者 時刻: 2:15 0 コメント
ラベル: ,

[Blogger]はてなブックマークボタンの設置手順

追記：2012/3/13　トラッキング問題終結？

はてなブックマークボタンから収集した行動情報の第三者提供をやめます - はてなの日記
ってことで次の段落消しました。

追記：2012/3/12　トラッキング問題への対応

遅ればせながら、当ブログのはてブボタンを行動情報取得しないオプトアウト版に差し替えました。
しっかし、どうせオプトアウト版っての作るなら、従来のものは従来のまま（行動情報取得しない）にしといて、トラッキング機能付き版の方を「新たに追加しました」ってすべきだよな。ここにも資本原理主義者が…

本題

訳あって巣ごもり暮らしを送っている黄金週間、日本で人気の3大ソーシャルサービスのボタンを設置してみました。以下が完成品の画像です（何故か実物は記事本文に設置できなかったので。凡ミスだと思うけど面倒だから究明は放置）。
ちなみに実物は記事フッタ（投稿日時とかコメントとか）エリアにいます。

設置手順の解説などは、既に先人達により溢れかえっていますが、自分なりに歩んだ設置手順や補足などをここに記します。
まずは「はてなブックマーク」ボタンです。
それ以外のボタンの設置手順は以下参照。

１．HTMLタグの作成

まず以下ページにアクセス。
  • はてなブックマークボタン
    ※2012/3/12追記：上記は行動情報を取得しないオプトアウト版です。
    従来のボタン作成ページのURLは以下（リンクはしません）。
    http://b.hatena.ne.jp/guide/bbutton
ページの手順に従ってHTMLコードを作成するわけですが、「①ページ情報」には以下の値を入力しておくと、後の作業が多少楽になります。
  • URL：data:post.url
  • タイトル：data:post.title
「②タイプ」で『スタンダード』を選択した場合、以下のようなコードとなる筈。
<a
 href="http://b.hatena.ne.jp/entry/data:post.url"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="data:post.title"
 data-hatena-bookmark-layout="standard"
 title="このエントリーをはてなブックマークに追加">
<img
 src="http://b.st-hatena.com/images/entry-button/button-only.gif"
 alt="このエントリーをはてなブックマークに追加"
 width="20"
 height="20"
 style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
このままだと、ブクマ対象のURL・タイトルは固定値となってしまい、一つ一つの記事にボタン配置したところで、その記事をブクマするということができません。（というか上記入力値だとそもそもURLとして不正だけど）。なので、URL・タイトルに記事毎の値がセットされるように、タグを少し修正します。

２．「href」「data-hatena-bookmark-title」属性の左に「expr:」と記述

以下のように。
  • href="http://b.hatena.ne.jp/entry/data:post.url"
    →expr:href="http://b.hatena.ne.jp/entry/data:post.url"
  • data-hatena-bookmark-title="data:post.title"
    →expr:data-hatena-bookmark-title="data:post.title"

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

記事にアクセスした際、この「変数」の部分が記事毎のURL・タイトルに置き換わります。ただし、「"」で囲むとそのまま「data:post.url」「data:post.title」と出力されてしまうので、「'」で囲むようにします。また、「href」の「http://b.hatena.ne.jp/entry/」はこのまま出力する必要があるので、ここの部分は「"」で囲みます。
文章による説明だとややこしいので、百聞は一見にしかず↓
  • expr:href="http://b.hatena.ne.jp/entry/data:post.url"
    →expr:href='"http://b.hatena.ne.jp/entry/" + data:post.url'
  • expr:data-hatena-bookmark-title="data:post.title"
    →expr:data-hatena-bookmark-title='data:post.title'
※実は「expr:data-hatena-bookmark-title」の部分の修正は必要ありません。後述のテンプレートにタグ貼り付けて保存する際、属性値を囲っている「"」は「'」に変換されるので。

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

ここまでの手順でタグは以下のようになっている筈です。
<a
 href='"http://b.hatena.ne.jp/entry/" + data:post.url'
 class="hatena-bookmark-button"
 data-hatena-bookmark-title='data:post.title';
 data-hatena-bookmark-layout="standard"
 title="このエントリーをはてなブックマークに追加">
<img
 src="http://b.st-hatena.com/images/entry-button/button-only.gif"
 alt="このエントリーをはてなブックマークに追加"
 width="20"
 height="20"
 style="border: none;" />
</a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
「デザイン」→「HTMLの編集」のページで「ウィジェットのテンプレートを展開」にチェックを入れ、テンプレートファイルを表示し、お好みの場所に貼り付けてください。
お薦めは記事本文の後ろとか、当ブログと同じく記事フッタ辺りですかね。
（例）記事本文の後ろ
「<data:post.body/>」ってのが記事本文に置き換わる部分です。

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


右揃えにしたけりゃ

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


関連エントリ

投稿者 時刻: 1:04 2 コメント
ラベル: ,
登録: 投稿 (Atom)