menu
menu

キーワード検索

 

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

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

Facebook Comments Plugin

  • Labs

Facebook

こんにちは(・∀・)

最近様々なサイトで記事の下の方にFacebookのコメント入力欄を目にする事が多くなりました。そこで今回はFacebook Comments Pluginの設定方法について解説したいと思います。

Facebook Comments Plugin

Comments Pluginとはこんな感じのです。

Code Generator

それではComments Pluginの設定をしていきます。Facebook DevelopersのComments Pluginのページを開いてください。

URL to comment on

Comments Pluginを掲載したいページのURLを入力します。

Width

横幅を指定します。

Number of Posts

表示させたい投稿数を入力します。

Get Codeをクリック

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

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

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

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

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

以上でFacebook Comments Pluginの設定は終了です。

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

初期値はURL to comment onで入力したURL

data-href="http://www.webdlab.com/"
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+はシングルクォーテーションで囲ってください。

関連リンク

Facebookいいねボタン
Facebook Like BoxはPage Pluginに変更になりました

  • カテゴリー:Labs