How to Add Facebook Mobile Comment Box to your Blogger 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.
To get started, I recommend you enable Custom Blogger mobile template.
If you don't know how to do that,
> Sign in to your blogger Blog Dashboard,
> Go to "Template".
> Click the icon under "Mobile".
> Select "Yes. Show mobile template on mobile devices".
> Then, Select "Custom" from the drop down box
> Now, SAVE.
Now, you have enable custom mobile template for your blog. So lets continue...
7. Carefully replace the highlighted appID with the Facebook app ID of your blog you have
8. Click "Encode"
Go back to the browser tab where you have your blog HTML
9. Copy and Paste the encoded script directly below the <div id='fb-root'/>
10. Now, your HTML should look similar to the screenshot below:
13. Carefully find the ending </div> as seen in the screenshot below:
14. Directly below it, copy and paste the code below:
15. 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.
IMPORTANT NOTE:
When editing your template be care inputing the codes, and make sure you are puting it on the right place as directed.
You might not find in your template if you are using a third-party template.
If you don't know how to do that,
> Sign in to your blogger Blog Dashboard,
> Go to "Template".
> Click the icon under "Mobile".
> Select "Yes. Show mobile template on mobile devices".
> Then, Select "Custom" from the drop down box
> Now, SAVE.
Now, you have enable custom mobile template for your blog. So lets continue...
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 HERE. 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
1. log in to your Blogger dashboard,
2. back up your template and go to "Template" > "Edit HTML"
3. Click inside the HTML Code and use CTRL + F to find : <body
4. Directly below it, paste <div id='fb-root'/>
5. Open a new tab on your browser and go to www.freehtmlparser.blogspot.com
6. 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>
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>
8. Click "Encode"
Go back to the browser tab where you have your blog HTML
9. Copy and Paste the encoded script directly below the <div id='fb-root'/>
10. Now, your HTML should look similar to the screenshot below:
11. Click "Save Template"
12. Click inside the HTML and use CTRL + F to find :
<b:if cond='data:top.showMobileShare'>
13. Carefully find the ending </div> as seen in the screenshot below:
14. 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>
<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>
15. 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.
IMPORTANT NOTE:
When editing your template be care inputing the codes, and make sure you are puting it on the right place as directed.
You might not find in your template if you are using a third-party template.
Woow..What an Awesome postit is..!! This is really helpful for me. You made my day. I just loved this article. You helped me a lot so I just wanna say so much thanks to you.
ReplyDeleteVery very useful post. Thanks.
ReplyDeletewow thanks for the tip... I'm using the blogger default template (Awesome Inc) I have to set the Attribution widget to "false" to enable me to remove the powered by blogger on the destop template.. from the code you gave above, i noticed that when I replaced with it works fine on the mobile template by removing the powered by blogger, but this line(...widget id='Attribution1' locked='true'...) calls back the already removed attribution widget from the desktop template and place it at my left sidebar. so the issue I'm having now is that when i try to remove the mobile attribution the desktop attribution shows and when i remove the desktop attribution widget the mobile attribution widget shows up... Please help me if you have any suggestion to fix this.. I want it in such a way that both in my mobile and desktop views there will be no powered by blogger. thanks once again
ReplyDeleteWould you be able to review the last time you were holding your cell phone? Obviously, you can! It was possible a couple of moments prior. All things considered, odds are great you're holding your cell phone right now to peruse this article. Mobile
ReplyDeleteMiles Raney
ReplyDeleteStay updated with the latest News ,Events , Politics, Features, sport, Cinema, Entertainment, Art, Culture with T News .
Thanks for providing information about Mobile App. If I say this blog is one of the best i had read in past.
ReplyDeleteLooking for Mobile App Development Company in India so just click on it now.
noman
ReplyDeleteGreat CPanel Migration
ReplyDeletereally helpful also check Develope E-Commerce Store
ReplyDelete