及川WEB室｜ホームページ制作

HTML、CSS、JavaScript、スマートフォンサイト、Facebookなど、サイト制作に関する事をメモしています。
個人的な備忘録です。
及川WEB室 ホームページ制作HOME
及川WEB室 > Facebook > Facebook[いいね！]ボタン設置・カスタマイズ

Facebook[いいね！]ボタン設置・カスタマイズ

Facebook[いいね！]ボタンを自分のサイトに設置する方法と、ボタンのカスタマイズについてメモしておきます。

特に、ボタンの吹き出し（バルーン、ボックスカウント）の位置を横から上に変更して表示したかった。その方法をメモ。

Facebook[いいね！]ボタン設置

コードを取得・自分のホームページに設置

  1. ↓こちらでコードを取得できる。
    Like Button - Facebook開発者
    [Get your Like Button Code]で、ある程度表示内容を設定して[Get Code]ボタンをクリックすると、コードが表示される。
  2. コードが2つある。
    • 1つ目のコードをコピーし、ボタンを設置するご自分のホームページのWEBページ内の<body>タグのすぐ後にペースト。
    • もうひとつのプラグインコードをコピーし、WEBページ内で、いいねボタンを設置したい個所にペースト。

コードをカスタマイズ

吹き出しを横から上に変更するには、コードを取得する際に、Layout を[box_count]にする。

コードを取得する際、[Get your Like Button Code]の項目で Layout を[box_count]にすると、プラグインコードの<div class="fb-like"・・・>タグの「layout=""」というアトリビュート（属性）の値が変更されて、吹き出しが横から上に変更される。

プラグインコード内の<div class="fb-like"・・・>のタグにアトリビュート（属性）を設定することによって、色々なカスタマイズが出来る。
こちら(Like Button - Facebook開発者)のページ内の「Setting」の項目に、アトリビュートの説明が有ります（英語）。

●アトリビュートに「data-layout="standard"」が設定されている例。 
<div class="fb-like" data-href="http://www.oikawa-sekkei.com/web/" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="false" data-send="false"></div>


●アトリビュートに「data-layout="box_count"」が設定されている例。
<div class="fb-like" data-href="http://www.oikawa-sekkei.com/web/"  data-colorscheme="light" data-layout="box_count" data-action="like" data-show-faces="false" data-send="false"></div>

Twitter[ツイート]ボタン設置・カスタマイズ方法

Twitter[ツイート]ボタンの設置・カスタマイズ方法についてはこちらを参照してください。
Twitter[ツイート]ボタン設置・カスタマイズ：吹き出し（バルーン,ボックスカウント）の位置を変更
MENU Ξ