Bloggerカスタマイズが楽しくなってきたArdor(@ArdorOnline)です。
今回は、はてなブックマークボタンを各記事に設置する方法をご紹介します。
Bloggerにも簡単に設置できるだろうと考えていたのですが、
ちょっとカスタマイズする必要がありました。
難しくないので設置したい方は、参考にしてみてください。
はてなブックマークボタンを設置する手順は、次の通りです。
- はてなブックマークボタン作成ページへ行く
- ボタンを配置するページの情報を入力
- ボタンタイプを選択
- プレビューを確認。コードをコピーする
- Blogger用にカスタマイズ
- 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指定で変更できます。
今後、公式サイトで変更されるかもしれません。
最後に
いかがでしたでしょうか?
はてなブックマークボタンを設置できましたか?
設置できた方は、是非ブックマークしてください!
この記事で設置できれば幸いです。
最後まで読んで頂きありがとうございます。
世界の情報・笑い・幸せをブログに載せております!最近では少しづつアクセスも増えてきております^^よかったら一度是非見に来ていただければと思いますm(__)m
返信削除www.kamiomo.com