How To Delete/Moderate Comments in Facebook Comments Box?

By default comments are organized by social ranking which means that only those user comments' will be displayed at top who has good reputation on Facebook.

If you want the newest comments to be displayed at top and oldest at bottom then choose Reverse Chronological

I just hope this little info helps most of you. I will introduce Facebook comment count very soon. So keep in touch and [a href="http://feedburner.google.com/fb/a/mailverify?uri=TntByStc&loc=en_US" rel="nofollow" target="_blank"]subscribe now[/a] so that you may not miss any update as we update the blog several times per day.

Source: http://www.mybloggertricks.com/2011/08/how-to-deletemoderate-comments-in.html

Create Custom Facebook Tab With Custom Icon (1)

To read part 2 then click this link "[a href="http://www.blogger.com/"]Design Welcome Page For your Facebook Fan Page[/a]"

---

This is part one of our tutorial series on "How to create a [a href="http://www.mybloggertricks.com/2011/07/create-design-custom-tabs-on-facebook.html" target="_blank"]Welcome WebPage[/a] on Facebook". To add branded look to your Fan Pages you need a custom tab so that you could then design the tab to blend your website theme. A tab is basically a link that will appear under the wall and info tabs. On clicking the tab your visitors or fans will be able to see the content inside that tab page.

[a name='more'][/a]



[a href="https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" rel="nofollow" target="_blank"]Live Demo[/a]

Follow these easy steps,

1. Set Up New Facebook Tab App

Kindly Visit [a href="http://www.facebook.com/developers/apps.php" rel="nofollow" target="_blank"]Facebook Apps Page[/a] and then click the + Set Up New App button.

Set the App Name with either your website name or blog name. You can give any name you want and you can change it later too.

Click the the Create App button and enter some security code to proceed further.

2. Configure your Tab App Settings

In the About section, click the "Change you icon" link to upload a 16px by 16px Icon for your tab. My advise is that you upload your website logo like I have done,

Before you save your changes, click the Facebook Integration tab. On the Facebook Integration settings page fill up the blanks using the information below. Make sure you note down your Application ID as shown in the screenshot below,

Canvas Page - It is optional. Just write your blog name here.

In each process below, replace YOURAPPLICATIONID with your Application ID

Canvas URL - Enter http://YOURAPPLICATIONID.iframehost.com/

Secure Canvas URL - Enter https://YOURAPPLICATIONID.iframehost.com/

Tab URL - Enter http://YOURAPPLICATIONID.iframehost.com/tab

Secure Tab URL - Enter https://YOURAPPLICATIONID.iframehost.com/tab

IFrame Size - Choose Auto-resize

Click the Save Changes button. Congratulations you just created a tab successfully! Now just few more steps.

3. Add your Custom Tab App to your Fan/Like Page

Copy your API key and App Secret code and keep them safe in a notepad as we will be needing them later. Now click the Application Profile Page link.

Next click the Add to My Page link to install the page tab

Finally select the page you would like to install the tab on.

4. Visit Your Facebook Custom Tab Page

You will now find the custom tab appearing under the wall and info tabs. Click your Tab. When you visit the tab page for the first time, you will be asked to enter your API Key and APP Secret. Simply fill up the blanks with the App number codes you saved  in a notepad.

5. You are now Ready To Design your Welcome Page!

After completing a normal formality, you will now see [a href="http://woobox.com/" target="_blank"]Woobox's[/a] beautiful WYSIWYG Editor just like your Blogger Editor, where you can create amazing designs using your imagination. This is the end of tutorial part -1. On my next tutorial I will be sharing how can you design the Welcome landing page with CSS, HTML and JavaScript. Make sure you don't miss any part by subscribing to our [a href="http://feedburner.google.com/fb/a/mailverify?uri=tntbystc" rel="nofollow" target="_blank"]free email updates[/a]. The fun is yet to begin! Peace out. :d

PS: Keep all settings default.

Source: http://www.mybloggertricks.com/2011/07/create-custom-facebook-tab-with-custom.html

7 Advantages Of Using Facebook Comments Box

3- Receive New Blog Comments Notification on Facebook

Whenever a comment is left on any of your posts you will be notified via Facebook Notification system. Same is true when a comment is liked or responded by another visitor or reader. The readers are also notified of replies made on their comments at your blog.

 

4- Threaded Comments

Your readers no more need to feel neglected because you no more need to reply them all at once. Rather you can pay them proper attention by replying to each reader under their comments. This way a comment thread is set up which further makes the conversation more useful and fun!

4- Comment With Profiles - No Anonymous Comments

You can now happily turn off the "Anonymous" comment option by going to Blogger > Settings > Comments . The users as I said can use any of their ID to leave a comment so you really no need to worry about who is commenting!

5- No Spam Comments Possible Now

You will get more relevant comments with no spam as users will have to use their personal IDs to leave a comment and spam robots are surely incapable of doing that.

6- Delete Comments Easily Without Leaving Window

In Blogger comment form to delete a comment you need to click the trash icon and the you are taken to a separate window where you select the option of deleting the comment permanently. But With FB comment box you Delete comments just the way you delete comments on your FB profile. With a click of a mouse!

7- All links are by default no follow

The links left on your comment box are by default tagged as nofollow and according to the FB developers search engine robots can not crawl the content of your comments as the plugin is enclosed inside a iframe where robots can not enter to crawl data. This way the quality of your content in the eyes of search engines will increase because the robots will have to crawl only the body of your posts and not the distracting comments.

What do you think now?

I shared the advantages above and tried to put forward the best advantages this widget could offer to bloggers including me. I just hope this widget could help you further increase your blog traffic and enjoy blogging even more. Have fun. :)

