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.
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
==> 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 :
==> Carefully find the ending </div> as seen in the screenshot below:
==> Directly below it, copy and paste the code below:
--> 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.
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.
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.
ReplyDeleteLol..maintaining anonymous status is allowed :) Glad you find it helpful. Have fun!
DeleteThumbs up Oga Jide. You are the best.
ReplyDeleteSo 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?
You might not find the code in some templates that are not blogger default templates.
Deletenice
ReplyDeleteThanks Timi
DeleteNice write up, will implement it soon.
ReplyDeleteImplement it and let me know what's up
DeleteThe blog name is OGBONGE and for once, it has never failed to live up to expectations. Continue the good work, Jide.
ReplyDeleteI will by God's grace. Thanks
Deletehi 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
ReplyDeleteEnsure 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.
Deletesame problem wif oluferry.....www.frabidel.com
ReplyDeleteWonderful 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.
ReplyDeletewww.nairawriter.com.
Waooo thanks bro, it worked bro so how can i do it to work on web version?
ReplyDeleteMy 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
ReplyDeletewww.naijarebrander.blogspot.com
it is not working on my mobile site http://www.dechampions.net/?m=1 wat can i do
ReplyDeletebro its not working for my page at all.
ReplyDeletewhat can i do. am using a 3rd party template
Thank you very much!
ReplyDeletedidnt show on mah blog @tycoach.blogspot.com
ReplyDeleteam also using a third party templates..please what should i do?
ReplyDeleteYou have to do alot of try n error in finding the right place to place the code. Easier when using default blogger template.
DeleteYour article is so much effective for me. i was searching it. now my problem is solved. thanks for sharing your valuable experience.
ReplyDeleteWonderful article. Thanks for sharing. Waiting for another one.
ReplyDelete9ce one bosss!
ReplyDeletefantastic post. thanks for sharing it.
ReplyDeleteYou're welcome
DeleteVery important article specially for me and should be followed practically.....
ReplyDeleteDude, I tried this but no showing on mobile device. Please suggest me what to do now- www.lakhaipur.com
ReplyDeletethank you. can you help me how to put comments under other widgets?
ReplyDeleteWill this facebook comment show below the related post gadget and will it also allow the normal comment box for blogger?
ReplyDeletethanks bro working fi
ReplyDeleteIf I install this system, the comments will appear on either the desktop version, the mobile?
ReplyDelete"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
ReplyDeleteThis post is interesting.I tried this tutorial in my blog and it worked for me.Thanks
ReplyDeleteThank you very much!!! Thank you!!!
ReplyDeletei have done everything perfectly but i still can't see comment box in mobile view.
ReplyDelete