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

こんばんは、tapunです。

まだブログを初めて1週間なので、いろいろ試行錯誤しているのですが、WordPressにデフォルトでついているSNS共有機能では、「はてなブックマーク」が選択できないことに不満をお持ちの方はいませんか?

確かに日本を中心に使われているサービスですが日本国内においては便利なサービスなので、ぜひ共有ボタンに追加したい!ということで、追加しました~。

はてな共有ボタン

記事の下部につける共有ボタンと、記事の上部につけるボタンそれぞれのつけ方を解説します!


記事の下部につける[はてブ]ボタン

一般的にSNS共有ボタンは記事が終了したところ(下部)につけるのが効果が高いといわれています。

WordPressのデフォルトの共有ボタンも、記事の下部に挿入されます。

  1. はてなブックマークのSNSボタンのソースを取得します。
    こちらのページではてなブックマークボタンのソースを取得できます。
    > はてなブックマークボタン
  2. こちらの画面ショットを参考に、はてなブックマークボタンを作成します。
    ※URLとタイトルは後ほど書き換えるので、図のようにあとから分かりやすい文言を入れておきます。

    はてぶボタン作成

  3. 右側に表示されたソースコードをメモ帳などにコピペします。
    <a href=”http://b.hatena.ne.jp/entry/★テストアドレス★” class=”hatena-bookmark-button” data-hatena-bookmark-title=”★タイトル★” data-hatena-bookmark-layout=”simple-balloon” 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>

  4. WordPress管理画面で[設定]-[共有]メニューにアクセスします。
    共有ボタンのところにある[新サービス追加]を押します。

    新サービス追加

  5. 先ほどコピペしたソースを一部改変して登録します。
    サービス名: はてな(任意です)
    共有URL: http://b.hatena.ne.jp/entry/★テストアドレス★ 
            の★テストアドレス★%post_full_url%に変えます。
    アイコンURL: https://b.st-hatena.com/images/entry-button/button-only@2x.png

    新サービスの登録

  6. そうすると”利用可能なサービス”に”はてな”が追加されるので、そのボタンを
    下の”有効化済のサービス”にドラッグしてください。
    はてなドラッグ
  7. 設定を保存して、完了です。

記事の上部につける[はてブボタン]

記事の上部につけるはてブボタンについては、WordPressデフォルトの共有設定では対応できなかったので、こちらの記事を参考にさせていただきました。

記事の下部につける手順と同じくはてなブックマークボタンのソースを入手し、その後WordPress管理画面-[外観]-[テーマの編集]からsingle.phpファイルを編集する方法です。

ちょっとハードルが高いので、編集前の内容のバックアップをとっておくことをおススメします。


まとめ

はてなブックマークのボタンを記事末尾に配置したい場合には、WordPressデフォルトの共有設定を使い、また記事の上部に表示させたいときにはphpファイルを編集することで実現できることが分かりました。

まだphpファイルの編集には手間取るので、これから慣れていきたいです。