2012/11/10

Blogger記事に「はてなブックマーク」ボタンを設置する方法

このエントリーをはてなブックマークに追加

Bloggerカスタマイズが楽しくなってきたArdor(@ArdorOnline)です。
今回は、はてなブックマークボタンを各記事に設置する方法をご紹介します。
Bloggerにも簡単に設置できるだろうと考えていたのですが、
ちょっとカスタマイズする必要がありました。
難しくないので設置したい方は、参考にしてみてください。


はてなブックマークボタンを設置する手順は、次の通りです。

  1. はてなブックマークボタン作成ページへ行く
  2. ボタンを配置するページの情報を入力
  3. ボタンタイプを選択
  4. プレビューを確認。コードをコピーする
  5. Blogger用にカスタマイズ
  6. Bloggerテンプレートに貼り付けて完了

はてなブックマークボタン作成ページへ行く

はてなブックマークボタンの作成には、公式ページへ行くのが一番良いです。

公式ページでコードを取得するのが目的です。

ボタンを配置するページの情報を入力

設置したいブログのURLとタイトルを入力します。

ここで入力した値は、カスタマイズしてしまうので何でもOKです。
後々の編集を楽にしたい方は、以下の値を入力しましょう。
URL:data:post.canonicalUrl
タイトル:data:post.title

ボタンタイプを選択

ボタンタイプは、好みのものを選択してください。
私は、「バーティカル」を選択しました。

プレビューを確認。コードをコピーする

選択できたら、作成されたコードをコピーしてください。

Blogger用にカスタマイズ

作成されたコードを整理すると、次のようになっています。
赤字で表示されている部分は、これからBlogger用にカスタマイズします。

■取得したコード

<a
 href="http://b.hatena.ne.jp/entry/http://blog.asterlist.com/"
 class="hatena-bookmark-button"
 data-hatena-bookmark-title="Asterlist"
 data-hatena-bookmark-layout="vertical-balloon"
 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>

Blogger用にカスタマイズする箇所は、2箇所です。
カスタマイズは、次の通りです。


■URLをBlogger用にカスタマイズ

変更前:

 href="http://b.hatena.ne.jp/entry/http://blog.asterlist.com/"

変更後:

 expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl'

■登録するタイトルをBlogger用にカスタマイズ

変更前:

 data-hatena-bookmark-title="Asterlist"

変更後:

 expr:data-hatena-bookmark-title='data:post.title'

■Blogger用コード

Blogger用コードは、次のようになります。

<a
 expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl'
 class="hatena-bookmark-button"
 expr:data-hatena-bookmark-title='data:post.title'
 data-hatena-bookmark-layout="vertical-balloon"
 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>

Bloggerテンプレートに貼り付けて完了

Blogger用コードまで作成できたら、あとはコードを貼り付けるだけです。
任意の位置にコードを貼り付けて、はてなブックマークボタンを設置してください。

このブログでは、「data:post.body」の直下に記述して設置してあります。

貼り付け方は、
「テンプレート」→「HTMLの編集」
→「ウィジェットのテンプレートを展開」にチェックを入れて表示する。

設置したい箇所にコードを貼り付ける。
※バックアップを必ずとってから実施してください。

よくわからなかった方へ

説明がうまくできていなくてすみません。
コピーして貼り付ければOKのBloggerコードを用意しました。
ご自由にコピーして持っていってください。

はてなブックマーク形状

はてなブックマークの形状をまとめておきます。
形状は、「data-hatena-bookmark-layout="XXX"」の
XXX指定で変更できます。
今後、公式サイトで変更されるかもしれません。

指定値形状
simpleこのエントリーをはてなブックマークに追加
simple-balloonこのエントリーをはてなブックマークに追加
standard-balloonこのエントリーをはてなブックマークに追加
vertical-balloonこのエントリーをはてなブックマークに追加
standardこのエントリーをはてなブックマークに追加
verticalこのエントリーをはてなブックマークに追加

最後に

いかがでしたでしょうか?
はてなブックマークボタンを設置できましたか?
設置できた方は、是非ブックマークしてください!

この記事で設置できれば幸いです。
最後まで読んで頂きありがとうございます。

1 件のコメント:

  1. 世界の情報・笑い・幸せをブログに載せております!最近では少しづつアクセスも増えてきております^^よかったら一度是非見に来ていただければと思いますm(__)m
    www.kamiomo.com

    返信削除

ブログ アーカイブ