Кнопка «Мне нравится» на Facebook: как встраивать социальные плагины

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

Что такое социальные плагины Facebook?

Кнопки «Мне нравится» и «Поделиться» — это два основных компонента, которые делают Facebook тем, чем он является. Эти две кликабельные функции, претерпевшие за годы своего существования многочисленные оптические изменения, являются движущей силой сетевого взаимодействия пользователей и распространения контента на лидирующем рынке социальных сетей. С тех пор почти все другие социальные сети скопировали эту концепцию и внедрили аналогичные кнопки или виджеты у себя. С 2010 года появилась возможность встраивать эти иконки и в другие веб-проекты за пределами Facebook. Чтобы помочь в этом, интернет-гигант предоставил свои собственные социальные плагины, которые можно довольно легко внедрить: Благодаря собственному конфигуратору их легко вписать в ваш веб-проект, и они доступны в виде приложений iFrameor JavaScript. Для многих систем управления контентом — например, WordPress — существуют дополнительные расширения, которые также могут помочь вам со встраиванием кнопок Facebook.

Социальные сигналы: преимущества встраивания кнопок Facebook

Социальные сети обеспечивают идеальные каналы для обмена контентом и формирования прямой связи с клиентами, читателями и поклонниками. Благодаря вышеупомянутым функциям «нравится» и «поделиться», а также возможности оставлять комментарии, Facebook прекрасно справляется с этой задачей. Отзывы пользователей, оставляемые в таких случаях, также называемые социальными сигналами, играют решающую роль в определении успеха в Интернете по целому ряду причин:

  • Чем больше откликов получают ваши сообщения, тем выше вероятность того, что другие авторы, блоггеры или частные пользователи увидят ваш контент и поставят на него ссылку. Это приводит к появлению ценных, релевантных теме обратных ссылок, что, в свою очередь, очень положительно влияет на рейтинг в поисковых системах.
  • Обратные ссылки, упоминания и «лайки» увеличивают ваш охват и авторитет в отношении соответствующих ключевых слов. Это может быть полезно для привлечения новых клиентов, читателей или поклонников. Это также может оказать дополнительное положительное влияние на ваше присутствие в Интернете.
  • Положительные социальные сигналы отражаются на росте трафика в долгосрочной перспективе — еще один плюс, который поможет вам добиться лучшего рейтинга в SERPs Google.

Вышеприведенные пункты доказывают, что даже если пользовательские сигналы в социальных сетях не учитываются напрямую при ранжировании в Google и Co, они все равно оказывают огромное положительное влияние на ваше позиционирование в поисковых системах. Основным условием для этого является предоставление высококачественного, информативного контента, который приводит к появлению лайков, акций и комментариев — а встроенные кнопки Facebook like и share на внешних сайтах помогут вам значительно расширить охват этого контента.

Как добавить кнопку Facebook like на свой сайт

Для того чтобы создать официальную кнопку Facebook like или share, вам понадобится соответствующий конфигуратор кода, который можно найти в области разработки Facebook «Facebook для разработчиков». В следующем разделе мы расскажем, как создать кнопку «Мне нравится» с помощью этого инструмента. Но сначала необходимо зайти на страницу обзора Facebook для разработчиков, чтобы увидеть полный список доступных социальных плагинов. Как только вы окажетесь на этой странице, выберите кнопку «Мне нравится».

