Интеграция ASP.NET MVC 3 приложений с Facebook OAuth API. Часть 2: Кнопка Like

Сейчас на очень многих сайтах есть кнопка Like от Facebook. Если её нажать, то у пользователя на странице будет сообщение, что ему нравится данная страница. Это видят его друзья и они могут пройти по этой ссылке и попасть на ваш сайт. Неплохое продвижение сайта, не так ли?

Сейчас посмотрим, как поместить такую кнопку на ваш сайт.



Есть 2 способа разместить кнопку «Like» на вашем сайте.
Самый простой способ — использовать iframe.

Copy Source | Copy HTML

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

Результат:


Второй способ — Facebook C# SDK.
Можно перейти на сайт и быстро сгенерировать кнопку.


Есть 3 вида кнопок:

1) standard: отображает текст справа от кнопки и профильные фотографии друзей ниже кнопки. Минимальная ширина: 225 пикселей. Стандартная ширина: 450 пикселей. Высота: 35 пикселей (без фото) или 80 пикселей (с фото).


2) button_count: отображает общее число «лайков» справа от кнопки. Минимальная ширина: 90 пикселей. Стандартная ширина: 90 пикселей. Высота: 20 пикселей.


3) box_count: отображает общее число «лайков» сверху кнопки. Минимальная ширина: 55 пикселей. Стандартная ширина: 55 пикселей. Высота: 65 пикселей.


Также есть возможность убрать кнопку Send, изменить шрифт, цветовую схему и т.д.

Код полученной кнопки:

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>

Помещаем этот код на страницу. Далее необходимо подгрузить Facebook C# SDK:

Copy Source | Copy HTML

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

И инициализировать его:

Copy Source | Copy HTML

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

Следует отметить, что кнопка «Like» не требует указывать App Id. Если вам это требуется, то нужно добавить одну строку:

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>

Когда пользователь нажал «Like» на какой-либо странице, в его профиле появится запись следующего вида:


Для того, чтобы описать, как будет выглядеть эта запись, используются meta-теги. Они описываются в разделе и выглядят следующим образом:

Copy Source | Copy HTML

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

Требуются следующие 6 свойств:

• og:title — Название страницы
• og:type — Тип страницы. Вы должны выбрать тип из списка типов Open Graph
• og:image — Ссылка на изображение.
• og:url — Постоянная ссылка на страницу.
• og:site_name — Название сайта.
• fb:admins или fb:app_id — Список Facebook Id (айдишник страницы на фейсбуке) администраторов страницы или App Id, разделенные запятыми.

Если на странице нет этих meta-тегов, то Facebook сформирует запись исходя из содержания страницы.

В итоге получилась такая страница: