Кнопки репостов в социальные сети с помощью JavaScript

Кнопки репостов в социальные сети с помощью JavaScript

Социальные сети занимают огромный сектор интернета, миллионы людей ежедневно выходят в онлайн только ради них. В связи с этим, появилось множество новых направлений рекламы и продвижения продуктов. Одним из инструментов которых являются репосты — простая публикация ссылки на страницах пользователей сец. сетей. Правильно оформленная ссылка является не плохой рекламой и может привести потенциальных клиентов на ваш сайт.
Для упрощения механизма репостов, существуют специальные виджеты, их можно легко найти в документации соц. сетей и установить на свой сайт. Но легко и быстро, не всегда равно качеству. Помимо установки кода виджета, необходимо подготовить площадку, чтобы при репосте была использована верная информация: заголовок, описание, картинка и ссылка. Кроме этого, готовые решения всегда имеют и готовый дизайн, который в большинстве случаев, крайне не сочетается с дизайном всего сайта. Но производить стилизацию виджетов не всегда получается, а если и получается, то крайне неудобно. Поэтому нужно искать другое решение.

Репосты в социальные сети с помощью api

Каждая популярная соц.сеть имеет свои апи, используя которые, можно самостоятельно реализовать функционал репостов, без применения готовых решений – виджетов. В этой статье будет описано только пять кнопок репостов для самых распространенных социальных сетей.
Api очень простые и использовать их можно без каких-либо предварительных регистраций или запросов в поддержку. Все, что из себя представляют апи, это обычные ссылки с get-параметрами, в которых можно передавать адрес страницы сайта и дополнительную информацию для репоста(заголовок, описание и тд). Но в данном случае будет достаточно только одного параметра – ссылка на страницу. Остальные данные будут передаваться немного другим образом, об этом чуток позже.
Ниже приведены пять ссылок на api каждой их соц.сети:

ВКонтакте: https://vk.com/share.php?url=адрес_страницы
Facebook: https://www.facebook.com/sharer/sharer.php?u=адрес_страницы
Одноклассники: https://connect.ok.ru/offer?url=адрес_страницы
Twitter: https://twitter.com/intent/tweet?url=адрес_страницы
Google plus: https://plus.google.com/share?url=адрес_страницы

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

Мета-теги Open Graph для сайта

Немного раньше, я упоминал, что помимо ссылки на страницу, для качественного репоста потребуется еще заголовок, описание и картинка. Чтобы не передавать эти данные в ссылках и иметь возможность более удобного управления, стоит воспользоваться специальными мета-тегами. Существуют протокол Open Graph, который позволяет легко и просто указывать для каждой страницы свои параметры репоста. Практически все соц.сети придерживаются этого протокола. До недавнего времени только twitter по своему использовал мета-теги Open Graph, но в последнее время также стал придерживаться общего стандарта.
Для передачи необходимых данных о странице достаточно только нескольких тегов, они должны быть прописаны в самом начале – внутри блока head. Выглядеть это будет вот так:

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- Для twitter -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:title" content="Заголовок для репоста в twitter">
	<meta name="twitter:description" content="Подпись для репоста в twitter">
	<meta name="twitter:image:src" content="https://vk-book.ru/folder-test/share/share_img.jpg">
	<meta name="twitter:url" content="https://vk-book.ru/folder-test/share/">
	<meta name="twitter:domain" content="vk-book.ru">
	
	<!-- Для всех остальных -->
    <meta property="og:title" content="Заголовок для репоста"/>
    <meta property="og:description" content="Подпись для репоста" />
    <meta property="og:type" content="website"/>
    <meta property="og:url" content="https://vk-book.ru/folder-test/share/"/>
    <meta property="og:image" content="https://vk-book.ru/folder-test/share/share_img.jpg"/>
	<meta property="og:image:type" content="image/jpg">
	<meta property="og:image:width" content="1200" /> 
	<meta property="og:image:height" content="628" />	
	
    <title>Пример кнопок репостов для соц.сетей</title>    
</head>

Хоть twitter и начал использовать общие стандарты, все равно стоит прописать для него отдельные мета-теги, такие предосторожности не будут лишними. Самое интересное, что теги, которые относятся только к твиттеру, также может воспринимать и ВКонтакте. В случае, как приведен выше, ВК возьмет данные из тегов, которые находятся ниже в коде.
Мета-теги og:image:type, og:image:width и og:image:height не являются обязательными, без них все будет работать, хотя в таком случае facebook может начать слать предупреждения в дебаггере программиста.
Еще один момент, на который стоит обратить внимание, это доступность картинок страницы для роботов. Если конкретная страница или только картинка будут закрыты от индексирования в файле robot.txt, то соц. сети могут не взять картинку. Пока я тестировал разные сети, проблему обнаружил с twitter-ом, он категорически отказался использовать, закрытую от индексирования, картинку. Остальные соц. сети так не «капризничали», но ни что не мешает в будущем и им начать придерживаться таких правил.
Последнее, о чем стоит знать, при подготовке страницы к репостам, это то, что все соц.сети кешируют данные из мета-тегов open graph. Чтобы обновить кеш, существуют специальные сервисы, практически у каждой, социальной сети. Мне удалось найти для ВКонтакте, Facebook и Twitter. Google plus предоставляет только сервис для валидации мета-тегов. А для Одноклассников вообще ни чего подобного найти не получилось. Если кто-нибудь знает сервисы сброса кеша для этих соц.сетей, то напишите в комментарии, я дополню статью.
И как бонус можно засчитать то, что при обычной публикации ссылки в соц. сети, данные из OG мета-тегов, также будут использованы. И на страницах пользователей будет опубликованы красивые ссылки с заголовком, описанием и картинкой. Кроме социальных сетей, open graph мета-теги используют и месседжеры – skype, telegram и тд.

