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で仮に入れたアドレスをブログの記事ごとに変えられるよう、

<?php the_permalink(); ?>

と書き換えます。

ピンクでマークした部分

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

完成

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

<iframe src=”//www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&amp;send=false&amp;layout=button_count&amp;width=70&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=000000000000000″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden; width:70px; height:21px;” allowTransparency=”true”></iframe>

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