На следующей странице вы найдете небольшое введение, а также пошаговое руководство по интеграции собственной кнопки Facebook like. Третий раздел содержит конфигуратор, который вам понадобится, хотя он также может быть расположен в меню, указанном выше. Вам нужно будет заполнить следующие поля параметров веб-инструмента, чтобы сгенерировать код:

  • URL для Like: социальный плагин требует указать интернет-адрес вашей страницы Facebook, чтобы впоследствии можно было связать с ней кнопку. Введите в это поле полный URL страницы вашей компании в Facebook.
  • Ширина: опция ‘width’ позволяет вам определить ширину плагина кнопки Like в пикселях. Стандартная ширина для плагина кнопки like составляет 450 пикселей, минимальная ширина — 225, максимальная — 625.
  • Макет: поле макета позволяет изменить формат внешнего вида кнопки Facebook. В основном это влияет на позиционирование количества людей, которые уже взаимодействовали с вашей страницей Facebook с помощью этого социального плагина. Это распространенное заблуждение, что данный показатель показывает только количество лайков, которые получила страница. На самом деле, он объединяет количество лайков, акций и комментариев в один показатель.
  • Тип действия: тип действия не оказывает прямого влияния на функциональность кнопки. Вместо этого он влияет только на формулировку. Если вы решили оставить стандартный вариант «like», то вы воспользуетесь классическим вариантом, и пользователи, нажавшие на кнопку, автоматически сообщат в своей ленте новостей Facebook, что им нравится ваша страница. Альтернативный вариант, «рекомендовать», позволяет пользователям рекомендовать ваш контент, компанию или блог своим друзьям. Этот вариант разработан преимущественно для редакционных постов, где позитивное заявление, сделанное кнопкой «нравится», может быть неуместным — например, в случае стихийного бедствия или аналогичных негативных событий.
  • Размер кнопки: у вас также есть возможность изменить размер кнопки. Для небольших кнопок следует придерживаться размера по умолчанию «маленький». Но если вы хотите сделать кнопку «Мне нравится» больше, чтобы она сильнее выделялась на вашей странице, то вы можете изменить размер на «большой».
  • Показывать лица друзей: если посетители сайта вошли в Facebook во время просмотра вашего веб-проекта, то социальный плагин может отображать дополнительные фотографии профиля их друзей, которым уже понравилась ваша страница в Facebook. Чтобы реализовать эту функцию, достаточно установить галочку в поле опций.
  • Включить кнопку поделиться: вам не нужно отдельно внедрять кнопку поделиться с Facebook. Если вы отметили это поле, то опция поделиться будет автоматически интегрирована вместе с плагином кнопки «Мне нравится».

После заполнения всех полей опций вы можете создать код для вашей кнопки Facebook like, нажав на кнопку «Получить код». Выберите идентификатор приложения Facebook, и вы получите код встраивания для Facebook JavaScript SDK (Software Development Kit), который вы должны сначала интегрировать на свой сайт в качестве собственного кода плагина (в идеале после тега open <body>). Теперь вы можете добавить этот код плагина в ваш HTML-документ в том месте, где вы хотите, чтобы появилась кнопка.

Внимание

Если у вас нет идентификатора приложения Facebook, вы можете легко создать его в меню социальных плагинов. Просто войдите в систему под своей учетной записью Facebook и выберите «Добавить новое приложение», которое находится под «Мои приложения» в верхнем меню, указанном выше. Здесь вы можете ввести отображаемое имя для вашего идентификатора, а также адрес электронной почты для связи и выбранную категорию.

Если вы хотите работать с iFrame вместо кода JavaScript, то просто выберите соответствующую вкладку во всплывающем окне и скопируйте код iFrame в свой веб-проект. В этом случае вам больше не понадобится JavaScript SDK.

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

Что это за две разновидности кода и в чем их различия?

Хотя эти две версии очень похожи друг на друга по своим основным функциям, есть разница, выберете ли вы в своем веб-проекте кнопку Facebook в виде iFrame или в виде приложения JavaScript. Поскольку оба социальных плагина размещаются на сайте Facebook, социальная сеть автоматически узнает, вошел ли пользователь в систему, и если вошел, то отобразит персонализированную форму кнопки. В случае с iFrame персонализация происходит в виде списка всех друзей посетителя сайта, которым ранее нравился этот сайт или пост (включая фотографии их профилей). Если посетитель сайта не вошел в систему или даже не имеет учетной записи Facebook, то автоматически появится приглашение или предложение войти или зарегистрироваться.

Плагин JavaScript имеет дополнительное преимущество — он позволяет пользователям добавлять комментарий, когда они нажимают на кнопку «Мне нравится».  В отличие от iFrame, который представляет собой один элемент HTML, версия JavaScript требует встраивания Facebook SDK, а также строки кода кнопки. Вы также можете использовать этот мощный набор разработчика для интеграции функции входа в социальную сеть.

