デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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

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

スポンサーリンク

カスタムボタンの設定

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

以下の赤枠をコピーします。
はてなブックマーク1

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

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

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

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

あれ、403エラーが発生しました。
スクリーンショット 2016-03-29 20.39.58

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

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

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

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

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

さて、実際にページを見てみると、以下の表示になりました。
スクリーンショット 2016-03-29 20.43.53

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

はてなブックマーク4

これで、上吹き出しに変更できました。
スクリーンショット 2016-03-29 20.47.41

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

まとめ

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン