Tuesday, October 11, 2011
How to change Mash 2 blogger template for adding DISCUSS and Facebook comment widget
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><![CDATA[ in your template.
3 Responses to “How to change Mash 2 blogger template for adding DISCUSS and Facebook comment widget”
February 23, 2012 at 3:54 AM
Great post! ;)
March 15, 2012 at 9:17 PM
i am not able to remove that list style word from the disqus code. whenever i open the gadget box from Google it does not show the html code. it only shows the word disqus there. from where can i access the code.
March 17, 2012 at 6:01 PM
You can go to "Design" tab then "Edit HTML" and check "
Expand Widget Templates". You can modify the template there.
Post a Comment
Feel free to post some comments here!