Собственная HTML+JavaScript кнопка «Поделиться» во вконтакте для сайта со счетчиком. 2 способа получения количества репостов, используя VK API

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

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

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

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

1
2
3
4
5
6
7
8
9
<?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 href="http://vk.com/share.php?url=<?php echo urlencode( $permalink ) ?>&amp;title=<?php echo urlencode( $title ) ?>&amp;description=<?php echo urlencode( $description ) ?>&amp;image=<?php echo urlencode( $thumbnail ) ?>&amp;noparse=true" onclick="window.open(this.href, this.title, \'toolbar=0, status=0, width=548, height=325\'); return false" title="Поделиться во Вконтакте" target="_parent" class="misha-vk">
	Поделиться <span><?php echo get_vk_counts_wp( $permalink, $post_id ) ?></span>
</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, а может быть и вообще какой-нибудь самописный движок.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 вашей текущей темы.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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 году. С 2014 года меня можно встретить на WordCamp — официальной конфе по WordPress, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills.

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