Jetpack 共有 + WPtouch Pro4 に “はてなブックマーク” のシェアボタンを追加

Jetpack by WordPress.com は 5.6.1 にバージョンアップ

スポンサードリンク

気に入って使いたいと思ったプラグイン AddToAny Share Buttons が提供してくれるシェアボタン。

けれど残念ながら私の環境では WPtouch Pro4 のモバイルモードからだと正常に機能してくれない!? ことが分かり、AddThis Sharing Buttons も WP Social Bookmarking Lightも簡単・そのままでは使えそうにないと分かって、最後に選んだのが Jetpack by WordPress.com のオプション機能「共有」だった…

そこまでを Jetpack 3.8.3 で行った作業として「Jetpack 共有 + WPtouch Pro4 - これでSNSシェアボタンが使える?!」に備忘録しました。

今回は -
そのときの Jetpack by WordPress.com を 5.6.1 にバージョンアップし、備忘録の続きとして、ウェブに公開されている諸先輩の記事で勉強させてもらい、デフォルトの Jetpack の「共有」では使えない “はてなブックマーク” の共有ボタンを追加しました。

 

Jetpack「共有」のデフォルトにないシェアボタン追加はこんな手順で

今回のシェアボタン追加を行った環境

  • WordPress 4.8.4
  • Jetpack by WordPress.com 5.6.1
  • WPtouch Pro 4.3.11

“はてな” のサイトが提供してくれる素材

Home page of Hatena
はてなの素材はホームページから

Jetpack「共有」に “はてな” のシェアボタンを追加したいので、その素材を提供してもらえないかと探しみてると…

“はてな” のホームページからたどれる広報室のサブページに素材を提供してくれる素材集のページがあります。
ホームページ一番下の[会社情報]の中、[広報室] → [素材集] とたどって、そのページの終わり近くに “はてなブックマーク” のダウンロードリンクがあります。

svg, eps の素材データが提供されていて、ボタン+テキストのバージョンも、ボタンだけのバージョンも期待していたとおりのデザインですが、Jetpack「共有」の側が求める画像データのサイズは 16x16px ですから、ここのデータはちょっとサイズ規格が違いすぎます

Webサイト、新聞、雑誌などでお使いいただけるリソースです。

と記載されていますが、サイズを変更して使いたいと思う場合を含め、この素材の扱い方は問い合わせて確認する必要があるように感じます。
(このページで提供されている画像データの利用に関する規定は確認できたら更新しようと思います)

Hatena-homepage-and_materials

“はてなブックマークボタン” のページ

Hatena-Bookmark-Button
はてなブックマークボタンのページ
  1. “はてなブックマークボタン” のデザインを決め
  2. 対応するコードを得る

ためのページがこの “はてなブックマークボタン” のページです。

 

またこのページには、SSL接続などページの仕様に関連する参考情報も得られます。

 

 

 

Jetpack「共有」に設定したパラメーター

jetpack-setting dialog
Jetpack の設定ダイアログ

今回、先輩方のサイトの情報と、”はてな” のホームページ、あるいは “はてなブックマークボタン” の使い方を説明してくれるページの情報を参考に、Jetpack「共有」に設定したのははてなブックマークのブックマークレットを使う方法です。

Jetpack「共有」の設定ダイアログを呼び出して設定するパラメーターのうち、アイコンURLには、”はてなブックマークボタン” のページで紹介されているボタン画像のURLを使いました。

サービス名:
はてなブックマーク

スポンサードリンク

共有URL:
http://b.hatena.ne.jp/bookmarklet?url=%post_url%&btitle=%post_title%

アイコンURL:
https://b.st-hatena.com/images/entry-button/button-only.gif

Jetpack がデフォルトで表示してくれるアイコンとならんで、はてなブックマークが提供してくれるボタン画像だけがカラーですね。

スポンサードリンク

返信を残す

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