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

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

Извиняйте. Исправляюсь. Разжую меленько, что к чему в настройке скрипта кнопки Поделиться с друзьями. Покажу, конечно, на основе 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. Текст, выводимый на кнопке.

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

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

Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (нет оценок)
Загрузка...