Как добавить кнопку share на страницу Facebook

Как добавить кнопку share на страницу Facebook
16.09.2011 Алексей Малыгин

Facebook продолжает всячески подталкивать разработчиков, переходить от FBML к iFrame. Вот, например, раньше была возможность элементарно вставлять на страницах Facebook кнопку Share, что позволяло поклонникам страницы добавлять комментарии и размещать ссылку на понравившийся контент у себя на стене.

В FBML достаточно было написать тэг <fb:share-button>.

Сейчас мало того что FBML умер, так и кнопку share больше facebook не жалует. В документации разработчиков так и сказано, что facebook share продолжает работать в целях совместимости со старым кодом. Но тем не менее, продолжать использовать эту кнопку, нам никто не мешает.

В этом уроке мы рассмотрим, как использовать Facebook Javascript SDK и некоторые JQuery элементы, чтобы интегрировать старую функцию <fb:share-button> в iFrame приложение с последующим отображением на  странице Facebook.

Для тех, кто еще не знает, как создавать iFrame приложения, рекомендую почитать руководство по созданию iFrame-вкладок для страниц Facebook.

ПРИМЕЧАНИЕ: далее очень желательны базовые знания JavaScript

Я предполагаю, что у вас уже есть начальное представление о JavaScript, иначе бы вы не дошли до этого абзаца. :)

Шаг 1: Добавьте код для загрузки SDK Facebook JavaScript в главный индексный файл (HTML или PHP)

Начните с того, что добавьте в свой основной (index.php или index.html) файл некоторый код, который загружает Facebook JavaScript SDK:

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script><script type="text/javascript">// <![CDATA[ FB.init({ appId : 'YOUR APP ID', }); // ]]></script>

ПРИМЕЧАНИЕ: в качестве значения параметра AppId необходимо вставить Id приложения, предварительно созданного вами на странице facebook.com/developers.

ШАГ 2: Добавьте код для загрузки библиотеки JQuery

Далее, необходимо подключить библиотеку JQuery, представляющую собой JavaScript-библиотеку для облегчения многих задач. Вместо JQuery можно использовать и любые другие библиотеки, например MooTools, но это уже выходит за рамки данной статьи.

Будем загружать библиотеку удаленно, с ресурсов google, чтобы лишний раз ничего не скачивать.

 

 

 

Шаг 3: Используя возможности JQuery отобразим диалоговое окно Share

Теперь, когда Facebook JavaScript SDK и JQuery загружены, мы готовы вызвать всплывающее диалоговое окно кнопки Share. Воспользуемся возможностями JQuery плюс функции Facebook fb.ui. Вставьте этот код в свой файл:

<script type="text/javascript">// <![CDATA[ $(document).ready(function(){ $('#share_button').click(function(e){ e.preventDefault(); FB.ui( { method: 'feed', name: 'Весь Facebook', link: 'http://magdamagla.com', picture: 'http://путь к картинке', caption: 'Мне нравится этот блог!', description: 'Все о Facebook как для новичков так и продвинутых пользователей', message: '' }); }); }); // ]]></script>

Вы можете вставить несколько кнопок share на одной странице, но тогда следите, чтобы идентификаторы диалогов не повторялись (например, #share_button1, #share_button2).

При исполнении кода, должен появиться вот такой диалог:

диалог share facebook

Теперь настраиваем доступные параметры:

  • Name: Это текст, который является гиперссылкой, ведущей на страницу с кнопкой share;
  • Link: Собственно сам URL;
  • Picture: URL изображения, которое вы хотите видеть на стене рядом с заголовком и кратким описанием статьи. Используется изображение 70 х 70, но Facebook сжимает картинку сам до нужных ему размеров, так что в этом плане не морочьте себе голову.
  • Caption: Первая строка текста после Имени / Ссылки;
  • Description: Текст, который появляется под заголовком. Здесь рекомендуется писать такой текст, чтобы заинтересовать других пользователей, которые будет просматривать данный анонс в ленте новостей.
  • Message: Этот параметр позволяет предварительно заполнить окно сообщения в верхней части диалогового окна. Facebook, кстати, не рекомендует принудительно вставлять туда какой-либо текст, а давать возможность пользователям самим вводить то что нравится.

Шаг 4: Создадим ссылку / кнопку, чтобы вызвать диалоговое окно

Диалоговое окно, описанное выше, необходимо каким-то образом запустить. Для этого нам нужна какая-то кнопка или просто текстовая гиперссылка, не важно. Я взял стандартное изображение кнопки share в Facebook:

кнопка share

Просто вставляем код картинки в индексный файл и добавляем ID «share_button»

Когда пользователь нажимает на эту кнопку, то вызывается диалоговое окно share.

Как только пользователь заполняет свое сообщение и нажимает кнопку «Опубликовать», сообщение появится на его стене и может отобразиться в лентах новостей друзей (в зависимости от настроек).

опубликать пост на стену

Если есть вопросы — не стесняйтесь, пишите в комментариях ниже.

  • Guest

    good

  • Владимир

    Добрый день! У меня есть вопрос, может быть вы можете подсказать как програмно очищать кеш страницы для расшаривания…на сколько я понял при расшаривании страница заносится в кеш фэйсбука….но у меня такая проблема, что для авторизованного юзера должны быть одни данные для расшаривания , а для неавторизованного другие. Но проблема в том, что если пользователь зайдет вначале неавторизованный, то страница закешируется и при авторизации уже будут передаваться закешированные данные. Заранее спасибо