WordPressにプラグインを使用しないでいいね!ボタンを配置する方法

プラグインに頼ってばかりいてはサイトの表示が重くなったり、セキュリティ的にもよろしくなかったりするので、(ソーシャルボタンのプラグインが危険と言うことではありませんが)ソーシャルボタンは自力で設置することにしました。

まずはいいね!ボタンの設置方法を記録。

ボタン設置のためのコードを取得

Like Button – Facebook開発者にアクセスしてボタン設置のコードを取得します。(Facebookデベロッパー登録が必要です。)
https://developers.facebook.com/docs/reference/plugins/like/

URL to Like :

いいね!ボタンを設置するページのURL。
後で書き換えるので適当なアドレスを入れておきます。

Send Button (XFBML Only):

送るボタンの表示設定

Layout Style:

いいね!ボタンの表示スタイル。そのままですね…
Plan B worksでは「button_count」で表示しています。

Width:

いいね!ボタンの幅指定。カウント数の表示も含まれます。
こちらも後で書き換えるのでとりあえずそのまま。

Show Faces:

Layout StyleをStandardにしたときにいいね!ボタンを押してくれた人のユーザーアイコン表示設定。

Verb to display:

ボタンの表記設定。
like→いいね!
recommend→おすすめ

Color Scheme:

ボタンの色設定。

Font:

ォントの設定。
日本語で表示する場合はカウント数だけにしか反映されません。

設定が終わったら【Get Code】をクリックしてコードを表示します。
HTML5、XFBML、IFRAMEの3種類のコードから選択べます。
今回はIFRAMEで…

取得したコードを書き換える

取得したコードはこんな感じです。
マークした所はこれから書き換える部分です。

黄色でマークした部分

URL to Likeで仮に入れたアドレスをブログの記事ごとに変えられるよう、

と書き換えます。

ピンクでマークした部分

今回はいいね!のカウント数を非表示にしたいのでiframeの幅を変更して強制的に見えなくしてしまいます。
〔width=450〕〔width:450px;〕を
〔width=70〕〔width:70px;〕と変更します。
一番最初の設定のときに70で設定しても大丈夫。

完成

完成したコードはこんな感じです。
このコードを配置したい場所に記述します。

これでいいね!ボタンの設置ができました!
OGPの設定もお忘れなく〜。

  • Advertising
  •  

関連記事

コメント