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

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

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

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

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

Этот код доступен только для зарегистрированных пользователей.

Регистрация Войдите на сайт, если вы уже зарегистрированы »

  • Строчка 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 — при использовании метода получения количества репостов через cURL вам достаточно указать лишь URL страницы, на котором находится кнопка.
  • 3 — возможно тут у вас возникнет вопрос, что такое index=1, у меня этот вопрос тоже возник и я задал его агенту поддержки вконтакте. И вот ответ:
    Опыт общения со службой поддержки вконтакте.

    Одним словом мне просто мягко сказали, что это не моё дело. Ну и ладно.

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

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

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

Этот код доступен только для зарегистрированных пользователей.

Регистрация Войдите на сайт, если вы уже зарегистрированы »

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

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

Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Ещё немного про VK

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Привет, ну либо через Javascript, либо через save_post хук, скорее второе.

  • Дмитрий: Миша, а возможно ли задать условие, что если существует meta_key, то соответствующая таксономия будет нажата в метабоксе...

  • Дмитрий: Спасибо за подсказку. Получилось передать сразу нужный meta_key через value в hidden input.

  • Артем: Вот про сей хук я запамятовал)) Спасибо!

  • Миша: Думаю, что $mail_2 - пустая переменная по той простой причине, что $post->ID не существует. Глобальная переменная $po...