Создание кнопки «Поделиться» в VK со счетчиком

ВКонтакте, HTTP API / 2 комментария

Идея поста возникла у меня в результате переезда со стандартных социальных кнопок «Поделиться» на собственные кастомные. Основная причина конечно — это производительность сайта, у меня даже есть старый-престарый пост, в котором я описываю, почему не стоит использовать стандартные кнопки соц. сетей, и этот пост до сих пор актуален!

Пример кнопки — сразу под постом, перед формой подписки. Вы можете сами убедиться в рабочести моей кнопки, только обратите внимание — для ускорения загрузки страниц мой сайт кэширует счетчик кнопки на 2 часа. То есть после того, как вы поделились постом во вконтакте, вам нужно подождать до 2 часов (максимум), чтобы счетчик изменил своё значение.

Шаг 1. Создание HTML кнопки.

Даже jQuery нам не понадобится, просто вставляете код в то место, в котором хотите отобразить кнопку. Как вы видите, по сути тут чистый HTML и чуть-чуть JavaScript, причем если его удалить, то это будет просто кнопка-ссылка, но в то же время счетчик будет работать как полагается (WordPress или чистый PHP обязателен).

<!--?php $permalink = get_permalink( $post_id ); // в этой переменной укажите ссылку на пост $title = get_the_title( $post_id ); // тут укажите заголовок $description = get_the_excerpt( $post_id ); // описание $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id( $post_id) ); $thumbnail = $thumbnail[0]; // URL картинки ?-->
<a class="misha-vk" title="Поделиться во Вконтакте" href="http://vk.com/share.php?url=<?php echo urlencode( $permalink ) ?>&title=<?php echo urlencode( $title ) ?>&description=<?php echo urlencode( $description ) ?>&image=<?php echo urlencode( $thumbnail ) ?>&noparse=true" target="_parent" rel="noopener">
	Поделиться <!--?php echo get_vk_counts_wp( $permalink, $post_id ) ?-->
</a>

Строчка 2 — в этой переменной укажите URL, на котором находится кнопка «Поделиться», если у вас WordPress, то можете использовать функцию get_permalink().
3 — заголовок или название страницы, опять-таки для WordPress его можно получить функцией get_the_title().
4 — короткое описание.
5 — URL изображения-миниатюры, которое должно будет отобразиться во вконтакте. В коде же я показал пример для WP, основываясь на его функционале миниатюр — сначала я получил ID миниатюры функцией get_post_thumbnail_id(), а затем, уже при помощи wp_get_attachment_image_src(), на основе этого ID, получил URL картинки.
8 — да, именно на этой строчке мы и получаем количество репостов из API, в примере используется функция из второго способа (для WordPress), но вы разумеется можете воспользоваться первым из рассмотренных ниже методов.

Шаг 2. Получение количества репостов через API вконтакте

Сейчас я покажу два простейших способа получения количества репоста той или иной страницы. Вы спокойно можете использовать тот способ, который вам нравится (обратите внимание — второй способ подойдёт только для WP) и вам совсем не обязательно разбираться в том, как работает код внутри функций — просто вставляете их к себе на сайт и используете.

Способ 1. Через cURL

Этот способ хорош тем, что его вы можете использовать на своём сайте вне зависимости от того, какая CMS у вас стоит — это может быть WordPress, а может быть и вообще какой-нибудь самописный движок.

function get_vk_counts_curl( $url ) {
 
	$api_url = 'https://vk.com/share.php?act=count&index=1&url=' . $url;
 
	$vk_connect = curl_init();
	curl_setopt( $vk_connect, CURLOPT_URL, $api_url );
 
	curl_setopt( $vk_connect, CURLOPT_RETURNTRANSFER, 1 ); // вернуть результат, а не выводить
	curl_setopt( $vk_connect, CURLOPT_TIMEOUT, 20 );
 
	$return = curl_exec( $vk_connect );
	curl_close( $vk_connect ); // закрываем соединение
 
	return intval( str_replace( array('VK.Share.count(1, ',');'),'',$return) );
}

Разбор по строчкам.

1 — при использовании метода получения количества репостов через cURL вам достаточно указать лишь URL страницы, на котором находится кнопка.
3 — возможно тут у вас возникнет вопрос, что такое index=1, у меня этот вопрос тоже возник и я задал его агенту поддержки вконтакте. И вот ответ:

Одним словом мне просто мягко сказали, что это не моё дело. Ну и ладно.
14 — возможно это не самый оптимальный способ извлечения количества репостов из полученного результата, если у вас есть идеи, как это можно сделать лучшим образом, буду рад, если поделитесь в комментариях.

Способ 2. Через WordPress HTTP API

Ну думаю тут ясно, что этот способ только для WordPress. А это значит, что код с большой долей вероятности отправится в functions.php вашей текущей темы.

function get_vk_counts_wp( $url, $post_id ) {
	$cache_key = 'misha_shares_vk' . $post_id;
	$count = get_transient( $cache_key ); // попробуем сначала вытащить значение из кэша WP
 
	if ( $count === false ) {
		$response = wp_remote_get('https://vk.com/share.php?act=count&index=1&url=' . $url );
 
		$body = json_decode( $response['body'] );
		$count = intval( str_replace( array('VK.Share.count(1, ',');'),'',$response['body'] ) );
 
		set_transient( $cache_key, $count, 3600 ); // сохраняем в кэш на час
	}
	return $count;
}

2-5 и 11 — так как я не хочу, чтобы подключение к VK API лишний раз нагружало страницы моего сайта, то я кэширую число репостов на час.

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

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.