Кнопка Like от ВКонтакте для блога ~ SEO простым языком

Кнопка Like от ВКонтакте для блога

Доброго времени суток, уважаемые читатели. Когда я писала статью про кнопки-счетчики социальных сетей, на тот момент у социальное сети Вконтакте не было кнопки в форме квадрата, горизонтальные кнопки были, а вот в виде блока – не было.

По крайней мере я смотрела несколько раз и так ее не обнаружила. И вот сегодня, с легкой подачи постоянного читателя Сотника Юрия, выяснилось, что такая кнопка все же есть (наверно, появилась недавно).

Юрий попытался самостоятельно установить эту кнопку, но в итоге обратился за помощью. И как оказалось, на сайте Вконтакта не очень понятно описано то, как ее можно установить в свой блог. Поэтому я подумала, что лучше подробней описать весь процесс.

Я так поняла, что основная сложность установки кнопки связана с тем, что на сайте социальной сети не совсем внятно описан процесс получения правильного кода кнопки, т.к. в каждый код вставляется индивидуальный apiID. Да и сам код выдается, как единый, а на самом деле его необходимо установить в разные места шаблона. Но перейду к делу.

Итак, для того, чтобы установить кнопку-счетчик Like от социальной сети Вконтакте, переходим на эту страницу.

Перед вами форма для получения кнопки. Визуально форма разделена на 2 части.

Прежде, чем получить код кнопки, необходимо указать название своего блога, ввести свой адрес (поле Основной домен сайта заполнится автоматически) и нажать кнопку Сохранить.

После этого выбираете вариант кнопки и название. И только после этого код будет готов к установке. Но и тут нужно проявить внимательность. Код, который нужно установить, зрительно разделен на три части. Вначале копируем первые 2 части

Самая первая строчка – это комментарий, в котором написано, что этот код необходимо вставить в заголовок страницы, его можно не копировать. Открываем Дизайн – Изменить HTML. Скопированный код вставляем в шаблон перед тегом </head>.
Остается третья часть кода.

Еще по теме Виджет комментариев от Вконтакте

Его то и нужно вставить непосредственно в то место, где вы хотите, чтобы находилась кнопка. Чаще всего подобные вещи мы устанавливаем в шаблоне после строки <data:post.body/>. Не забудьте перед вставкой поставить галочку Расширить шаблоны виджета. Как и в варианте выше, комментарий можно не копировать. Кнопка готова!

[ads1]На всякий случай уточню для тех, кто устанавливал кнопки счетчики, как у меня слева от сообщений блога. Саму установку я описывала в этой статье. Для такого блока кнопок необходимо задать вариант кнопки – Миниатюрная кнопка, счетчик вверху.

Как помните, я обращала внимание, что кнопку необходимо установить в контейнер:

<div class=’float’>В этом месте должен располагаться код кнопки</div>

В этот контейнер вставляем самый последний код, и уже в таком виде устанавливаем в шаблон блога туда, где уже установлены кнопки.
Теперь у вас в блоге есть кнопка Нравится от ВКонтакта. Удачи вам.

Екатерина Михайлова

Next Рекламная сеть Яндекса и Яндекс Директ »

Previous « Красивое оформление статей в блоге Blogger/Blogspot

View Comments

Tanka says:

at

Спасибо! Как же удобно стало с блоками тематическими =)
SwaEgo says:

at

Вот бы ещё кнопку РуТвита замутить вот сюда "Кнопки социальных сетей для блога Blogger Blogspot"
Поискал,не нашёл.
Олег Олегыч says:

at

Делаю все строго по инструкции, а не выходит... Что я делаю не так?
Вроде сохраняется нормально, не ругается, но визуально ничего не меняется...
SEO-Дилетант'ка says:

at

Олег Олегыч, вы же понимаете, что я не вижу ваших действий, и поэтому мне сложно сказать, что именно вы делаете не так. Во-первых, посмотрите внимательно, в полученном коде на сайте вкантакта у вас есть в строке справа от apiId: цифры? Точно ли вы нажимаете кнопку Сохранить? И второе, скажите, вы в какое место в шаблоне вставляете кнопку?
SEO-Дилетант'ка says:

at

Смотрите, в коде, который дает вконтакте есть два комментария. комментарии выделяются .
Все, что находится до второго комментария, вставляете выше . Прям нашли выше него ставите.
Гость says:

at

Вопрос:
В вашем примере есть следующая строка:
VK.init({apiId: 2026474, onlyWidgets: true});
У меня при генерации кнопки ВКонтакте она выглядит как:
VK.init({apiId: API_ID, onlyWidgets: true});
кнопка на странице не отображается совсем
при вставке цифр из вашего примера вместо кнопки отображается текст и индикатор загрузки.
Как быть?
SEO-Дилетант'ка says:

at

У меня при генерации кнопки ВКонтакте - в том то и дело, что генерации не происходит. А не происходит потому, что вы не нажимаете кнопку "сохранить", предварительно указав название своего сайта. Прочитайте статью внимательней, об этом написано.
Гость says:

at

Статью читал внимательно;) , кнопку "сохранить" нажимал.
Есть ещё нюанс: адрес сайта вставлял в форму для кнопки копи-пастом из адресной строки браузера. При этом в конце автоматически добавляется /. Убрал слэш и всё получилось как нужно.
Спасибо за статью. И за блог в целом.
SEO-Дилетант'ка says:

at

Значит, дело в слеше:). Спасибо, будем знать. Думаю, для многих это будет актуально.
Oleg Golovkov says:

at

У меня все получилось но проблема в том что, на странице 8 сообщений и 8 значков мне нравятся находятся один под другим, не подскажете как здесь поступить?