adamjohnson.info

Кнопка поделиться как сделать

Кнопка поделиться как сделать 215

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

Похожие записи:


Кнопка поделиться как сделать 509
Кнопка поделиться как сделать 1
Кнопка поделиться как сделать 936
Кнопка поделиться как сделать 308
Кнопка поделиться как сделать 696
Кнопка поделиться как сделать 126
Кнопка поделиться как сделать 324
Кнопка поделиться как сделать 127
Кнопка поделиться как сделать 737
Кнопка поделиться как сделать 50
Кнопка поделиться как сделать 273
Кнопка поделиться как сделать 249
Кнопка поделиться как сделать 126
Кнопка поделиться как сделать 914
Кнопка поделиться как сделать 314
Формирование драценой в домашних условияхВыращивание гвоздиков в теплицахПоздравление на рубиновую свадьбу от дочериКак сделать бабочку из цветочковСтеллаж для балкона деревянный своими рукамиПалас и ковер своими рукамиТост поздравление на свадьбу от сестры сестреКак в бки сделать запрос вПоделки из конфет сделай самТексты поздравления с 1 сентября детямКак понизить глюкозу в домашних условияхКак сделать красивое фото на айфон 7Бреем зону бикини в домашних условияхКак сделать свою жизнь легкойЖидкость для пузырей своими руками

Читать далее:

  • Подкармливаем перец на рассаду
  • Картинки поздравления со старым-новым годом
  • Шкатулка своими руками из рукоделие
  • Ремонт своими руками зала в квартире
  • Роды у той терьера в домашних условиях