Web

Jetpackの共有ボタンに「はてなブックマーク」ボタンを追加する方法!

手軽にオシャレな共有ボタンを設置できる「Jetpack」。

しかし、『はてなブックマークボタンが無いのがネック・・・』と
少し不満に感じている方もいるのではないでしょうか?

そんな方に、簡単で綺麗に「はてなブックマーク」ボタンを追加する方法をお教えします!

 

Jetpackのインストール

WordPress管理画面から、プラグイン→新規追加と開いていきます。

検索ウィンドウで「Jetpack」と検索し、「Jetpack by WordPress.com」をインストールします。

インストール後、有効化してください。

有効化をすると、WordPressとの連携を求められますので、連携します。

「サイトをジャンプスタート」という画面に切り替わったら、
ジャンプスタートボタンの下の『スキップ』をクリックします。

 

Feedly Insightのインストール

「Jetpack」同様に、
検索ウィンドウで「Feedly Insight」と検索しインストールし、有効化します。

準備はたったのこれだけです。

 

共有ボタンを設定する

WordPress管理画面のサイドメニューからJetpackをクリックし、
そのすぐ下にある設定を開きます。

「Engagement」タブを開き、共有を有効にし「共有 設定を構成する」を開きます。

 

ブログに表示したい共有ボタンをドラッグして
「有効済みのサービス」に追加していきましょう。

ぺージ一番下に、ボタンのスタイルや表示箇所などを設定出来ますので、お好みで設定しましょう。

アイコンのみの表示がオシャレでオススメです!

全ての設定が終わったら忘れずに「変更を保存」を押して設定を保存します。

完成後はこんな感じになります。

 

Feedly Insight を入れなくても出来るが・・・

実は「Feedly Insight」を入れなくても、
「Jetpack」だけではてなブックマークボタンを追加することが出来ます。

先ほど設定した画面の中に「新サービスを追加」というものがあります。

サービス名:はてなブックマーク
共有URL:http://b.hatena.ne.jp/bookmarklet?url=%post_url%&btitle=%post_title%

上記のように入力し、アイコンははてなの素材集からダウンロードしてきて、
自サーバーに格納し、任意のURLを指定します。
(メディアライブラリに追加してURLをコピーしてくればOK)

ただ、この手段を使うと、画像が上手く表示されませんでした。

丸くカットしてアップしても、こんな感じに周りに余白が出来ます。

完璧にサイズ調整すれば解決するかもしれませんが、
面倒であれば、「Feedly Insight」をインストールすることをオススメします。