サイトにFacebookのLike Boxを設置する方法

likebox01

サイトにFacebookページのLike Boxを設置する方法。

手順

1.FacebookのデベロッパーサイトにあるLike Boxのページへ行く。

likebox01

 

2.上記のようなページが表示されるので、FacebookページのURLと幅、高さなどの設定をする。ページのすぐ下にその設定での表示イメージがリアルタイムで表示されるので確認しながら設定する。

3.設定が完了したら、「Get Code」をクリック。すると、コードが表示される。

4.「HTML5」で設置する場合は、上のコードをfooterなどに設置し、下のコードをLike Boxを表示させたい箇所に設置する。

Like Boxの幅を可変にする方法

レスポンシブデザインやスマホでの表示の際は、横幅を可変にしたいので、その方法。

▼参考サイト
Facebook Like Boxを可変レイアウトにして横幅ピッタリにするカスタマイズCSS(mbdb)

下記のコードをスタイルシートに貼り付け、

div#likebox_container .fbcomments,
div#likebox_container .fb_iframe_widget,
div#likebox_container .fb_iframe_widget[style],
div#likebox_container .fb_iframe_widget iframe[style],
div#likebox_container .fbcomments iframe[style],
div#likebox_container .fb_iframe_widget span{
width: 100% !important;
}

Like Boxを表示しているコードをdivで囲む。

<div id=”likebox_container”>
<div class=”fb-like-box” data-colorscheme=”light” data-show-faces=”true” data-header=”true” data-stream=”false” data-show-border=”true”></div>
</div>

補足

wordpressであれば、ウィジェットなどから設置も可能。

Leave a Comment.