Код JavaScript для шарингов

С теорией закончили, осталось только написать небольшой js для реализации появления окна, в котором пользователь сможет сделать репост на свою страницу.
Чтобы код был более универсальным, я добавил возможность задавать для шеринга любую ссылку. То есть пользователь сможет, находясь на одной странице, сделать репост другой ссылки.
Кнопки являются обычными html-элементами, это позволит стилизовать их как угодно. Пример кнопок в html:

<input value="ВКонтакте" type="button" class="share_btn" data-social="vk"> 
<input value="Facebook" type="button" class="share_btn" data-social="fb"> 
<input value="Одноклассники" type="button" class="share_btn" data-social="ok"> 
<input value="Twitter" type="button" class="share_btn" data-social="tw"> 
<input value="Google+" type="button" class="share_btn" data-social="gp"> 

<hr>

<input value="ВКонтакте c data-url" type="button" class="share_btn" data-social="vk" data-url="https://vk-book.ru/"> 
<input value="Facebook c data-url" type="button" class="share_btn" data-social="fb" data-url="https://vk-book.ru/"> 
<input value="Одноклассники c data-url" type="button" class="share_btn" data-social="ok" data-url="https://vk-book.ru/"> 
<input value="Twitter c data-url" type="button" class="share_btn" data-social="tw" data-url="https://vk-book.ru/"> 
<input value="Google+ c data-url" type="button" class="share_btn" data-social="gp" data-url="https://vk-book.ru/">

В атрибутах data-social хранится название соц.сети, в которую будет сделан репост. А в атрибуте data-url прописана ссылка для репоста. Если data-url отсутствует, то по умолчанию будет использована текущая страница.
И теперь сам js. Для его работы необходима библиотеке jQuery.

$(function(){
	// клик по кнопке шаринга
	$(".share_btn").click(function(){
		var social = $(this).data("social");
		// урл текущей страницы
		var url_share = location.href;
		// если задан атрибут data-url, то берем урл из него
		if (typeof $(this).attr("data-url") !== typeof undefined && $(this).attr("data-url") !== false) {
			url_share = $(this).data("url");		
		}
		// открываем окно для репоста
		share(social, url_share);
	});
});


/**
* Создание нового окна браузера для репоста в соц.сеть
*
* @param string social - социальная сеть, в которую будет сделан репост
* @param string url_share - url страницы, которая будет опубликована в соц.сети
*/
function share(social, url_share){
	// определяем ссылку для нужной соц.сети
	var url_soc = false;
	switch (social) {
		case "vk":
			url_soc = "https://vk.com/share.php?url="+url_share;
			break;
		case "fb":
			url_soc = "https://www.facebook.com/sharer/sharer.php?u="+url_share;
			break;
		case "ok":
			url_soc = "https://connect.ok.ru/offer?url="+url_share;
			break;
		case "tw":
			url_soc = "https://twitter.com/intent/tweet?url="+url_share;
			break;
		case "gp":
			url_soc = "https://plus.google.com/share?url="+url_share;
			break;
	}
	
	// открытие нового окна для шаринга
	if(url_soc){
		// размеры окна
		var width = 800, height = 500;
		// центруем окно
		var left = (window.screen.width - width) / 2;
		var top = (window.screen.height - height) / 2;
		// открываем окно
		social_window = window.open(url_soc, "share_window", "height=" + height + ",width=" + width + ",top=" + top + ",left=" + left);
		// устанавливаем на окно фокус
		social_window.focus();
	}
}

Послесловие

Посмотреть рабочий пример можно по ссылке: тут. А скачать исходники можно на gihub.
Через неделю будет опубликовано продолжение, в следующей статье попробуем с помощью api соц. сетей получать количество репостов для конкретной страницы.
Обновлено 27.03.2018: Продолжение статьи опубликовано: подсчет репостов в социальных сетях.

Рассказать друзьям:


Оценить:
(11 оценок, среднее: 4,09 из 5)

Кнопки репостов в социальные сети с помощью JavaScript: 10 комментариев

  1. Код простой как три копейки. Правда кнопки перед размещением желательно стилизовать под соц. Сети (цвет + буква). Вопрос. Нельзя как то получать от поисковой сети данные о количестве поделившихся пользователей?

  2. Спасибо за ссылку. Действительно все очень просто реализовано. На мой взгляд в том примере лучше вместо PHP получать данные с помощью javascript после загрузки страницы. В противном случае можно получить тормоза в работе сайта, особенно если сервера какой либо соц. сети будут перегружены.

    1. Лень переделывать) от яндекса кнопки стоят с самого создания сайта, лет 6-7 уже.

      1. А то что вы загружаете дополнительные скрипты яндекса для этих кнопок вас не смущает? Я вот потратил полчаса всего и уменьшил ваш скрипт до 5 строк примерно. И работает это просто замечательно. А главное — страницы стали грузиться быстрее, потому что до этого я формировал ссылку с гет параметрами на бэке. Как оказалось, это было плохое решение ))

    1. Статью писал в 2018 году) Телеграм тогда еще не так популярен был.
      На базе этой статьи и код, мы плагин оформили и добаивли туда поддержку телеграм и еще десятка других мессенджеров: https://www.npmjs.com/package/reposts

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

code