上のキャプチャのような、デザイン性の高い「いいね！ボタン」を作ることができれば、WEBサイトをよりスタイリッシュに魅せることができます。
ここでは、記事のアイキャッチ画像を背景としたオリジナルデザインの「いいね！ボタン」が実現できるサンプルプログラムを紹介していきます。
目次
Facebook埋め込み用コードを取得する
まずは、Facebookの埋め込み用コードを取得します。
埋め込みコードの取得の仕方は以下のページを参考にしてください。
ここでは、レイアウトを「button」ボタンサイズを「large」とした埋め込みコードを取得しておきます。
テンプレートにアイキャッチ取得プログラムを記述する
今回は、デザインとして「いいね！ボタン」の背景に記事のアイキャッチ画像を表示させます。
以下のプログラムで、「$eye_url」変数にアイキャッチ画像のURLを格納しておきましょう。
PHP
テンプレートに「いいね！ボタン」表示プログラムを記述する
テンプレート中の「いいね！ボタン」を表示させたい位置に、以下のプログラムを記述します。
「」の部分には、先ほど取得した埋め込みコードを貼り付けましょう。
HTML
デザインを整えるCSSを記述する
最後に、デザインを整えるCSSを記述します。
CSS
完成
