facebookのコメント欄をブログに設置する方法  ただいま挑戦中!

Toshiaki Kanda 2013年09月12日 木曜日
0 people like this post
By: Mambembe Arts & Crafts

ブログとfacebookをシームレスにしたいと思い、facebookのコメント欄を実装したいと思った。
WordPressやMovableTypeは多いけれども、Typepad.comのユーザーはここの所少なくて色々と苦戦中。

そこで、自分の備忘録メモとして、キャプチャを取りながら、実装中!これだと、あとで、誰かに間違いを指摘してもらいやすいと思う。

【1】Create an App – Facebook開発者 でアプリを登録

 登録して、captureサインを終えると暫く待つ。もうちょっと待つ。

忘れた頃に、このように新しくアプリとして、
【comment_box】という名前で登録される。

 

【2】Comments – Facebook開発者 でコードを取得する

GetCodeでソースコードを取得する。

 

 

data-href=”   ” の部分を各パーマリンクのパラメータへ変更が必要です。

MovableTypeは、<$mt:EntryPermalink$>

WordPressは、<?php the_permalink(); ?> 

Livedoorブログは <$ArticlePermalink$> 

とブログサービスによって個別記事の指定が異なっている。

 

■ 気になるのがこのメッセージ 

         ↓

Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.

あなたのページにJavaScript SDK を一度装入してください。理想的なのは<body>タグの最初の右

つまり、JavaScript SDKを実装しなければはじまらないのか…面倒くさそうだからiFrameやURLでと思っても、選択できなかった…。HTML5で行くぞ!

JavaScript SDK
https://developers.facebook.com/docs/reference/javascript/

むむむ、

 Replace YOUR_APP_ID with your App ID from the App Dashboard, and WWW.YOUR_DOMAIN.COM with the path to your Channel File.

なんだこのwww.your domain.com/Channel.htmlは???
ブログシステムなので、ドメイン直下にそんなChannel.htmlって勝手につくれない(泣)

https://developers.facebook.com/docs/javascript/gettingstarted/#channel
を見ると、Channel.htmlは、このスクリプトを記述するだけらしい。
<script src="//connect.facebook.net/en_US/all.js"></script>

とりあえず、わかるところまでやってみてあとでfixするとしよう。

3.ソースコードを貼り付ける

typepad.comの設定画面はこれだけ…

 

新しくインデックステンプレートを作成で、channel.htmlを作り、
http://knn.typepad.com/knn/channel.html にできている事を確認。
Javascript SDKに記述し、main index template のindex.html の
の下に装入…。

 

だけれども表示されない…あらら…なんで?

 

 

以下サイトを参考にさせていただき実践しました!

http://blog.livedoor.jp/mintoa/archives/5177692.html

http://wayohoo.com/facebook/beginners/comments.html&nbsp;

http://snowadays.jp/2013/08/1870

facebookのApp登録

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

facebookのComments Box

https://developers.facebook.com/docs/reference/plugins/comments/

facebookのソーシャルプラグイン 
いろいろありますね。

https://developers.facebook.com/docs/plugins/

しかし、うまくいかない…。

ボクが使っているのは、Typepad.com なのでMT用のパーマリンクの設定の

<$mt:EntryPermalink$>” に書き換えたのですが、ご覧のように、パーマリンクが機能していない状態。

 

もうちょっと、いろいろ試してみますね。

この記事に関連する記事

Category: program, wordpress
  • 0
  • 305
Toshiaki Kanda