スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Prev.    Category    Next 

Facebook コメントの設置方法

今回は Facebook のコメントの設置方法について書いてみました。

Facebook にはブログなどのサイトにコメントをつける機能があります。
このブログでも設定しいるので、サンプルは記事の末尾を見てください。 ただし、通常のコメント同様、個別記事表示の時のみ表示されます。

なお、 Facebook のコメントを設置する場合には、 [いいね!] ボタンと同様に OGP の設定をしておいた方がいいでしょう。


設置する場合には以下のサイトからコードを取得します。 sns_facebook_comment.png

スクリプト部はそのまま貼り付けます。 コメントの欄の部品は、 記事別のコメントにするには URL の項目は適当な値を入力し、後でコードを修正する必要があります。
sns_facebook_comment_code.png


FC2 ブログの場合はテンプレートに記述します。 その際、 2 つの注意点があります。
  • URL の項目(data-href)は <%topentry_link> に変更
  • 個別記事モードのみで表示するには、 スクリプト部、 部品ともに permanent_area ブロック変数内に書く。
変数等については以前の記事を参考にしてください。

このブログで使用しているコードをサンプルとして挙げておきます。
使う場合はコメント数(data-num-posts)、 幅(data-width)を適当に変えてください。
  <!--permanent_area-->
  :
</div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script><br />

<div class="fb-comments" data-href="<%topentry_link>" data-num-posts="5" data-width="500"></div>
  :
  <!--/permanent_area-->
スクリプト部は <body> 直下がいいと書いてありますが、 コメント部品より前に書いてあれば問題ないと思います。

関連記事
スポンサーサイト
Prev.    Category    Next 

Facebook コメント


コメント

無事に設置完了しました!


 有益な記事を拝見させて頂いた上で、早速

実践させて頂き、Facebookコメント欄を表示させることが出来ました♪

有難うございました。<m(__)m> ↓

http://donmaru1.blog.fc2.com/

 しかし、FC2ブログでFacebookコメント表示出来ても、

TESTでコメントを書くと、「 Facebookにも投稿する 」に

チエックを入れても、Facebook個人ページに、

コメントの投稿が、されません。

 アメブロでは上手く行ったのですが......

結構ググりまくって調べたのですが、もう、手詰まりです。

なので、しばらくは、これで行く事にします。

 個別記事ごとに重複はせずに設置は出来ました。

コメントの投稿

Font & Icon
非公開コメント

このページをシェア
アクセスカウンター
アクセスランキング
[ジャンルランキング]
コンピュータ
11位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
2位
アクセスランキングを見る>>
カレンダー(アーカイブ)
プルダウン 降順 昇順 年別

07月 | 2017年08月 | 09月
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -


はてな新着記事
はてな人気記事
ブロとも申請フォーム
プロフィール

yohshiy

Author:yohshiy
職業プログラマー。
仕事は主に C++ ですが、軽い言語マニアなので、色々使っています。

はてブ:yohshiy のブックマーク
Twitter:@yohshiy

サイト紹介
プログラミング好きのブログです。プログラミング関連の話題や公開ソフトの開発記などを雑多に書いてます。ただ、たまに英語やネット系の話になることも。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。