WordPress はてなブックマークを追加

今回は、プラグイン「tweet, Like, Google+1 and share」に
はてなブックマークボタンの追加方法を紹介します。

カスタムボタンの設定

以下のサイトからはてなブックマークボタンのコードをコピーします。
はてなブックマークボタン

以下の赤枠をコピーします。

コピーしたコードを
WordPress設定画面の「設定」⇒「Tweet Like Plusone」設定の
Add your own Custom Buttonsのボックスに貼り付けます。
貼り付けた後、URL部分に以下を追記します。
・http://b.hatena.ne.jp/entry/%%URL%%
また、タイトル部を以下に置き換えます。
・”このエントリーをはてなブックマークに追加”⇒”%%TITLE%%”
※以下図の赤枠部分です。

次にカスタムボタンを表示させるために、
「Tweet Like Plusone」設定画面の
Select Icons to displayで
Display Custom Buttonsにチェックを入れます。

ロリポップ WAF設定を一旦無効化

以上で設定が終わったので、「Tweet Like Plusone」設定画面
の一番下にあるSave Changesを押します。

あれ、403エラーが発生しました。

私が使っているレンタルサーバーロリポップのWAF設定が
有効になっているのが原因のようです。

※WAF設定・・・ウェブアプリケーションファイアウォール。不正アクセスやサイトの改ざんなどを防ぐ目的の機能のようです。

とりあえず、一旦、WAF設定を無効化します。
ロリポップサーバーの管理画面の「WEBツール」内にWAF設定がありますので、
一旦無効化します。

無効化して５分〜１０分まってから、
再度、Save Changesを押します。
今度は成功しました。

はてなブックマークを上吹き出しに変更

さて、実際にページを見てみると、以下の表示になりました。

他のソーシャルボタンと合わせて、吹き出しを上向きにするため、
ボタンコードを変更します。
先ほど貼り付けたはてなブックマークのコードの
data-hatena-bookmark-layoutを
“standard-balloon”⇒”vertical-balloon”
に変更します。（下図の赤枠）

これで、上吹き出しに変更できました。

すべての設定が終わったら、WAF設定を有効化に戻しておきましょう。

まとめ

以上、プラグイン「tweet, Like, Google+1 and share」に
はてなブックマークを追加する方法でした。
参考になれば幸いです。

スポンサーリンク