Pages

5/09/2012

Using Facebook's Like Box and Comment Box in Blogger

Features:

1. Users can comment on each blog post
2. Comment box is configurable
3. Users can use their own authentication, e.g. Facebook, Yahoo, Hotmail.
4. Notify to the blog owner's Facebook account

Steps:

1. First, you need a Facebook account. (Obviously.)
2. Go to https://developers.facebook.com to create a new Facebook application (app)
3. From the FB-app page you just created, grab the Facebook application ID (app-id). We will use this app-id later.
4. Go to your blogger account, go to "Template" and "edit HTML". If a warning message pops up, hit "Proceed".
  After you finish step 4., it will show the source code of the main page (just the theme).
In this level of detail, we can edit the main website's HTML and get the main website's URL (in this case, http://blog.anidear.com), but not be able to edit nor get URL of each blog post (I mean, for example, http://blog.anidear.com/2012/05/disable-recent-files-in-unity-in-ubuntu.html)

Why I need the URL of each blog post?
  I am planing for every Facebook comment box to associate with its own blog post, and it must be automated.
  I want the system that when I post a new blog post, the new comment box is generated, and automatically associated with the new blog post immediately. So, I need to dig deeper into code of template of a blog post, not just the theme for main page.

5. To see more detail, check on "Expand Widget Templates" box. It will immediately expand viewing source code. Now we can see and edit template of each blog post.

6. Put these 2 lines of code in between tag <head> .... </head>

    <meta content='YOUR_ADMIN_FB_ID' property='fb:admins'/>
    <meta content='YOUR_APP_ID' property='fb:app_id'/>

The first line is to enable "Moderator" feature of the comment boxes. This moderator can get notified when a new comment posted, and be able to approve the comment (if set to wait for approval).
You need to replace YOUR_ADMIN_FB_ID with your Facebook ID (e.g. 123456789) or the person you want him/her to be the moderator of the comment boxes.
If you want multiple admins, just put their Facebook ID together, separating by colon and no space.

The second line is to associate the comment boxes with the Facebook app we just created in step 2.
You need to replace YOUR_APP_ID with the app-id.

I did this by filling BOTH with my app-id. This will grant the app (not the moderators yet) to be able to moderate the comments, and the privilege is then passed through all admins of the app. This is more convenient if I need to add more moderators in the future, I can just add them to the app via Facebook app setting page. No need to touch this code any further.

7. Next, find the blog post template.
Here is a little summary of the source code:

<b:includable id='post' var='post'>
  <div class='post hentry'>
   .... BLOG POST CONTENT HERE....
      <div class='post-footer'>
          <div class='post-footer-line .....'>
             ... FOOTER, such as: post-author, post-timestamp, pencil button(for edit) ...
          </div>
          <div class='post-footer-line .....'>
             .....
          </div>
                   <<<<<------ THIS IS THE POINT TO INSERT FACEBOOK CODE!
      </div>
   </div>
</b:includable>

At that point, which is the end of each post, I want to put both Facebook's "Like box" and "Comment box" in it. So I insert this code:

<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:like action='recommend' expr:href='data:post.url' font='' migrated='1' send='false' show_faces='true' width='500'/>
<fb:comments expr:href='data:post.url' migrated='1' num_posts='3' width='500'/>

It'll now look like this:

Important term here is data:post.url This will access to Blogger's variable of the URL of the blog post the script resides. In this way, we can create a new "Like box" and "Comment box" along with the new blog post, without getting any conflict with the old ones.

Another significant term, migrated='1' is used for notification. It will notify back to the admins whenever someone posted the comment. (I tried the Like box and it doesn't work, but it doesn't hurt either. So, I put it in anyway)

For customization of the boxes:  

   see https://developers.facebook.com/docs/reference/plugins/like/ and https://developers.facebook.com/docs/reference/plugins/comments/ for "Like box" and "Comment box" generator.
   Do not forget to put "migrate='1'" into "Comment box" tag if you want it to notify you.

Final Result: 

   It will look like this.

  When someone comments it, the notification will come like this.

  And to moderate the comments, you have two options.
     1) moderate from the blog post, with moderator tab in "Comment box"

    2) use a tool from Facebook, called "Comment Moderation Tool"

Last Step.... sit back and relax ;)

References:

 - https://developers.facebook.com/blog/post/472/
 -  https://developers.facebook.com/docs/reference/plugins/like/
 - https://developers.facebook.com/docs/reference/plugins/comments/
 - https://developers.facebook.com/tools/comments

5 comments:

  1. Bad day ! Got a full five minute of scolding for first time in college. My state was: head down, shivering legs & rest imagine yourself. I am looking for some MCA Project details and abstract lists can some one send me the list of documents?

    ReplyDelete
  2. Your article is too much effective specially for me. I was searching about it. Now my problem is solved. Thanks for sharing your valuable experience.

    ReplyDelete
  3. its a fantastic article. your blog also fantastic. i have learnt a lot after visiting your blog. thanks for sharing such kinds of article.

    ReplyDelete
  4. I am really thankful to you for your informative article, I was searching about it. Now my problem will be solved. Thanks for sharing your valuable experience. It's really helpful for me. Hope you will continue and we see will many more informative article. Wish you all the best.

    ReplyDelete