Jetpackの「共有ボタン」に「はてなブックマーク」を追加する方法(「Evernote」「mixiチェック」「mixiボイス」「LINE」もついでに追加)

WordPress Jetpack plugin
WordPress Jetpack plugin / denharsh

 WordPressの多機能プラグイン「Jetpack」を使っている人は少なくないと思うが、今回はその中の機能「共有ボタン」に「はてなブックマーク」の共有ボタンを追加する方法を紹介したいと思う。「はてなブックマーク」は私も利用しているし巷では需要が結構あるので、追加しておいても損は無いと思う。むしろ歓迎されるんじゃないだろうか。

 Jetpackのデフォルトでは「facebook」「Twitter」「Google+」などが存在しているが、「はてなブックマーク」は日本のサービスゆえ存在していないので、自分で新たに追加する必要がある。多くのサイトで同様のことが解説されているが、「B!」という画像の大きさがマッチしていない解説サイトも多いので、当ブログですべてを解決してもらえれば幸いだ。

■ダッシュボードから「パブリサイズ共有」設定へ

 ダッシュボードからJetpackを選択し、「パブリサイズ共有」の設定へ遷移しよう。以下の通りだ。

4299_01

4299_02

■新サービスを追加

 スクロールしたページ中段あたりに、「新サービスを追加」というリンクがあるので、ココをクリックだ。下部のライブプレビューを見てみると、デフォルトでは「facebook」「Twitter」「Google+」が表示されている。
4299_03
 以下の画面が飛び出したはずだ。
4299_04

■「はてなブックマーク」の情報を入力


 「はてなブックマーク」の情報を入力していこう。サービス名は任意だ、私は「Bookmark」とした。

  • サービス名: Bookmark
  • 共有URL: http://b.hatena.ne.jp/bookmarklet?url=%post_url%&btitle=%post_title%
  • アイコンURL: http://cdn-ak.favicon.st-hatena.com/?url=http%3A%2F%2Fb.hatena.ne.jp%2Farticles

4299_05
 入力が済んだら最後に「共有ボタンを作成」をクリックしよう。
4299_06
 「利用可能なサービス」一覧に新たに作成した「Bookmark」が表示されているぞ。

■「はてなブックマーク」を有効化


 では新しく追加した「はてなブックマーク」を有効化しよう。以下のように、「Bookmark」をドラッグして移動してほしい。
4299_07
 すると、以下のように、「ライブプレビュー」に表示されるようになる。しかし、なんとまあ、アイコン画像に文字が重なっている! のだが、このプレビューがダメダメなだけで、これでうまく作成できている。気になるけどね・・・。
4299_08
 最後に「変更を保存」をクリックして完了だ。
4299_09
4299_10

■設定の確認


 では正常に設定されているのか確認してみよう。
4299_11
 クリックすると・・・以下が表示される、OKだ!
4299_12

■「Evernote」も追加


 同じ要領で、「Evernote」も追加してみよう。方法はもちろん前述と同じだ。「Evernote」の情報は以下だ。

  • サービス名: Evernote
  • 共有URL: http://www.evernote.com/clip.action?url=%post_url%&title=%post_title%
  • アイコンURL: http://favicon.qfor.info/f/http://evernote.com

 ※16pxのアイコンが無い為、「favicon (ファビコン) 画像変換サービス – Favicon Converter」を利用
4299_13

■「mixiチェック」も追加


 この際だから「mixiチェック」も追加しよう。方法はもちろん前述と同様。「mixiチェック」の情報は以下だ。

  • サービス名: check
  • 共有URL: http://mixi.jp/share.pl?u=%post_url%
  • アイコンURL: https://sap.mixi.jp/img/basic/icon/mixicheck002.gif

4299_14

■「mixiボイス」も追加


 えーい! こうなったら「mixiボイス」も追加だ。方法はもちろん一緒。「mixiボイス」の情報は以下だ。

  • サービス名: voice
  • 共有URL: http://mixi.jp/simplepost/voice?status=%post_title%%post_url%
  • アイコンURL: http://favicon.qfor.info/f/http://mixi.jp/

 ※16pxのアイコンが無い為、「favicon (ファビコン) 画像変換サービス – Favicon Converter」を利用
4299_15

■「LINE」も追加


 「LINE」も追加だ! 方法は(略)。「LINE」の情報は以下だ。

  • サービス名: LINE
  • 共有URL: http://line.naver.jp/R/msg/text/%post_title%%0D%0A%post_url%
  • アイコンURL: http://favicon.qfor.info/f/http://linecorp.com/

 ※16pxのアイコンが無い為、「favicon (ファビコン) 画像変換サービス – Favicon Converter」を利用

4299_16

(平成26年2月8日 アシベズヘア@ashibehair_m

━ 関連書籍 ━━━

WordPressではじめる かわいいウェブサイト
本書はWordPressを使い、作品をおしゃれに紹介するポートフォリオサイトやプロモーションを強化したいサークル活動のサイトなど、それぞれの目的に沿った機能を備えたウェブサイトの作り方とかわいいテーマを集めて紹介しています。特に雑貨店やカフェ、おけいこ教室、オンラインショップなど、小さいながらもきちんとしたウェブサイトを運営する必要のあるスモールビジネスをしている方々に使いやすい内容となっています。

━ 関連記事 ━━━

  • Jetpackの「共有ボタン」に「はてなブックマーク」を追加する方法(「Evernote」「mixiチェック」「mixiボイス」「LINE」もついでに追加)
  • リンク先の画面キャプチャ(スクリーンショット)を自動で取得し表示してくれるWordPressのプラグイン「Browser Shots」がかなり便利だ
  • 危ない! WordPressの「admin」ユーザーはすぐに削除すべし!
  • WordPressのユーザーを追加する(複数ユーザーで管理する)
  • WordPressのスパムコメントを防ぐ! プラグイン「Akismet(アキスメット)」の設定方法
  • WordPressでカテゴリーやタグを作成する際に見掛ける「スラッグ」とは何か?
  • Jetpackの「共有ボタン」に「はてなブックマーク」を追加する方法(「Evernote」「mixiチェック」「mixiボイス」「LINE」もついでに追加)」への4件のフィードバック

    1. ピンバック: JetpackをこのBlogに導入しました | OPC Diary

    2. ピンバック: SEO的に良さそうなことをしてみる。はてなブックマークとEvernoteボタンの追加 | RYUS blog

    3. ピンバック: WordPressのJetpack共有に追加したSNSボタンの高さを合わせる

    4. ピンバック: ブログのアクセスアップに「はてなブックマーク」が効果あり!だそうで登録&共有ボタン追加した

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>