Tuesday, October 11, 2011
Last week, I changed my blogger blog to new Mash 2 template. This template looks very nice. However, I experienced some problems when tried to use DISCUSS comment system and Facebook comment widget with this template.
DISCUSS display error
Installing DISCUSS comment system to blogger is rather easy. We just need to go to DISCUSS website and add their widget into our blogger. However, when I added DISCUSS to Mash 2 template, it displayed as follow:
I tried to search information on Internet to solve this problem but no luck. Hence, I sent an email to ask for help to Ryan of DISCUSS. Fortunately, he sent me a feedback with a solution. All we need to do is to remove some “list-style” code in CSS. It works perfectly now! You only need to delete the first two ‘list-style’ in the following figure.
Facebook comment widget does not show in IE 9
I then added the new Facebook comment widget to my blog. The process is also rather easy. First, we need to go to https://developers.facebook.com/apps to create an app and get the app id.
Next, copy and paste this code right after <body> in your template:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
oauth : true, // enable OAuth 2.0
xfbml : true // parse XFBML
});
// Additional initialization code here
};
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
Make sure that you replace YOUR_APP_ID with your app id.
Finally, go to website http://developers.facebook.com/docs/reference/plugins/comments/
and put the code into your template wherever you want to display the comment form. After following all these steps, the comment form didn’t appear! To solve this problem, I deleted all codes related to the floating share-box of this template (this share-box contains scripts of facebook that conflict with the comment widget, I guess). After removing these codes, everything worked just fine in Firefox and Chrome but not in IE9. In IE9, the comment form didn’t appear. To solve that, I added
xmlns:fb='http://www.facebook.com/2008/fbml'
xmlns:og='http://ogp.me/ns#'
into the <html> tab.
Note that to moderate comments, you need to put 2 more lines:
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID}"/>
<meta property="fb:app_id" content="{YOUR_APPLICATION_ID}"/>
right before <b:skin><
(Photo credit: Konstantinos Kottinis)
Start a new blog:
- How do I create a blog that Blogger will host for free?
- How do I use a custom domain name on my blog?
- Where can I buy a custom domain name for my blog?
- How do I create a CNAME record for my custom domain?
- How do I buy a custom domain through Blogger?
- How can I protect my username and password?
- How to Make Blogger Blogs Mobile Phone Compatible
- How to Take Full Backup of Your Blogger Template
- How to Restore-Recover Deleted Blog in Blogger
- How To Move a Blog Between Blogger Accounts
- How To Recover Your Username and Password in Blogger
- HOW TO: Use Tweet Buttons as a Blogger or Site Owner
- How do I delete a blog at Blogger?
Customize your blog:
- How do I switch my template to another provided by Blogger?
- How do I add a poll to my blog?
- How can I use the Blogger Layouts features?
- How do I add a Blog List to my blog?
- How do I use the Blogger Reading List?
- How do I add Reactions to my blog?
- How do I switch my template to another provided by Blogger?
- Learn how to add an image to your blog's header
- How to Add Page Peel / Flip Effect in Blogger using JavaScript and CSS
- How to Add Drop Down Menu Widget in Blogger - Horizontal Menus (HTML+CSS)
- How to Add Vertical HTML+CSS Menu Widget in Blogger
- How to Add Popular Posts Widget With Thumbnail in Blogger
- How to Add Google SMS Channel Link as Gadget in Blogger
- How to Add Favicon to Blogger - Set Favicon in your Blogspot Blogs
- How to Add Popular Posts Widget With Thumbnail in Blogger
- How to Change Background Image of Your Blog in Blogger
- How to Replace "Followers" Title With an Image in Blogger
- How to Display Profile Images-Avatar in Blogger Comments
- How to Add Breadcrumbs in Blogger to Support Easy Page Navigation
- How to Add Signature Image at The End of Each Posts in Blogger
- How to Add Recent Comments Widget in Blogger
- How to Add Jump to Top / Back to Top in Blogger Footer
- How to create your own blogger template theme
- How to Use New Blogger Template (XML) in New Blogger
- How To Add Falling Hearts To Blogger And WordPress Blog
- How To Create and Add A Tag Cloud To Blogger Blog
- How To Place Photos Side By Side In Blogger
- How to change blogger template without deleting widgets
- How to hide remove Blogger Navbar
- How to make Bubble Effect for blogger image/icons
- How to Customize a Blogger Template
- How to Change your Blogger Title Tags
- How to Restore Lost Blogger Template Code
- How to show related posts in blogger blogs
- How to install new XML blogger templates
- How To Create Horizontal Tab Menu For Blogger Templates : Best And Simple Method
- How To List Recent Post Titles By Label
- How to limit the number of posts displayed in label pages
Publish entries:
- How do I make a link to another webpage?
- How do I edit what I've written?
- How can I make words bold or in italics?
- How long does it take for my post to be published online?
- How are line breaks treated?
- How do I change/delete a blog post on one of my archive pages?
- How do I automatically email a post after I've written it?
- How does Blogger Mobile work?
- How do I change the date or time of my post?
- How Blogger Autosaves Your Posts
- How do I use the transliteration feature?
- How do I import and export blogs on Blogger?
- How can I edit labels on multiple posts at once?
- How do I post a video to my blog?
- How do I post a video to my blog from YouTube?
- How do I post audio/music to my blog?
- How do I delete a photo I have uploaded to my blog?
- Blogger: how to provide label/tag feeds
- Blogger: how to upload MP3 files to play in blog posts
- How to remove author name from blogger posts
- How to syntax highlighting in Blogger
- How to use Evernote as a blogger
- How to display your latest Blogger post on another page
- How to upload and embed Flash SWF file into Google Blogger?
- Add Images To Blogger Blogs From Your Computer
- How to Include an RSS Feed in Blogs at Blogger.com / Blogspot.com
- How To : Add Facebook Like Button to Blogger Post
- New Blogger: How to make the permalink more prominent
- How to put Documents in Blogger Post
Monetization:
- How to put AdSense and Google Affiliate Network in your blog's sidebar
- How do I put AdSense on my blog (using a classic template)?
- How do I show ads between my posts?
- How do I remove my AdSense code?
- How do I put AdSense after my individual blog posts?
- How do I put AdSense on my blog (using Layouts)?
- How do I show ads between my posts?
- How to Add Advertise Here Banners in Blogger and Attract Advertisers
- How to Share Google Adsense Revenue in Blogger with Co-Authors
- How to Exclude Adsense Ads From Specific Posts in Blogger
- How to Add Google Analytics to Blogger
- How to Submit Your Site URL to All Major Search Engines Like Google, Yahoo, Bing Etc
- How to Verify Blogger in Google Webmaster Tools
Sharing:
- How do I create a team blog?
- How do I remove a team member?
- How do I control who can view my blog?
- How do I remove myself from a team blog?
- How do I enable comments on my blog?
- How do I leave comments on a blog?
- What are backlinks and how do I use them?
- How do I moderate comments on my blog?
- How do I change my site feed settings?
- Get Blogger Followers Via Promoting Your Blog
Increase blog traffic:
- See how to here 25 great advices for increasing your blog traffic
- and Tips on increasing website traffic
Others:
- How to Migrate your Blog from Blogger to WordPress
Wednesday, June 15, 2011 1