Как сделать кнопку share facebook
2 Как добавить кнопку share на страницу Facebook
Поделиться «Как добавить кнопку share на страницу Facebook»
Facebook продолжает всячески подталкивать разработчиков, переходить от FBML к iFrame. Вот, например, раньше была возможность элементарно вставлять на страницах Facebook кнопку Share, что позволяло поклонникам страницы добавлять комментарии и размещать ссылку на понравившийся контент у себя на стене.
Сейчас мало того что FBML умер, так и кнопку share больше facebook не жалует. В документации разработчиков так и сказано, что facebook share продолжает работать в целях совместимости со старым кодом. Но тем не менее, продолжать использовать эту кнопку, нам никто не мешает.
В этом уроке мы рассмотрим, как использовать Facebook Javascript SDK и некоторые JQuery элементы, чтобы интегрировать старую функцию в iFrame приложение с последующим отображением на странице Facebook.
Для тех, кто еще не знает, как создавать iFrame приложения, рекомендую почитать руководство по созданию iFrame-вкладок для страниц Facebook.
ПРИМЕЧАНИЕ: далее очень желательны базовые знания JavaScript
Я предполагаю, что у вас уже есть начальное представление о JavaScript, иначе бы вы не дошли до этого абзаца. 🙂
Шаг 1: Добавьте код для загрузки SDK Facebook JavaScript в главный индексный файл (HTML или PHP)
Начните с того, что добавьте в свой основной (index.php или index.html) файл некоторый код, который загружает Facebook JavaScript SDK:
ПРИМЕЧАНИЕ: в качестве значения параметра AppId необходимо вставить Id приложения, предварительно созданного вами на странице facebook.com/developers.
ШАГ 2: Добавьте код для загрузки библиотеки JQuery
Далее, необходимо подключить библиотеку JQuery, представляющую собой JavaScript-библиотеку для облегчения многих задач. Вместо JQuery можно использовать и любые другие библиотеки, например MooTools, но это уже выходит за рамки данной статьи.
Будем загружать библиотеку удаленно, с ресурсов google, чтобы лишний раз ничего не скачивать.
Шаг 3: Используя возможности JQuery отобразим диалоговое окно Share
Теперь, когда Facebook JavaScript SDK и JQuery загружены, мы готовы вызвать всплывающее диалоговое окно кнопки Share. Воспользуемся возможностями JQuery плюс функции Facebook fb.ui. Вставьте этот код в свой файл:
Вы можете вставить несколько кнопок share на одной странице, но тогда следите, чтобы идентификаторы диалогов не повторялись (например, #share_button1, #share_button2).
При исполнении кода, должен появиться вот такой диалог:
Теперь настраиваем доступные параметры:
Шаг 4: Создадим ссылку / кнопку, чтобы вызвать диалоговое окно
Диалоговое окно, описанное выше, необходимо каким-то образом запустить. Для этого нам нужна какая-то кнопка или просто текстовая гиперссылка, не важно. Я взял стандартное изображение кнопки share в Facebook:
Просто вставляем код картинки в индексный файл и добавляем ID «share_button»
Когда пользователь нажимает на эту кнопку, то вызывается диалоговое окно share.
Как только пользователь заполняет свое сообщение и нажимает кнопку «Опубликовать», сообщение появится на его стене и может отобразиться в лентах новостей друзей (в зависимости от настроек).
Если есть вопросы — не стесняйтесь, пишите в комментариях ниже.
Некоторые тонкости установки на сайт кнопок «Поделиться» (share) социальных сетей
Сегодня, в эпоху социальных медиа, принято давать посетителям сайта возможность поделиться с друзьями. Мы делали промо-страницу к Дню Рождения интернет-магазина Allsoft и нам нужно было установить кнопки «Поделиться» от Facebook, Twitter, Одноклассников, Вконтакте и Мой мир.
С первого взгляда показалось — что может быть тут особенного — поставил готовый html/js код и готово? Но тонкости оказались в деталях: что если для одной соц. сети нужно передавать один текст, а для другой — другой? Как правильно передать картинку и описание во все сети? А если несколько разных вариантов текста и картинок на одной странице? Как почистить уже закешированную информацию о ссылке в соц.сети? На все эти вопросы нам пришлось найти ответы, которые и вы сможете узнать из этой статьи.
Самый простой вариант:
Чтобы поставить блок «Поделиться» на страницу своего сайта, достаточно зайти наhttp://api.yandex.ru/share/ и через мастер сформировать нужный вид виджета с кнопками — получится код типа
С помощью этого кода пользователь на сайте сможет поделиться в сети ссылкой на него, которая будет выглядеть примерно так:
Здесь фраза «Кто хочет купить софт со скидкой 8% по акции?» написана самим пользователем, а ниже — то, как ссылка на сайт выглядит в соц.сети. Не сильно красиво, правда?
Передача в социальную сеть картинки, заголовка и описания.
Сделать это можно с помощью мета-тегов, например:
тогда ссылка в соц.сети будет выглядеть так:
Здесь «Сегодня день Рождения allsoft.ru — 8 лет :)» — текст написанный пользователем, остальное — информация из мета-тегов. Подробнее об этих мета-тегах можно прочитать на странице Facebook developers.facebook.com/docs/share, остальные соц.сети тоже их вполне понимают.
Как вообще работает этот механизм:
1. Когда пользователь нажимает кнопку, виджет передает серверу соц.сети ссылку на страницу.
2. Сервер соц. сети сам обращается по этой ссылке и считывает информацию о странице — заголовок, описание, картинку.
3. Сервер соц. сети кеширует на своей стороне информацию о странице и отображает на страницах соц.сети
Какие в связи с этим могут возникнуть проблемы во время разработки:
1. Если вы разрабатываете сайт на сервере, недоступном извне, закрытом http-авторизацией, или локально — соц. сеть не сможет получить информацию о странице, либо вообще не позволит поделиться ссылкой (например, так работает «Одноклассники»), либо отобразит ее без заголовка и описания (как на картинке в первом, самом простом варианте)
2. После того как сервер соц.сети уже один раз обратился к странице, он закешировал информацию о ней — следовательно, если вы захотите изменить заголовок и описание и измените на стороне своего сайта, то в соц.сети оно уже не поменяется — она будет использовать ранее закешированную информацию. (Как это исправить — смотрим ниже.)
Как передавать разные описания для одной страницы.
Например, при создании промо-страницы на allsoft.ru с шуточным тестом потребовалось для разного количества баллов, набранных пользователем в тесте, передать в соц.сети разные описания. Так как описание страницы соц.сеть получает заходя по ссылке, то для разных описаний нужны разные ссылки. Кроме того, Twitter позволяет вставлять только 140 символов, поэтому для него нужно отдельное, более короткое, описание.
Для этого:
1. Для разных результатов теста мы должны передать в API блока «Поделиться» Яндекса разные ссылки. В нашем случае это были:http://allsoft.ru/promo/allsoft8let/?share=normal, allsoft.ru/promo/allsoft8let/?share=high, allsoft.ru/promo/allsoft8let/?share=low иhttp://allsoft.ru/promo/allsoft8let/ для блока вне теста.
2. Соответственно, в зависимости от переданных скрипту страницы параметров в url, страница должна формироваться с разными мета-тегами.
3. Для того, чтобы передавать отдельное описание для Twitter, нужно уже использовать другой формат API блока «Поделиться» Яндекса — не теги, а js-код:
1. Здесь ya_share_normal — id элемента на странице (), в котором будет появляться блок с социальными кнопками, link — ссылка, плюс в serviceSpecific для твиттера указываем title, отличающийся от того, что находится в мета-теге og:title.
Таким образом, для задачи «3 разных результата теста плюс общая ссылка на страницу вне теста» у нас будет 4 тега:
и 4 блока кода в JavaScript, как указано выше.
При передаче через API другого title и description соц.сети обновляют закешированную ранее из мета-тегов информацию (за исключением Facebook — но для него есть способ 1)
Также, наверное, можно передавать и image для изменения картинки.
Ну вот, кажется, и все. Добро пожаловать на allsoft.ru/promo/allsoft8let и торопитесь делиться этой ссылкой с друзьями – сегодня последний день акции!
Автор: Владимир Хворостов — Веб-разработчик Softline
Как добавить кнопку share на страницу Facebook
By Алексей Малыгин
Facebook продолжает всячески подталкивать разработчиков, переходить от FBML к iFrame. Вот, например, раньше была возможность элементарно вставлять на страницах Facebook кнопку Share, что позволяло поклонникам страницы добавлять комментарии и размещать ссылку на понравившийся контент у себя на стене.
Сейчас мало того что FBML умер, так и кнопку share больше facebook не жалует. В документации разработчиков так и сказано, что facebook share продолжает работать в целях совместимости со старым кодом. Но тем не менее, продолжать использовать эту кнопку, нам никто не мешает.
В этом уроке мы рассмотрим, как использовать Facebook Javascript SDK и некоторые JQuery элементы, чтобы интегрировать старую функцию в iFrame приложение с последующим отображением на странице Facebook.
Для тех, кто еще не знает, как создавать iFrame приложения, рекомендую почитать руководство по созданию iFrame-вкладок для страниц Facebook.
ПРИМЕЧАНИЕ: далее очень желательны базовые знания JavaScript
Я предполагаю, что у вас уже есть начальное представление о JavaScript, иначе бы вы не дошли до этого абзаца. 🙂
Шаг 1: Добавьте код для загрузки SDK Facebook JavaScript в главный индексный файл (HTML или PHP)
Начните с того, что добавьте в свой основной (index.php или index.html) файл некоторый код, который загружает Facebook JavaScript SDK:
ПРИМЕЧАНИЕ: в качестве значения параметра AppId необходимо вставить Id приложения, предварительно созданного вами на странице facebook.com/developers.
ШАГ 2: Добавьте код для загрузки библиотеки JQuery
Далее, необходимо подключить библиотеку JQuery, представляющую собой JavaScript-библиотеку для облегчения многих задач. Вместо JQuery можно использовать и любые другие библиотеки, например MooTools, но это уже выходит за рамки данной статьи.
Будем загружать библиотеку удаленно, с ресурсов google, чтобы лишний раз ничего не скачивать.
Шаг 3: Используя возможности JQuery отобразим диалоговое окно Share
Теперь, когда Facebook JavaScript SDK и JQuery загружены, мы готовы вызвать всплывающее диалоговое окно кнопки Share. Воспользуемся возможностями JQuery плюс функции Facebook fb.ui. Вставьте этот код в свой файл:
Вы можете вставить несколько кнопок share на одной странице, но тогда следите, чтобы идентификаторы диалогов не повторялись (например, #share_button1, #share_button2).
При исполнении кода, должен появиться вот такой диалог:
Теперь настраиваем доступные параметры:
Шаг 4: Создадим ссылку / кнопку, чтобы вызвать диалоговое окно
Диалоговое окно, описанное выше, необходимо каким-то образом запустить. Для этого нам нужна какая-то кнопка или просто текстовая гиперссылка, не важно. Я взял стандартное изображение кнопки share в Facebook:
Просто вставляем код картинки в индексный файл и добавляем ID “share_button”
Когда пользователь нажимает на эту кнопку, то вызывается диалоговое окно share.
Как только пользователь заполняет свое сообщение и нажимает кнопку “Опубликовать”, сообщение появится на его стене и может отобразиться в лентах новостей друзей (в зависимости от настроек).
Если есть вопросы – не стесняйтесь, пишите в комментариях ниже.
Как добавить социальные кнопки на сайт?
В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.
Социальные сети на сайте
На сайте ссылки на социальные сети используются для того, чтобы пользователь знал о наличии на этих ресурсах официальных страниц этой компании, а также мог очень просто перейти туда.
Обычно ссылки на официальные профили в социальных сетях оформляются в виде значков или кнопок, и помещаются в заголовок или футер страниц веб-сайта.
Например, на сайте «mebel.ru» они находятся в правом нижней части:
Кроме ссылок на официальные страницы бренда, на сайтах ещё очень часто можно увидеть кнопки «share» (поделиться) и «like» (нравится). Их обычно располагают рядом со статьёй, товаром или услугой.
Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:
Кнопки «share» позволяют быстро поделиться этим контентом в социальных сетях. При нажатию на неё автоматически формируется ссылка на этот контент и пользователю останется только нажать «Отправить». После чего она будет опубликована в его личном аккаунте, которую увидят все его подписчики.
Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».
Почему связь с социальными ресурсами важно для вашей компании? В основном это связано с тем, что социальные сети сейчас занимают огромную роль в жизни людей и не использовать их для увеличения своей аудитории, просмотров и потенциальных клиентов просто неразумно.
Ссылки на официальные профили в социальных сетях
Если в социальных сетях у вас имеются официальные профили компании, то рекомендуется создать ссылки на них.
Выполняется это очень просто.
Кнопки «Поделиться» и «Мне нравится»
Блок с кнопками «Поделиться» предназначен для того, чтобы пользователи могли быстро публиковать понравившиеся им страницы в своих социальных сетях, а в случае использования «Мне нравиться» ещё и «лайкать» их.
Использование сторонних сервисов
Создание соцкнопок этим способом выполняется легко. Для этого достаточно перейти на любой сервис, представляющий такую возможность, выбрать в нём вид кнопок, вариант их оформления и нужный набор сервисов. Обычно все эти действия выполняются очень просто (через конструктор). Далее, после того как вы всё окончательно настроили, нужно скопировать полученный код и подключить его к себе на сайт.
Примеры сервисов, представляющий такую услугу:
Как это осуществляется в USocial:
Конструктор блока «Поделиться» от Яндекса:
Дополнительно, чтобы повысить эффективность от репостинга, на страницы сайта нужно добавить социальные мета-теги (микроразметку).
Мета-теги для социальных сетей
При этом для разных сетей код микроразметки может отличаться:
Без использования сторонних сервисов (официальные кнопки соцсетей)
Но, при добавлении блоков «Поделиться» и «Мне нравится» через сторонние сервисы они обычно загружают не только необходимые для работы скрипты социальных сетей (например, ВКонтакте, Facebook, Twitter и т.д.), но и многие другие вещи, которые для их нормальной работы вообще не нужны. Например, эти сервисы могут добавлять код, который будет собирать информацию о ваших пользователей, выполнять их отслеживание и многое другое. Кроме этого, они также могут приводить к увеличению времени полной загрузки страниц сайта.
При желании можно обойтись без этих дополнительных посредников и подключить скрипты социальных сетей к себе на сайт напрямую. Инструкции как это сделать приведены в соответствующих разделах документации социальных сетей.
Например, для того чтобы создать кнопку ВКонтакте необходимо выполнить следующие действия согласно официальной документации:
Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.
Получается, что официальные кнопки соцсетей тоже достаточно просто вставить на сайт. Но они также как и в случае со сторонними сервисами полагаются на JavaScript.
Если вас это не устраивает (вы не хотите иметь зависимость от внешнего кода), то тогда можно вообще отказаться от размещения сторонних JavaScript скриптов на своём сайте, и реализовать всё это дело через URL-адреса. Благо социальные сети это позволяют.
Социальные кнопки через URL-адреса прямого доступа
Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.
Основные преимущества это способа:
Этот вариант делает сайт более независимым, быстрым и ответственным по отношению к конфиденциальности данных своих пользователей.
Однако этот способ кроме преимуществ, имеет также и некоторые ограничения. Например, используя его, вы не сможете уже так просто показать количество отметок «Нравиться» и «Поделиться» для текущей страницы. Если для вас это не является обязательным условием – то тогда нет причин не использовать этот вариант.
Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.
URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:
В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.
Например, в PHP его выполнить можно с помощью функции urlencode :
Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:
Кроме этого, чтобы публикуемая запись был оформлена корректно незабываем добавить на каждую свою страницу мета-теги для социальных сетей.
Создание ссылок посредством JavaScript
Автоматическое формирование ссылок для публикации страниц сайта в соцсетях можно выполнить как на клиенте, так и на сервере.
На клиенте, т.е. с помощью JavaScript, это можно сделать так:
Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента
Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.
Для того чтобы вставить его себе на сайт, необходимо на каждую страницу добавить только вышеприведённый скрипт и элемент
Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):
В ключе « title » мы задаём название соцсети, а в « href » – её URL-адрес для публикаций.
Создание соцкнопок посредством JavaScript
Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.
Создание соцкнопок посредством PHP
Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.
Если вы хорошо знаете устройство своего бэкенда и имеете хотя бы минимальный опыт написания северных скриптов, то сгенерировать такой блок на сервере тоже будет довольно просто.