Source: http://www.mybloggertricks.com/2011/06/10-advantages-of-using-facebook.html

Add Facebook Comments Box To Blogger Blogs - New!

Note: If you wish to completely hide the blogger comments form then read [a href="http://www.mybloggertricks.com/2011/06/facebook-comments-box-instead-of.html" target="_blank"]Replace Blogger comments form With Facebook[/a]

---

In 2009 [a href="http://developers.facebook.com/blog/post/198" target="_blank"]Facebook developers[/a] introduced their best social plugin called "Facebook Comments Box". This plugin can be embedded in any website or blog and visitors can use their IDs of Facebook, Yahoo, AOL or Hotmail to leave a comment at your site. This plugin did show a lot of problems when it was embedded in Blogger Blogs in initial days of its development but now thanks to our fellow friend Max from [a href="http://allblogtools.com/" target="_blank"]Allblogtools[/a] this plugin has been finally bloggerized to work just perfect with any Blogger hosted blogs. I have edited Max's coding in some areas and have mentioned some more interesting options that will help you use the Facebook comments box in parallel to your old [a href="http://www.mybloggertricks.com/2009/12/customize-blogger-comment-form-make-it.html" target="_blank"]Blogger Comment form[/a] so that you may loose no previous comments and provide users with multiple options of commenting from different platforms.

[a href="http://facebook-comments-box.blogspot.com/2011/06/add-facebook-comments-box-to-blogger-in.html" target="_blank"]Live Demo[/a]

This is how the Facebook Comments box looks like,

LIGHT SCHEME

DARK SCHEME

Interesting? Lets now learn how to embed this extremely useful comment form in Blogspot blogs. Kindly follow the simple steps below,

1- Get a Facebook Application ID

1. Go To [a href="http://developers.facebook.com/setup/" target="_blank"]Facebook Developers Page[/a]


2. Submit your blog URL and give it a name. Keep Site name as your "Blog Title" and Site URL as your "blog address"

     3.   Hit "create app" button and proceed

     4.   After submitting the security check code you will see this page,



       5.   Save that App ID in a notepad because we will need that latter. Now Click the link near the top-right corner of the same page that says "Developer Dashboard"



      6.  One the new window that appears click the Edit Settings link ,



        7.  Then go to Website option and write your Site Domain as blogspot



       8.  Save Changes and jump to the next step of this tutorial

2- Adding the Facebook comments Box to Blogger

Now its time to do embed the comments box in your blog templates. So follow these easy steps,

PS: Please make sure your blogger comment form is embedded below posts. For doing this first go to Blogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.

1. Go To Blogger > Design > Edit HTML


2. Backup your template


3. Check the "Expand Widget Templates" box


4. Search for <html and just after it give a space and add this code,

xmlns:fb='http://www.facebook.com/2008/fbml'

  5.  Next search for 

<body>

Note: In New Blogger Designed templates the same code looks like this,

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Find any one of these codes and just after it paste the code given below,

<div id='fb-root'/>

<script>


    window.fbAsyncInit = function() {


    FB.init({


      appId  : &#39;YOUR_APP_ID&#39;,


      status : true, // check login status


        cookie : true, // enable cookies to allow the server to access the   session


      xfbml  : true  // parse XFBML


    });


  };

    (function() {

    var e = document.createElement(&#39;script&#39;);


      e.src = document.location.protocol +   &#39;//connect.facebook.net/en_US/all.js&#39;;


    e.async = true;


      document.getElementById(&#39;fb-root&#39;).appendChild(e);


    }());


</script>

• Replace YOUR_APP_ID with your Facebook application ID that you saved in a notepad.

    6.    Next search for  </head> and just above it paste the following code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>

<meta expr:content='data:blog.url' property='og:url'/>


<meta content='MY Blogger Tricks' property='og:site_name'/>


<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>


<meta content='YOUR_APP_ID ' property='fb:app_id'/>


<meta content='http://www.facebook.com/mybloggertricks' property='fb:admins'/>


<meta content='article' property='og:type'/>

Make these changes:

• Replace MY Blogger Tricks with your blog title/Name.


• Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size ->  40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,

• Replace YOUR_APP_ID  with the your Facebook Application ID that you saved in notepad


• Replace http://www.facebook.com/mybloggertricks with your Facebook user profile link

    7.    Now Search for this,

<b:includable id='comment-form' var='post'>

    8.    Just after it paste the code given below,

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>


<div> <fb:comments  colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div>


<div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>


</b:if>

• If you want to use the dark scheme then simply replace light with dark


• To change the Comments box size, change this value width='520'


• To change the footer credits size, change this value width:510px


• Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px

      9. Save your template and Bingo you are Done! See your blogs to find a beautiful comment box waiting to be touched. =)

Respect Copyright

This plugin contains credits to allblogtools and MBT blog for the efforts put by us in facilitating blogger users with this great commenting plugin. We therefore request you to please do not remove the footer credits. The credits are attached to the plugin in a design style that it perfectly blends the colour themes of Facebook Comments Box. We only need this favour in return.

Need More Fun?

If you want to further play with codes and wish to give a Facebook style (i.e font colours, background colors, background image) to your old blogger comments form then read the post below,

• [a href="http://www.mybloggertricks.com/2009/12/customize-blogger-comment-form-make-it.html" target="_blank"]Customize Blogger Comment Form![/a]

Troubleshooting

If you faced any problem then kindly do not hesitate to let me know. It would be a pleasure to be at your service. I will write more tutorials on this topic this week so that you may get all the latest updates. I hope this plugin proves useful to most of you and it may bless your blogs with even more organic traffic. Peace! :>

Source: http://www.mybloggertricks.com/2011/06/add-facebook-comments-box-to-blogger.html