menu
menu

キーワード検索

 

前月(10月)の人気記事トップ10

  1. ( 1-) 【CSS Tips】CSSだけでドロップダウンメニュー
  2. ( 2-) 【CSS Tips】CSSだけでサイズ可変・スマホ対応のアコーディオン
  3. ( 3-) 【HTML5】スマホサイトの作成・基本編
  4. ( 7↑) 【HTML5】HTML5・ページ作成の基本
  5. ( 6↑)【jQuery入門】jQueryで日時を表示
  6. ( 5↓) 【jQuery】表示しているブラウザの高さを取得してCSSのheightに指定
  7. ( 4↓) 【CSS Tips】CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 8-) 【Mac Tips】MacにInkscapeをインストール
  9. ( 9-) 【MySQL】Windows 10にMySQLをインストール
  10. (10-) 【CSS Tips】スマホサイト向け横にスクロールするナビゲーション

Facebookいいねボタンの設置

  • Labs

Facebook

こんにちは(・∀・)

今回はFacebookいいねボタンの書き方が少し変更になったので新しい書き方についての更新記事です。

Facebookいいねボタン

Facebook DevelopersのLike Button for the Webのページを開きます。

URL to Like

ボタンを設置するホームページのURLを入力します。

Width

横幅を指定します(空欄でもOK)。

Layout

standard、box_count、button_countまたはbuttonの中から選択。

Action Type

Likeがいいね、recommendがおすすめ。

Show Friends' Faces

standardを選択した場合ボタンの下にいいねした人のアイコンが表示されます。表示したくない場合はチェックを外します。

Include Share Button

シェアボタンを表示します。表示したくない場合はチェックを外します。

Get Codeをクリック

ポップアップ画面が表示されたらアプリIDをボタンを表示するサイトのIDに変更します。

言語を設定します。日本語ならそのままJapaneseでOK。

1. 1のコードを開始<body>タグの直後に貼り付けます。

すでに他のFacebook Pluginなどで1のコードを使用している場合、ここでは必要ありません。

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

以上でFacebookいいねボタンの設置は終了です。

data-hrefのURLは固定のURLになります。URLを動的に取得したい場合はdata-hrefのURLの書き方を変更します。

初期値はURL to Likeで入力したURL

data-href="https://www.webdlab.com/"
PHPでURLを取得

data-href="<?php echo $_SERVER["REQUEST_URI"]; ?>"
JavaScriptでURLを取得

<script>document.write('<div class="fb-like" data-href='+location.href+' data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"></div>');</script>

+location.href+はシングルクォーテーションで囲ってください。


関連リンク

pocketボタン
twitterボタン
はてなブックマークボタン
google+1ボタン

まとめて解説
ソーシャルブックマークボタン

  • カテゴリー:Labs