How to Add Facebook Like and Facebook Comments

Topics: ASP.NET 2.0
Apr 4, 2011 at 4:59 PM
Edited Apr 4, 2011 at 5:02 PM

On your facebook account, create an app. It can be just an app for your blog. It's not a real app. You will need the app ID number.

In your blog files, edit the file under themes standard called site.master

Add the following facebook code at the top above the head tag:

 

	<div id="fb-root"></div>
	<script>
  window.fbAsyncInit = function() {
    FB.init({appId: '797979797979743', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

 

Use your App number: I just put in 797979797979743 as an example.

 

Now that will import the facebook library into all your pages. You you can now add the Like and Comment stuff whereever you'd like.

You can create a little textbox on the front page with all your social bookmarks.

 

Add the following at the top to add the facebook Like function: (this will show faces and be 189 pixels wide)

 

 <fb:like></fb:like>

 

Or this if you wanted it to not show faces: (and change the width)

 

<fb:like show_faces="false" width="180"></fb:like>


 

You can also add the comment section to the bottom of each post by adding the following to the post.aspx file in the root directory: (I have it listed below under the line and area I liked it in)

 

  <blog:RelatedPosts runat="server" ID="related" MaxResults="3" ShowDescription="true" DescriptionMaxLength="100" Visible="false" />

<h2>You can also leave comments using your Facebook account</h2></br>
   <fb:comments></fb:comments><br />

 

The Facebook comments stuff really begins with the line that starts with H2, but I included the line above it so you can see a nice place to place it.

 

If you want to see a live working example of all these modifications:

http://blog.thealo.com

It took me a while to figure all this out, plus I do a lot of facebook and twitter coding and integration! I thought this would be beneficial to everyone! 

Enjoy!