このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

ブログにFacebookコメント設置 wordpressプラグイン Facebook Comment For WordPress編

Facebook

2012.01.29

この記事は最終更新日から1年以上が経過しています。

あ、

ども、

僕です。

SNSが加速する現代、ついていくのも必死なフロントエンドエンジニアの僕です。

皆さんは普段、何のSNSサービスを利用されているでしょうか?

僕は、最近やっと日本でもユーザー数が1000万人突破したFacebookを一番頻繁に使っている状況です。

そんなFacebookのコメントをブログと連動させたいーとか、

お出かけ前にちゃちゃっとブログにFacebookコメントを設置したいーとか、

お部屋の掃除が面倒で。。だからブログにFacebookコメントを設置したいーとか、

とか、思ったりしたことありませんか?

しないですね。

という事で、今回はwordpressにFacebookコメントを設置する方法です。

メリットとしては、実名登録な為「コメントが荒れにくい」総ユーザー数が全世界で約8億人という世界最大級のSNSとあって「広がり安い。」等などの利点があります。

では、そのFacebookのコメントをブログに設置をする方法ですが、

・wordpress使用

・プラグインを使い最短で

・もちろんFacebookアカウント所持

をキーワードに話を進めます。

WPプラグイン Facebook Comment For WordPressインストール

wordpressのプラグインFacebook Comment For WordPressをwordpressにインストールします。

例の如く、wordpress管理画面のプラグイン 新規追加ボタンクリックしFacebook Comment For WordPressで検索!

ありました。

インストール!

プラグインを起動すると、

このようなエラーメッセージが出現しますが、一旦無視していて大丈夫です。

つづいてFacebookの設定。

Facebookの設定

Facebook

Facebookアカウントにログインしましょう。

そしてログインしたままこちらの開発者 アプリ制作ページに飛びます。

https://developers.facebook.com/apps/?action=create

App Display Nameにアプリの名前(任意)

App NamespaceにURLを入力(任意)

規約にチェックを入れて続行ボタンクリック。

認証画面が出ますので、そのまま入力します。

以下の画面の様になれば良いです。(名前、パスワード等は消させて頂きました。)

ここで必要なのは、

・App ID/API Key

・アプリの秘訣

の値が必要となってきます。それではまたWordpressのプラグインFacebook Comment For WordPressの設定画面に戻りましょう。

Facebook Comment For WordPress 設定

必要最低限でいうと、以下の画像のApplication IDApplication SecretInclude Facebook comments on blogにチェックでOKです。

Application IDにはApp ID/API Keyの値を入力。

Application Secretにはアプリの秘訣を入力。

Update Optionsボタンを押し更新。

表示させてたい場所に

<div id="fb-root"></div>
<script src="http://connect.facebook.net/ja_JP/all.js#appId=APP_ID&amp;xfbml=1"></script>
<fb:comments href="<?php the_permalink(); ?>" num_posts="2" width="600"></fb:comments>

APP_IDにApp ID/API Keyの値を記述。

num_postsは表示するコメント数です。

widthは任意の数値。

the_permalink();は記事のURLを取得するWPテンプレートタグです。(任意で変更してください。)

確認すると、おお。出てますねー。

 

もし表示されないようでしたら以下のとおりチェックを入れてみてください。
 

次回は詳細な記事をUPする予定です。

Comment

Related Article

Facebook OGPを動的に切り替え フィード画像切替 その3

2012.11.05

Facebook OGPを動的に切り替え フィード画像切替 その2

2012.11.04

Facebook OGPを動的に切り替え フィード画像切替

2012.10.14

Facebookと連携する際よく使うツール、URL等のまとめ

2012.09.23

FacebookなどのSNSサービスで必要となってくる OGPについておさらい その2

2012.09.23

FacebookなどのSNSサービスで必要となってくる OGPについておさらい

2012.09.22

ブログにFacebookコメント設置 wordpressプラグイン Facebook Comment For WordPress編

2012.01.29

今更的ですが、Facebookページ始めました。

2012.01.29

CATEGORY LIST

LATEST NEWS

汎用 3D mesh/model viewerを求め。と、簡単に、FBXファイルをglTF(glb)に変換ツールを求め。

C++

2024.06.06

M1 Macで、OpenGL GLUTを使ってコンパイルする

C

2024.04.27

Rust - Actix Web mongo ユーザー登録 JWT認証

Rust

2024.03.24

Rust - Actix Web JWT 認証認可 APIの作成

Rust

2024.02.25

Rust - Actix Web × JSON 静的ファイルをAPIで返却

Rust

2024.01.19

Rust - Actix Web × MongoDB環境をサクッと起動

Rust

2024.01.18

5分で学ぶ RustでWave Function Collapse (波動関数崩壊アルゴリズム)

Rust

2024.01.15

LLaMAモデル GGMLフォーマット(llama.cpp)をRustフレームワーク Leptosを用いて M1MacMiniでサクッと動かす。

Rust

2024.01.11

2024年 狙っているモバイルノートPC

tool

2024.01.07

MacOS XcodeにSDL2を追加

tool

2023.12.26

php 7.4にアップデート

PHP

2023.12.24

5分で覚える Flutter Flameで作る Wave Function Collapse - 波動関数崩壊アルゴリズム

AI・Bot・algorithm

2023.12.20

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US