FaceBook Like button integration with your aspx page

Posted: January 27, 2011 in ASP.Net
Tags: , ,

FaceBook users might have noticed the Like button which allows you to connect web pages & share them on Facebook.User logged into Facebook will see the profile pictures of friends who like the page & the number of “likes” for that particular page.

I have seen this integration of web pages with FB & have wondered how it works & made me take a deep dive into the ViewSource of one page & I figuered out the logic behind that

It’s very simple,the Like button can be added as a iframe to your aspx page.

<div align="center">
<iframe src=
"http://www.facebook.com/plugins/likebox.php?id=66386416740&amp;width=370&amp;connections=12&amp;stream=false&amp;header=true&amp;height=300" 
scrolling="no" frameborder="0" style="background:#FFF; border:none; overflow:hidden; width:370px; height:300px;">
</iframe>
</div>

What matters is,the id which you see here “66386416740”. If you change it accordingly to your FaceBookPage,then you are done 🙂 Now,if you are curious how I figured out the id for the example page,it’s simple login to FB,Search for the page,from browser choose View Source,look for this below tag & get the id

<link rel="alternate" 
media="handheld" href="http://www.facebook.com/pages/The-Code-Project-wwwcodeprojectcom/66386416740" 
/>

You can read about iframe code & different parameters here:

http://developers.facebook.com/docs/reference/plugins/like

Hope you enjoyed the post.Try integrating your sample aspx with your favourite FB page & let me know how it went 🙂

Advertisements
Comments
  1. Vicky Mehta says:

    More info u can find here…https://graph.facebook.com/66386416740

    {
    “id”: “66386416740”,
    “name”: “The Code Project (www.codeproject.com)”,
    “picture”: “http://profile.ak.fbcdn.net/hprofile-ak-snc4/50259_66386416740_3235358_s.jpg”,
    “link”: “https://www.facebook.com/codeproject”,
    “likes”: 387,
    “category”: “Computers/internet”,
    “is_published”: true,
    “website”: “www.codeproject.com”,
    “username”: “codeproject”,
    “company_overview”: “The Code Project is a great source for code, answers, articles, and community — all for professional developers. “,
    “talking_about_count”: 9
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s