上のキャプチャのような、デザイン性の高い「いいね!ボタン」を作ることができれば、WEBサイトをよりスタイリッシュに魅せることができます。

ここでは、記事のアイキャッチ画像を背景としたオリジナルデザインの「いいね!ボタン」が実現できるサンプルプログラムを紹介していきます。

 

Facebook埋め込み用コードを取得する

まずは、Facebookの埋め込み用コードを取得します。

埋め込みコードの取得の仕方は以下のページを参考にしてください。

 

 

ここでは、レイアウトを「button」ボタンサイズを「large」とした埋め込みコードを取得しておきます。

 

 

テンプレートにアイキャッチ取得プログラムを記述する

今回は、デザインとして「いいね!ボタン」の背景に記事のアイキャッチ画像を表示させます。

以下のプログラムで、「$eye_url」変数にアイキャッチ画像のURLを格納しておきましょう。

 

PHP

 

テンプレートに「いいね!ボタン」表示プログラムを記述する

テンプレート中の「いいね!ボタン」を表示させたい位置に、以下のプログラムを記述します。

」の部分には、先ほど取得した埋め込みコードを貼り付けましょう。

 

HTML

 

デザインを整えるCSSを記述する

最後に、デザインを整えるCSSを記述します。

CSS

 

完成

おすすめの記事