1/17/2015

How To Add Facebook Mobile Comment Form To Blogger / Blogspot Mobile View



If you've enabled custom Blogger mobile template, you can customize the mobile view of your blog as you desire. You can add and remove whatever you like in as much as you know how to go about it. Today, I have decided to share with you, how to add Facebook mobile comment form to Blogger or Blogspot mobile view.

facebook mobile comment box


To get started, I recommend you enable Custom Blogger mobile template. If you don't know how to do that, sign in to your blog, go to "Template". Click the icon under "Mobile". Select "Yes. Show mobile template on mobile devices". Select "Custom" from the drop down box and SAVE.

Next is to get your blog's Facebook APP ID handy. If you know the ID, copy it somewhere and if you've forgotten it, you can check the Facebook apps page. If you can't find it on the apps page, then you need to read how to get Facebook application ID for your blog here.

Next is to log in to your Blogger dashboard, back up your template and go to "Template" > "Edit HTML"

==> Click inside the HTML and use CTRL F to find : <body
==> Directly below it, paste <div id='fb-root'/>


==> Open a new tab on your browser and go to www.freehtmlparser.blogspot.com
==> Copy and paste the code below inside the box on the page

<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/en_US/sdk.js#xfbml=1&appId=1569785879914041&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

==> Carefully replace the highlighted appID with the Facebook app ID of your blog
==> Click "Encode"

==> Go back to the browser tab where you have your blog HTML

==> Copy and Paste the encoded script directly below the  <div id='fb-root'/>

==> Now, your HTML should look similar to the screenshot below:



==> Click "Save Template"

==> Click inside the HTML and use CTRL F to find :

<b:if cond='data:top.showMobileShare'>

==> Carefully find the ending </div> as seen in the screenshot below:





==> Directly below it, copy and paste the code below:

<p align='center'>
<span style='font-size: 15px;font-weight:bold;'>Facebook Comment Box </span>
</p>
<div style='text-align: center;'>
<fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' mobile='yes' numposts='10'/>
</div>

--> Click SAVE Template.

View one of your blog posts and the comment box should appear on the mobile view,  above the Blogger comment form.

Try this and let me know if it works for you. Also leave your comments if you've questions to ask.

Note: You might not find in your template if you are using a third-party template.



Share :


36 comments:

  1. Anonymous1/17/2015

    Ogbonge you Rock... Despite the fact that I'm an experience blogger, I find this tutorial so helpful. Thanks bro. Let me just maintain my anonymous status.

    ReplyDelete
    Replies
    1. Lol..maintaining anonymous status is allowed :) Glad you find it helpful. Have fun!

      Delete
  2. Thumbs up Oga Jide. You are the best.

    So happy I finally found this tutorial after an endless search online.

    Pls, what message were you passing in the note you dropped below the post? What might one not be able to find if he/she is using a third party template?

    ReplyDelete
    Replies
    1. You might not find the code in some templates that are not blogger default templates.

      Delete
  3. Nice write up, will implement it soon.

    ReplyDelete
    Replies
    1. Implement it and let me know what's up

      Delete
  4. The blog name is OGBONGE and for once, it has never failed to live up to expectations. Continue the good work, Jide.

    ReplyDelete
    Replies
    1. I will by God's grace. Thanks

      Delete
  5. hi thanks for the tutorial, but mine is nit showing at all, instead its showing " FACEBOOK COMMENT BOX" in words without a place or box to comment.. please help review this http://speak4us.blogsot.com

    ReplyDelete
    Replies
    1. Ensure you parse the facebook sdk at freehtmlparser.blogspot.com before pasting it. In your blog html and also ensure you didn't delete anything else while replacing the app id in the sample above.

      Delete
  6. same problem wif oluferry.....www.frabidel.com

    ReplyDelete
  7. Wonderful tutorial oga Jide. But I didn't use it on my blog. I even removed that of the PC version. Because I didn't see any blog using it. Those who did initially including ogbongeblog removed them afterwards. Any reason why? Plus I seem to be mobile restricted so can't generate the app ID.

    www.nairawriter.com.

    ReplyDelete
  8. Waooo thanks bro, it worked bro so how can i do it to work on web version?

    ReplyDelete
  9. My oga i still find it difficult to add facebook mobile comments on my blog. Please what else can i do cos it seems Facebook made adjustment on their web. naijarebrander@gmail.com


    www.naijarebrander.blogspot.com

    ReplyDelete
  10. it is not working on my mobile site http://www.dechampions.net/?m=1 wat can i do

    ReplyDelete
  11. bro its not working for my page at all.
    what can i do. am using a 3rd party template

    ReplyDelete
  12. didnt show on mah blog @tycoach.blogspot.com

    ReplyDelete
  13. am also using a third party templates..please what should i do?

    ReplyDelete
    Replies
    1. You have to do alot of try n error in finding the right place to place the code. Easier when using default blogger template.

      Delete
  14. Your article is so much effective for me. i was searching it. now my problem is solved. thanks for sharing your valuable experience.

    ReplyDelete
  15. Wonderful article. Thanks for sharing. Waiting for another one.

    ReplyDelete
  16. fantastic post. thanks for sharing it.

    ReplyDelete
  17. Very important article specially for me and should be followed practically.....

    ReplyDelete
  18. Dude, I tried this but no showing on mobile device. Please suggest me what to do now- www.lakhaipur.com

    ReplyDelete
  19. thank you. can you help me how to put comments under other widgets?

    ReplyDelete
  20. Will this facebook comment show below the related post gadget and will it also allow the normal comment box for blogger?

    ReplyDelete
  21. If I install this system, the comments will appear on either the desktop version, the mobile?

    ReplyDelete
  22. "Note: You might not find in your template if you are using a third-party template." so how are we to over come this because i am using a third party template

    ReplyDelete
  23. This post is interesting.I tried this tutorial in my blog and it worked for me.Thanks

    ReplyDelete
  24. Thank you very much!!! Thank you!!!

    ReplyDelete

We love to hear from you!

Sign in to comment "anonymously" without entering verification text.

Want to be notified when I reply your comment? Tick the "Notify Me" box.

If your comment is unrelated to this post, please drop it at my Facebook group here.

THANKS.

Designed by Jide Ogunsanya.