メニュー

メニュー

2017年1月4日水曜日

Bloggerではてなブックマークボタンを個別投稿に追加する方法 | 日々のメモ帖 by holidaybuggy1980 holidaybuggy1980
300 300

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

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

コード作成


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














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

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

   data:post.canonicalUrl

   と入力しました。

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

     data:post.title

   と入力しました。

 4.ブックマーク数の設定。ここでは

   ・非表示
   ・表示
   ・表示(パーティカル)

  の3つが設定でき、表示(パーティカル)を選びました。

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

コードの編集


 1.コードを2カ所、下記のように変更します。

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

  ・2カ所目
   <変更前>
    data-hatena-bookmark-title='data:post.title'
   <変更後>
    expr:data-hatena-bookmark-title='data:post.title'

コードの追加

  1. 今回は個別ページに追加する設定なので、変更したコードの一番上と一番下にコードを追加する。
<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>
  1. カスタマイズのHTML編集で<data:postbody/>のあとに1.のコードを貼り付ける。


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

0 件のコメント:

コメントを投稿