Integration of ASP.NET MVC 3 applications with Facebook OAuth API. Part 2: Like Button

Now on many sites there is a Like button from Facebook. If you click it, then the user on the page will have a message that he likes this page. His friends see this and they can follow this link and get to your site. Not a bad site promotion, is it?



Now let's see how to put such a button on your website.





')

There are 2 ways to put a “Like” button on your site.

The easiest way is to use an iframe.

Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >

1. Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >
2. Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >
3. Copy Source | Copy HTML < iframe src ="http://www.facebook.com/plugins/like.php?href=http://microgeek.ru/blogs/gavruk/1454/" scrolling ="no" frameborder ="0" style ="border:none; width:450px; height:80px">< iframe >

Result:





The second way is the Facebook C # SDK.

You can go to the site and quickly generate a button.





There are 3 types of buttons:



1) standard : displays the text to the right of the button and profile photos of friends below the button. Minimum width: 225 pixels. Standard width: 450 pixels. Height: 35 pixels (no photo) or 80 pixels (with photo).





2) button_count : displays the total number of likes to the right of the button. Minimum width: 90 pixels. Standard width: 90 pixels. Height: 20 pixels.





3) box_count : displays the total number of likes at the top of the button. Minimum width: 55 pixels. Standard width: 55 pixels. Height: 65 pixels.





It is also possible to remove the Send button, change the font, color scheme, etc.



The code of the received button:

Copy Source | Copy HTML

1. < fb: like href = "http://microgeek.ru/blogs/gavruk/1453/"
2. send = "true" width = "450" show_faces = "true"
3. font = "arial"> </ fb: like >

Put this code on the page. Next you need to upload the Facebook C # SDK:

Copy Source | Copy HTML

1. < script src = "http://connect.facebook.net/en_US/all.js" > </ script >

And initialize it:

Copy Source | Copy HTML

1. < script >
2. FB.init ({
3. status: true
4. cookie: true
5. xfbml: true
6. });
7. </ script >

It should be noted that the “Like” button does not require you to specify App Id. If you need it, you need to add one line:

Copy Source | Copy HTML

1. < script >
2. FB.init ({
3. appId: 'YOUR_APP_ID'
4. status: true
5. cookie: true
6. xfbml: true
7. });
8. </ script >

When the user clicked “Like” on any page, the following entry will appear in his profile:





To describe how this entry will look like, meta-tags are used. They are described in the section and are as follows:

Copy Source | Copy HTML

1. < meta property = "og: tag name" content = "tag value" />

The following 6 properties are required:

• og: title - Page title
• og: type - page type. You must select a type from the Open Graph type list.
• og: image - Image link.
• og: url - Permalink to the page.
• og: site_name - Site name.
• fb: admins or fb: app_id - Facebook Id list (Facebook's Facebook page) of the page administrators or App Id, separated by commas.

If the page does not have these meta-tags, then Facebook will form an entry based on the page content.



The result was this page: