Pull to refresh

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

.NET
Сейчас на очень многих сайтах есть кнопка 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>

Результат:
image

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

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

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

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

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

Также есть возможность убрать кнопку 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» на какой-либо странице, в его профиле появится запись следующего вида:
image

Для того, чтобы описать, как будет выглядеть эта запись, используются 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 сформирует запись исходя из содержания страницы.

В итоге получилась такая страница:
image
Tags:C.netfacebookoauth
Hubs: .NET
Total votes 12: ↑9 and ↓3 +6
Views1.7K

Popular right now

.Net разработчик
from 150,000 ₽ArtezioСанкт-Петербург
.Net разработчик
from 150,000 ₽ArtezioСаратов
.Net разработчик
from 180,000 to 220,000 ₽CHIBBIS.RURemote job
Senior/Middle+ .Net разработчик
from 3,000 $ArtezioМогилев
C# .net Developer
from 90,000 to 180,000 ₽АЛМАЗМоскваRemote job