4 способа создать кнопку «Поделиться» (Facebook Share)


4 способа создать кнопку

Facebook больше года обещает убрать кнопку «Поделиться» из своего арсенала, но она до сих пор популярна, и знать как её сделать полезно. Я покажу примеры кодов, с помощью которых вы сможете добавить кнопку «Поделиться» на свои вкладки Приветствия фан-страниц, сайт или блог.

Принцип создания этой кнопки простой. Достаточно знать одну строчку кода или точнее знать ссылку:


https://www.facebook.com/sharer.php?u=http://bit.ly/FBshareArticle

Если вы вставите эту ссылку в адресную строку браузера или нажмёте на этот текст, то сможете поделиться страницей данной статьи:)

Таким образом, вам надо только вставить свой URL в данный код и, если вы владеете CSS и HTML, для вас не составит труда оформить картинку для кнопки «Поделиться» и сделать её ссылкой. Дальше я покажу 4 примера, которыми вы можете воспользоваться по принципу скопировал/вставил и которые откроют для вас дополнительные возможности кнопки Facebook Share.

Способ №1. На основе документации Facebook

Этот способ можно считать самым правильным, поскольку он взят из официальной документации разработчиков Facebook. Официальный код кнопки «Поделиться» такой:

<a name="fb_share"></a> 
<script src="https://www.facebook.com/connect.php/js/FB.Share" type="text/javascript"></script>

Объяснение кода: используется всего две строчки, первая — это ссылка
<a name=″fb_share″></a>
вторая строчка — это стандартный скрипт Facebook, его трогать не надо
<script src=″https://www.facebook.com/connect.php/js/FB.Share″ type=″text/javascript″></script>
Значение name=″fb_share″ вместе со скриптом делает из обычной ссылки кнопку «Поделиться». Если вы в коде не указали URL, которым хотите делиться (как в данном примере), то Facebook возьмёт по умолчанию URL той веб-страницы, где установлена кнопка.

Демонстрация работы этого кода:

Минусы этого кода — кнопка на английском, код часто глючит. Плюсы — открывается всплывающее окно (это удобно) и кнопка уже со счётчиком. Причём счётчик кнопки «Поделиться» суммирует не только количество нажатий, но также комментарии и «лайки» под публикацией в Ленте новостей.

Можно ли изменить внешний вид кнопки и сделать её на русском? Да. Для русификации между тегами ссылки достаточно вписать любое русское слово. А для замены внешнего вида в тот же тег ссылки добавляется параметр type. Всего есть 5 стандартных типов кнопки «Поделиться». Ниже коды и живые примеры кнопок всех типов.

Тип «иконка». В коде прописан URL, которым мы делимся. Это параметр share_url.

<a name="fb_share" type="icon" 
   share_url="http://bit.ly/FBshareArticle"></a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
</script>

Демонстрация работы этого кода:

Тип «иконка и ссылка». В данных примерах кодов я показываю везде, что нужен скрипт. Но если вы используете на одной веб-странице несколько кнопок «Поделиться», то скрипт указывается только один раз.

<a name="fb_share" type="icon_link" 
   share_url="http://bit.ly/FBshareArticle">Поделиться</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

Демонстрация работы кода: Поделиться

Тип «кнопка».

<a name="fb_share" type="button" 
   share_url="http://bit.ly/FBshareArticle">О, да! Работает!</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

Демонстрация работы кода: О, да! Работает!

Тип «кнопка-счётчик горизонтальная». Обычно счётчик появляется после трёх «шарингов».

<a name="fb_share" type="button_count" 
   share_url="http://bit.ly/FBshareArticle">Поделиться в Facebook</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

Демонстрация работы кода: Поделиться в Facebook

Тип «большая вертикальная кнопка-счётчик».

<a name="fb_share" type="box_count" 
   share_url="http://bit.ly/FBshareArticle">Делись большой, не будь лапшой</a> 
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" 
        type="text/javascript">
</script>

Демонстрация работы кода:

Делись большой, не будь лапшой

Дальше я покажу самодельные способы создания кнопок «Поделиться» на Javascript и PHP.

Способ №2. С помощью Javascript

Этот способ примитивный, но он отлично работает. Допустим, вы хотите сделать свою картинку для кнопки «Поделиться» и всплывающее окно после нажатия на кнопку. Тогда вам пригодится этот код:

<a id="share" href="http://www.facebook.com/sharer.php?u=http://bit.ly/FBshareArticle">
   <img src="http://www.masterskayafanstranic.com.ua/wp-content/uploads/2012/05/button2.png" />
</a>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="http://swip.codylindley.com/jquery.popupWindow.js"></script>

<script type="text/javascript">
	$('#share').popupWindow({ 
		width:550, 
		height:400,
		centerBrowser:1
	});
</script>

