Как добавить cоциальные кнопки на свой сайт

Привет, друзья!

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

Как добавить cоциальные кнопки на свой сайт

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

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

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

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.

На моем сайте социальные кнопки выглядят следующим образом:

Как добавить cоциальные кнопки на свой сайт

Как реализовать эти социальные кнопки в WordPress?

Теперь вам может быть интересно, как эти кнопки были реализованы. Ваша первоначальная мысль может заключаться в том, что за этим стоит какой-то плагин. Однако я решил добавить кнопки непосредственно в свою тему. Это дает мне дополнительный контроль над тем, как стилизовать и отображать эти вещи. Конечно, я мог бы добавить эти кнопки и плагином, но дополнительное преимущество было бы минимальным для меня.

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

Вот основной пример того, как я реализовал социальную кнопку для Facebook. Обратите внимание, что не весь код является фактическим производственным кодом и был заменен на псевдо-код, чтобы упростить реализацию.

<?php
// File: <theme_folder>/html_includes/partials/social-share.php
function facebook_social_button() {
$article_url = get_article_url(); // Метод псевдо-кода для получения URL-адреса статьи.
$article_url .= '#utm_source=facebook&utm_medium=social&utm_campaign=social_buttons';

$title = html_entity_decode( get_og_title() ); // Метод псевдо-кода для получения og_title.
$description = html_entity_decode( get_og_description() ); // Метод псевдо-кода для получения og_description.
$og_image = get_og_image(); // Метод псевдо-кода для получения og_image, назначенного сообщению.

$images   = $og_image->get_images();
$url = 'http://www.facebook.com/sharer/sharer.php?s=100';
$url .= '&p[url]=' . urlencode( $article_url );
$url .= '&p[title]=' . urlencode( $title );
$url .= '&p[images][0]=' . urlencode( $images[0] );
$url .= '&p[summary]=' . urlencode( $description );
$url .= '&u=' . urlencode( $article_url );
$url .= '&t=' . urlencode( $title );
echo esc_attr( $url );
}
?>
<div id="social-share">
<div class="socialbox">
<a rel="nofollow" target="_blank" data-name="facebook" aria-label="Поделиться на Facebook" data-action="share" href="<?php facebook_social_button(); ?>">
<i class="fa fa-facebook-square text-icon--facebook"></i>
</a>
</div>
</div>

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

Чтобы включить эти социальные кнопки в сообщения своего блога, откройте файл single.php в папке своей темы и вставьте следующий фрагмент, в котором вы хотите, чтобы кнопки отображались:

<?php get_template_part( 'html_includes/partials/social-share' ); ?>

Это оно! Если вы не хотите собирать данные взаимодействия с этих кнопок, тогда это все, что вам нужно. Если вы хотите, чтобы взаимодействия отслеживались, читайте дальше.

Отслеживание взаимодействия социальных кнопок

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

Я использую JavaScript для обеспечения правильного отслеживания обмена социальными сетями, чтобы мог легко увидеть, какие социальные медиа-платформы популярны среди моих читателей.

Код для этого относительно прост и зависит от правильного внедрения Google Analytics Tracker на ваш сайт. Предполагая, что это так, следующий код будет очень полезен:

jQuery( document ).ready( function( $ ) {
	$( '.socialbox a' ).click( function( e ) {
		e.preventDefault();
		
		if ( typeof __gaTracker !== "undefined" ) {
			__gaTracker( 'send', 'social', $( this ).data( 'name' ), $( this ).data( 'action' ), document.querySelector( "link[rel='canonical']" ).getAttribute( "href" ) );
		}
	});	
});

Вышеупомянутый фрагмент кода JavaScript передает некоторую дополнительную информацию, которую мы передали вместе с тегом привязки. Эта дополнительная информация может быть идентифицирована data-префиксом и извлекается при вызове $( this ).data( […] ). Этот метод позволяет нам легко расширять div для социальных долей и добавлять больше кнопок.

Вывод

Как вы можете видеть, добавить социальные кнопки в свой блог не так уж сложно. Даже отслеживание их в Google Analytics стало легким по сравнению с прошлыми реализациями.

Осталось только пойти и реализовать кнопки и позволить вашим читателям продвигать ваши сообщения. Удачи!

P.S. Хочу признаться: раньше кнопки стояли кодом, как и описано выше. Сейчас, когда я сделал новую тему для своего блога на Bootstrap, я решил не заморачиваться с кодом, а просто найти подходящий плагин. И такой нашелся очень быстро — плагин называется «UpToLike«. Можете поэкспериментировать с ним. Мне очень понравился.

На этом все — до скорых встреч.

А какой плагин социальных сетей используете на своем сайте Вы? Ответы жду в комментариях.


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт