Более подробно о шар-кнопке ВКонтакта

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

Извиняйте. Исправляюсь. Разжую меленько, что к чему в настройке скрипта кнопки Поделиться с друзьями. Покажу, конечно, на основе WordPress.

В моем случае исправлены шаблоны заголовка (header) и одиночной страницы (single).

В заголовочный файл нужно добавить код вида:

Шаблон одиночной страницы нужно дополнить кодом вызова собственно кнопки. Тут немного по-сложнее. В документации написано следующим образом:

Кнопка публикации (функция VK.Share.button) имеет два параметра. Первый объект-параметр отвечает за то, как именно будет выглядеть публикуемая информация. Второй объект-параметр отвечает за то, как выглядит кнопка публикации.

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

Разберем происходящее построчно.

Строка 04. Вызов главной и единственной функции, формирующей кнопку. Функция приминает два параметра: первый сообщает ВКонтакту, как оформить страницу, возникающую после нажатия кнопки, второй описывает вид самой кнопки. Параметры комплексные, оформлены в фигурных скобках.

Строка 06. Параметр url передает ссылку, которой мы желаем делиться. Для её подстановки я использовал стандартную функцию wordpress’а

Строка 07. Тут я использовал вызов вордпрессной функции, возвращающей заголовок статьи, потому как по умолчанию передается title страницы, взятый из мета-тега. Но там он вместе с названием сайта, что мне не понравилось.

Строка 08. Описание. По умолчанию берется из мета-тега. Я написал свое, общее для всех ссылок.

Строка 09. В заметку о ссылке можно встроить картинку для привлечения внимания. Ради этой фичи пришлось в темпе изготовить контактно-подобную пикчу. Заодно научился работать в GIMP, так как на этой машине не было фотошопа, а ставить его было лень. По умолчанию картинка ищется в теге:

Мне было не с руки ставить в этот тег картинку, созданную спецом для ВКонтакта, поэтому сделал, как показано выше.

Строка 10. Ради этого параметра все вышеописанные параметры и задавались. noparse отключает повтор запроса к сайту-источнику при нехватки каких-либо сведений для формирования заметки, лишние нагрузки на хостинг нам ни к чему. Как вы уже поняли, можно было обойтись тегом image, а все остальные поля ВКонтакт получил бы из мета-тегов. Но такой способ меня не устроил из чисто эстетических заморочек.

Строка 13. Указан тип кнопки. Он и по умолчанию такой. Показал для целостности картины. Вот весь список типов кнопок:

  • round (значение по умолчанию) — кнопка со скругленными углами и со счетчиком ссылок.
  • round_nocount — кнопка со скругленными углами без счетчика ссылок.
  • button — кнопка с прямыми углами и со счетчиком ссылок.
  • button_nocount — кнопка с прямыми углами без счетчика ссылок.
  • link — текстовая ссылка с иконкой ВКонтакте.
  • link_noicon — текстовая ссылка без иконки.
  • custom — свой собственный код кнопки, задается в параметре text.

Строка 14. Текст, выводимый на кнопке.

Все желающие могут посмотреть, что получилось, нажав на кнопку в конце статьи. Для счастливчиков, не пораженных заразой ВКонтакта, привожу скриншот:

Удачного внедрения, товарищи.

😏 Еще? Пожалуйста

9 ответов к “Более подробно о шар-кнопке ВКонтакта”

@Дмитрий, привет!

Я так понимаю, что вы хотите вставить код контакта в шаблон, не пользуясь плагином.

Передачу описания в Контакт можно осуществить заданием мета тегов description для каждой конкретной страницы. Проще всего это сделать с помощью плагина All in One SEO Pack. В нем есть функция автоформирования описания для страниц на основе контента.

Сверьтесь с документацией по Шар кнопке. Параметр noparse должен быть опущен, либо иметь значение false

В плагине описание формируется функцией:

global $post; // доступ к глобальной переменной с информацией о данном посте
$desc = substr(esc_js($post->post_content), 0, 300);

где 300 — длина получаемого описания.

По автору записи

У меня серьезный вопрос, а как можно сделать, что бы в

description : ' '

, на движке WordPress, прописывалась информация из

То есть не в ручную приписывать desription , как это показано в статье, а автоматический , например первый абзац прописывался?
Это как у вас сделано на сайте, по нажатии кнопки «вкотакте» под постом, в текущей статье, прописывается сразу в описание
В предыдущем посте я малость схалтурил. Поставить шар-кнопку ВКонтакта, я поставил, но не упомянул о том, что воспользовался настройками
 , т.е. начало поста.
Я понимаю, что установив плагин, возможно, это автоматический там прописывается, но мне нужно без него. Не хочу лишних нагрузок на хостинг, да и просто немного недолюбливаю плагины.
Надеюсь вы меня поняли и сможете мне помочь.
Хоть это и не то что я ищу, но всё равно спасибо за данную статью.
Обсуждение закрыто.