Объяснение кода: чтобы использовать этот способ, у вас обязательно на сайте или вкладке должна быть подключена библиотека jQuery и скрипт для генерации всплывающего окна (лучше их подключить перед тегом </head>):
<script src=″http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js″></script>
<script src=″http://swip.codylindley.com/jquery.popupWindow.js″></script>

В ссылке вам нужно поменять URL после кода
http://www.facebook.com/sharer.php?u=

Также в коде ссылки используется идентификатор id=″share″. Благодаря ему скрипт понимает, что нужно вызвать всплывающее окно. Этот же идентификатор вам надо прописать и в самом скрипте, который содержит параметры ширины, высоты и отцентровки по середине браузера. Эти параметры вы можете менять при необходимости:
width:550,
height:400,
centerBrowser:1

Таким образом, в этом коде кнопки «Поделиться» вам надо заменить только ссылку для «расшаривания» и ссылку на картинку в теге img.

Демонстрация работы кода:




Способ №3. С помощью Javascript

Это способ не требует подключение дополнительных библиотек скриптов. Он также вызывает всплывающее окно и может содержать любую картинку для кнопки «Поделиться». Смотрите пример кода:

<a href="#null" onClick="openWin2()">
  <img src="http://www.masterskayafanstranic.com.ua/wp-content/uploads/2012/05/button3.png" />
</a>
<script><!-- hide
function openWin2() {
myWin=open("http://www.facebook.com/sharer.php?u=http://bit.ly/FBshareArticle","displayWindow","width=520,height=300,left=350,top=170,status=no,toolbar=no,menubar=no");
}
// -->
</script>

Объяснение кода: в теге ссылки используется функция onClick, её название задаётся произвольно и должно совпадать с названием функции в скрипте. Можете её не трогать. Далее в теге img меняете ссылку на вашу картинку. Единственное, что вам нужно заменить в скрипте, — это ссылка, которой пользователи будут делиться. В данном примере используется ссылка http://bit.ly/FBshareArticle (выделена красным цветом). Остальные параметры (ширина, высота, отступ слева и сверху для всплывающего окна можете менять по желанию). Способ очень простой.

Демонстрация работы кода:

Способ №4. PHP

Настройка кнопки «Поделиться» заключается не только в изменении картинки кнопки. Также надо контролировать заголовок, миниатюру и описание, которые будут генерироваться этой кнопкой и отображаться в Ленте новостей, чтобы увеличивать конверсию переходов. Эти данные можно контролировать с помощью мета тегов Open Graph Facebook. (Как их установить на сайт читайте в этой статье.) Но если вы хотите настроить заголовок и миниатюру индивидуально для конкретной кнопки «Поделиться», то в этом случае поможет PHP.

Для начала создайте на компьютере PHP-файл. Назовите его social.php и вставьте в него такой код:

<?php

    $title=urlencode('Заголовок вашей вкладки или веб-страницы');
    $url=urlencode('http://bit.ly/FBshareArticle');
    $summary=urlencode('Текстовое описание, которое вкратце рассказывает, зачем пользователям переходить по этой ссылке.');
    $image=urlencode('http://www.vash-web-site.ru/images/share-icon.jpg');

?>

Каждая из четырёх строк этого кода настраивается в соответствие с вашими целями. Значения внутри круглых скобок вам надо заменить на свои. Чтобы понять, за что они отвечают, посмотрите этот скриншот:

Обратите внимание, что переменная $url — это ссылка уже внутри публикации в Ленте новостей.

Следующий шаг — подключить файл social.php к тому файлу, где будет кнопка «Поделиться» (например, файл index.php). Для этого в самое начало нужного файла вставьте код:

<?php
   require("social.php");
?>

В этом примере файлы social.php и index.php находятся в одной папке.

Последний шаг. Добавляем в файл index.php сам код кнопки «Поделиться» с нужными параметрами:

<a onClick="window.open('http://www.facebook.com/sharer.php?s=100&amp;p[title]=<?php echo $title;?>&amp;p[summary]=<?php echo $summary;?>&amp;p[url]=<?php echo $url; ?>&amp;p[images][0]=<?php echo $image;?>','sharer','toolbar=0,status=0,width=700,height=400');" href="javascript: void(0)">
    <img src="http://www.masterskayafanstranic.com.ua/wp-content/uploads/2012/05/button4.png" />
</a>

Скачать файл с кодом.

Объяснение кода: функция onClick=”window.open(’…’);” создаёт всплывающее окно, которое содержит необходимую информацию для кнопки «Поделиться» (смотрите скриншот выше). Оставьте этот код без изменений. Единственное, что можете подправить — ширину и высоту окна. Затем обязательно замените ссылку картинки в теге img. Также вместо картинки может быть просто текст.

Демонстрация работы кода:


Теперь вы легко сможете сделать такие кнопки «Поделиться» на своих ресурсах, какие захотите. Если знаете ещё способы, поделитесь в комментариях. Спасибо.

Ссылки по теме:

Документация для разработчиков — Facebook Share

Поделитесь с друзьями

Комментарии Facebook: