menu
menu

キーワード検索

 

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

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

【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 コメント プラグイン
このエントリーをはてなブックマークに追加