2016/04/13

ホームページにフェイスブックのいいねボタンの導入方法

いいねボタンとはフェイスブックを利用しているユーザーがホームページを見たときにいいねボタンを押すことでその他のユーザーに紹介できる機能です。

 

導入方法は簡単!

 

まずはfacebook developersにアクセスします。

 

いいね!ボタン構成ツールの項目を入れます。

「いいね!」をするURL

こちらにいいねボタンで使用するウェブサイトかFacebookページのURLを選択します。

 

Width

ボタンの幅を設定します。レイアウトによりデフォルトの幅が設定してあり、ここに指定したい幅を入力すると幅を指定することが出来ます。ただし、各レイアウトに最少幅が設けられているのでそれ以下にはできません。

レイアウト

standard

seo_like_button_3[1]

デフォルト幅:450ピクセル。
高さ:35ピクセル(写真なし)または80ピクセル(写真あり)。

最小幅:225ピクセル。

 

button_count

seo_like_button_4[1]

デフォルト幅:90ピクセル。
高さ:20ピクセル。

最小幅:90ピクセル。

 

box_count

seo_like_button_5[1]

デフォルト幅:55ピクセル。
高さ:65ピクセル。

最小幅:55ピクセル。

 

button

seo_like_button_6[1]

デフォルト幅:47ピクセル。
高さ:20ピクセル。

最小幅:47ピクセル。

 

 

アクションタイプ

likeかrecommendの2タイプあり、likeなら通常のいいね!という文字、recommendならおすすめという文字で表示されます。

seo_like_button_7[1]

 

友達の顔を表示する

チェックボックスを外すといいねを押してくれた人の顔が非表示になります。

 

シェアボタンを追加

チェックボックスを外すとシェアボタンが非表示になります。

seo_like_button_8[1]

 

 

好きなボタンにカスタマイズすると「Get Code」をクリックし実際に表示するためのコードを取得します。

seo_like_button_9[1]

出来上がったコードを貼り付けます。

 

上のコードは<body>のすぐ下に貼り付けます。

 

下のコードは実際にボタンを表示させたい場所に貼り付けます。