Как добавить кнопку Мне нравится Вконтакте в blogger?

Приветствую, друзья, на блоге SdelaemBlog.ru. Сегодня немного отойдем от привычных нам тем о wordpress и dle. И поговорим о бесплатной платформе blogger от google. Данная платформа довольно популярна среди новичков, хотя я отношусь к бесплатным платформам, как довольно к ограниченному и непонятному продукту. И именно из-за этой ограниченности и своеобразном коде могут возникнуть проблемы, в процессе достижения определенной цели.

Как добавить кнопку Мне нравится Вконтакте в blogger?

Например, в blogger есть возможность делиться новостями, с помощью некоторых социальных сетей, но в этот список не входит социальная сеть вконтакте, что не очень удобно для Рунета. А учитывая, что какая-то часть пользователей не использует предлагаемые blogger’ом социальные сети, это может быть критически плохо, так как посетитель, при всем своем желании не сможет поделиться вашей статьей со своими друзьями. Но у каждой проблемы должно быть решение. Проще говоря, нужно просто добавить кнопку «мне нравится» вконтакте непосредственно в шаблон на blogger.

Как добавить кнопку Мне нравится Вконтакте в blogger?

В первую очередь, что необходимо сделать, это подключить API вконтакте к сайту. Для этого, нужно перейти сюда. Выбрать «веб-сайт» и заполнить все необходимые поля, после чего, нажать на кнопку «подключить сайт».

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Как добавить кнопку Мне нравится Вконтакте в blogger?

Далее, для подтверждения действия, жмем на кнопку «получить код». И вводим его в поле кода подтверждения. Как добавить кнопку Мне нравится Вконтакте в blogger? После чего, нам будет предоставлена возможность настроить подключение,если это необходимо. Теперь, идем сюда, и выбираем виджет «мне нравится». Выбираем сайт, который мы только что подключили и настраиваем внешний вид и размер кнопки. И приступаем к непосредственному внедрению кнопки в blogger. Сначала переходим на главную страницу бесплатной платформы blogger. Справа от необходимого сайта кликаем по выпадающему списку «дополнительно». И выбираем «шаблон». Как добавить кнопку Мне нравится Вконтакте в blogger? Далее, необходимо нажать на кнопку «Изменить HTML».

Как добавить кнопку Мне нравится Вконтакте в blogger?

После чего, появится окно с кодом нашего шаблона, используемого на блоге blogger. В этом окошке ставим галочку «Расширить шаблоны виджета». И приступаем к редактированию самого кода. Для начала, необходимо найти закрывающий тег /head. Для этого, можно воспользоваться поиском, используя комбинацию клавиш Ctrl+F, и в появившееся поле ввести искомый объект, в нашем случае это /head. После этого, поиск подсветит нам, искомый тег. Теперь возвращаемся в виджеты вконтакте и копируем первую часть кода, которая выглядит примерно так:

1
2
3
4
5
<!-- Put this script tag to the <head> of your page -->
<script type="text/javascript" src="//vk.com/js/api/openapi.js?82"></script>
<script type="text/javascript">
 VK.init({apiId: 3491923, onlyWidgets: true});
</script>

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

Как добавить кнопку Мне нравится Вконтакте в blogger?

Что не соответствует тому, чего мы ожидали увидеть. Но эта проблема решаема. Решается она, с помощью подгонки кода под специфику blogger. Просто скопируйте вот этот код и вставьте в необходимое место. Например, я вставил код после post-footer-line post-footer-line-3:

1
2
3
4
<div expr:id='"vk_like"+data:post.id'><script type="text/javascript">
VK.Widgets.Like('vk_like<data:post.id/>', {type: 'button', pageTitle: '<data:post.title/>', pageUrl: '<data:post.url/>'});
</script>
</div>

Теперь, наша кнопка находится там, где мы и хотели.

Как добавить кнопку Мне нравится Вконтакте в blogger?

И остается последний нюанс — это внешний вид кнопки. В данном коде используется самый распространенный внешний вид кнопки «мне нравится» вконтакте. Но возможно вы выбрали другой внешний вид кнопки. Что делать в этом случае? Нужно просто изменить тип кнопки. В данном примере используется «button». Но есть и другие варианты. Чтобы изменить тип кнопки, смотрим код, который предоставляет социальная сеть вконтакте. А именно ее тип. Например, мы выбрали миниатюрную кнопку. Для этого, заменяем:

1
type: 'button'

на

1
type: 'mini'

После всех проделанных действий, кнопка мне нравится правильно встанет в наш блог на blogger. Надеюсь я смог все понятно объяснить, если же нет, то как всегда жду вопросы в комментариях. И хочу отметить, что я не сильно знаком с данной платформой, поэтому если у вас есть вопрос не относящиеся к этой теме, я навряд ли смогу помочь. На этом, у меня все. Удачи!

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 8.2/10 (20 голосов)
Автор: Михаил Веб Дата публикации: 15.03.2013