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:

How to change Mash 2 blogger template for adding DISCUSS and Facebook comment widget display error

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.

How to change Mash 2 blogger template for adding DISCUSS and Facebook comment widget

 

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.

How to change Mash 2 blogger template for adding DISCUSS and Facebook comment widget AppID

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”

Tech News 24h said...
February 23, 2012 at 3:54 AM

Great post! ;)


ipladmin said...
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.


ToanInfo said...
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!