Bloggerではてなブックマークボタンを個別投稿に追加する方法

はてなブックマークボタンを追加する方法が簡単だったのでやってみました。

コード作成

はてなブックマークボタンの作成設定について - はてなブックマークのページで下記画像のような設定を行い、コードを作成します。

　１．ボタンのタイプを選ぶ。右側のものを選びました。

　２．ページのアドレスの設定。ここでは後で編集しやすいように

　　　data:post.canonicalUrl

　　　と入力しました。

　３．ページのタイトルの設定。ここでは後で編集しやすいように

　　　　　data:post.title

　　　と入力しました。

　４．ブックマーク数の設定。ここでは

　　　・非表示
　　　・表示
　　　・表示（パーティカル）

　　の３つが設定でき、表示（パーティカル）を選びました。

　５．「３．ボタンを作成しましょう」の下に、今回追加するボタンが表示。
　　　その下のコードをコピーする。

コードの編集

　１．コードを２カ所、下記のように変更します。

　　・１カ所目
　　　＜変更前＞
　　　　href="http://b.hatena.ne.jp/entry/data:post.canonicalUrl”
　　　＜変更後＞
　　　　expr:href='"http://b.hatena.ne.jp/entry/" + data:post.canonicalUrl'

　　・２カ所目
　　　＜変更前＞
　　　　data-hatena-bookmark-title='data:post.title'
　　　＜変更後＞
　　　　expr:data-hatena-bookmark-title='data:post.title'

コードの追加

今回は個別ページに追加する設定なので、変更したコードの一番上と一番下にコードを追加する。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
</b:if>

カスタマイズのHTML編集で<data:postbody/>のあとに１．のコードを貼り付ける。

以上ですが、参考になれば幸いです。

メニュー

2017年1月4日水曜日