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で…

Advertising

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

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

黄色でマークした部分

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の設定もお忘れなく〜。

Author

すずき のりえ
@planbworks

Webデザイナー / グラフィックデザイナー / エイチレフ合同会社 業務執行社員
コーポレートサイト・リクルーティングサイト、会社案内・入社案内がメインです。最近では医療・福祉系のお客様が多いです。
2015年10月より母校で非常勤講師(DTP)。2017年3月よりお茶のお稽古に通っています(裏千家)。

関連記事