Для того чтобы Facebook отобразил эти персонализированные кнопки, браузер пользователя автоматически связывается с серверами Facebook. Если пользователь зарегистрирован в социальной сети или был зарегистрирован ранее и вызывает страницу, на которой есть социальный плагин, то пользователь может быть точно идентифицирован. Но это означает, что взамен Facebook получает такую информацию, как время доступа, идентификатор пользователя или даже информацию об используемом браузере и индивидуальном IP-адресе. Гигант социальных сетей ранее заявлял, что оставляет за собой право хранить и использовать собранные данные для улучшения собственных продуктов и услуг, а также для оптимизации целевых показов рекламы. Это привело к тому, что некоторые страны, в том числе Германия, объявили традиционный подход к встраиванию кнопки «Мне нравится» Facebook и других социальных плагинов незаконным.

Альтернатива встраиванию: простые HTML-ссылки с CSS-дизайном

Shariff — это современное решение проблемы обмена контентом социальных сетей напрямую через другие веб-сайты и платформы. Этот проект с открытым исходным кодом был опубликован и разработан компанией Heise на открытой платформе GitHub, где вы можете скачать исходный код. Кнопка обмена Shariff — это, по сути, не что иное, как простая статическая ссылка, которая была индивидуально разработана, чтобы выглядеть как типичная кнопка «поделиться» с одной из популярных платформ социальных сетей, таких как Facebook, Google+ и Twitter, с помощью языка стилей CSS (файлы sheriff.min.css). Это означает, что команде разработчиков Heise не пришлось полагаться на обычную графику, вместо этого они выбрали гибкие векторные иконки, которые остаются четкими на дисплеях высокого разрешения и могут быть размещены как на вашем собственном частном сервере, так и через сеть доставки контента MaxCDN.

Чтобы вам не пришлось вручную вводить URL статической ссылки, Shariff автоматически записывает его в исходный код с помощью JavaScript (файлы shariff.min.js). Затем вы можете легко реализовать кнопку, используя контейнер <div> и класс sheriff, который можно легко разместить в любом месте, где вы хотите, чтобы кнопка появилась в разделе <body> вашего веб-проекта. В своей простейшей форме исходный текст страницы будет выглядеть следующим образом:

<!DOCTYPE html>
<html>
<head>
  [...]
  <title>your website</title>
  <link href="shariff.min.css" rel="stylesheet">
</head>
<body>
  <h1>your article</h1>
  <p>[...]</p>
  <div class="shariff"></div>
  <script src="shariff.min.js"></script>
</body>
</html>

Если вы используете дополнительный серверный компонент, можно даже получать и отображать информацию о количестве посетителей сайта, которые воспользовались вашей встроенной кнопкой Facebook share. Для этого Heise разработала три бэкенда — PHP, Perl и Node.js, а также аутсорсинговые модули для Facebook, Google+ и Twitter. Бэкенд посылает запрос на сервер сети через соответствующий API, а в ответ получает набор метаданных, из которых затем извлекает информацию о том, где был распространен целевой URL.

Интеграция социальных плагинов в ваш собственный сайт — краткое описание

Связывание собственного сайта со страницами в социальных сетях с помощью кнопок может значительно упростить распространение вашего контента. Это относится не только к Facebook — это касается всех других платформ, на которых вы активны. Если вы открываете диалог со своими пользователями и регулярно публикуете высококачественный контент, то есть шанс, что трафик вашего сайта в долгосрочной перспективе выиграет от социальных сигналов. Социальные плагины, которые предлагает Facebook (и другие каналы социальных сетей, такие как Google+ или Twitter) для встраивания кнопок, действительно полезны, быстры и просты, но есть и другие способы встраивания кнопок социальных сетей, которые не нарушают защиту данных, например, инструмент Shariff от Heise.

Shariff не передает данные на сервер соответствующей социальной сети, пока посетители вашего сайта не дадут на это согласие, благодаря силе статических ссылок. Используя подобные ссылки с кнопочной оптикой, вы можете пользоваться преимуществами ссылок с вашего сайта на профили социальных сетей без необходимости автоматически передавать личные данные посетителей сайта гигантам социальных сетей.

Оцените статью
cdelat.ru
Добавить комментарий