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

Pocket

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

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

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

 

Jetpackのインストール

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

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

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

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

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

 

 

Feedly Insightのインストール

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

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

 

 

共有ボタンを設定する

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

 

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

 

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

 

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

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

 

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

 

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

 

 

実は手動でも出来る

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

 

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

 

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

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

 

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

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

 

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

 

Pocket

あわせて読みたい

コメント