menu
menu

キーワード検索

 

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

  1. ( 1 - ) 【CSS】CSSだけでドロップダウンメニュー
  2. ( 3 ↑) 【Mac】Macのユーザー名とアカウント名を変更する
  3. ( 2 ↓) 【jQuery】jQueryでドロップダウンメニュー
  4. ( 9 ↑) 【CSS】スマホ対応CSSだけでドロップダウンメニュー
  5. ( 7 ↑) 【PHP】PHPでシンプルなメールフォーム
  6. ( 5 ↓) 【CSS】レスポンシブデザインのブレークポイントは⁉
  7. ( 4 ↓) 【CSS】CSSだけでサイズ可変・スマホ対応のアコーディオン
  8. (10 ↑) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  9. ( 9 - ) 【CSS】CSSだけでブロック要素の表示非表示(トグルボタン)
  10. ( - ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
このエントリーをはてなブックマークに追加

【Facebook】コメントプラグイン

【Facebook】コメントプラグイン

こんにちは(・∀・)

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

Facebookコメントプラグイン

コメントプラグインとはこんな感じのです。

Code Generator

それではコメントプラグインの設定をしていきます。Facebook Developersのコメントプラグインのページを開いてください。

コメントするURL

コメントプラグインを掲載したいページのURLを入力します。

横幅を指定します。

投稿数

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

コードを取得をクリック

1. ポップアップ画面が表示されたら、
ステップ 1:のアプリIDをボタンを表示するサイトのIDに変更して言語を設定します。日本語ならそのままJapaneseでOK。

2. Step 2:のコードを開始<body>タグの直後に貼り付けます。
すでに他のFacebook Pluginなどで1のコードを使用している場合、ここでは必要ありません。

3. Step 3:のコードをコメント欄を表示させたい場所に貼り付けます。

以上でFacebookコメントプラグインの設定は終了です。

data-hrefのURLは固定のURLになります。

初期値は「コメントするURL」で入力したURL

data-href="http://www.example.com/"

URLを動的に取得したい場合はdata-hrefのURLの書き方をJavaScriptやPHPなどで動的にURLを取得する記述に変更します。

JavaScriptでURLを取得

<script>
$('.fb-comments-parent').html('<div class="fb-comments" data-href="' + location.href + '" data-numposts="5" data-width="100%"></div>');
</script>
「+ location.href +」はダブルクォーテーションの中にさらにシングルクォーテーションで囲みます。
関連リンク

【Facebook】コメントプラグインの表示がおかしくなった
【Facebook】いいねボタン
【Facebook】Like BoxはPage Pluginに変更になりました

  • Facebook コメント プラグイン
このエントリーをはてなブックマークに追加