Приветствую, друзья, на блоге SdelaemBlog.ru. Сегодня немного отойдем от привычных нам тем о wordpress и dle. И поговорим о бесплатной платформе blogger от google. Данная платформа довольно популярна среди новичков, хотя я отношусь к бесплатным платформам, как довольно к ограниченному и непонятному продукту. И именно из-за этой ограниченности и своеобразном коде могут возникнуть проблемы, в процессе достижения определенной цели.
Например, в blogger есть возможность делиться новостями, с помощью некоторых социальных сетей, но в этот список не входит социальная сеть вконтакте, что не очень удобно для Рунета. А учитывая, что какая-то часть пользователей не использует предлагаемые blogger’ом социальные сети, это может быть критически плохо, так как посетитель, при всем своем желании не сможет поделиться вашей статьей со своими друзьями. Но у каждой проблемы должно быть решение. Проще говоря, нужно просто добавить кнопку «мне нравится» вконтакте непосредственно в шаблон на blogger.
Как добавить кнопку Мне нравится Вконтакте в blogger?
В первую очередь, что необходимо сделать, это подключить API вконтакте к сайту. Для этого, нужно перейти сюда. Выбрать «веб-сайт» и заполнить все необходимые поля, после чего, нажать на кнопку «подключить сайт».
Далее, для подтверждения действия, жмем на кнопку «получить код». И вводим его в поле кода подтверждения. После чего, нам будет предоставлена возможность настроить подключение,если это необходимо. Теперь, идем сюда, и выбираем виджет «мне нравится». Выбираем сайт, который мы только что подключили и настраиваем внешний вид и размер кнопки. И приступаем к непосредственному внедрению кнопки в blogger. Сначала переходим на главную страницу бесплатной платформы blogger. Справа от необходимого сайта кликаем по выпадающему списку «дополнительно». И выбираем «шаблон». Далее, необходимо нажать на кнопку «Изменить HTML».
После чего, появится окно с кодом нашего шаблона, используемого на блоге blogger. В этом окошке ставим галочку «Расширить шаблоны виджета». И приступаем к редактированию самого кода. Для начала, необходимо найти закрывающий тег /head. Для этого, можно воспользоваться поиском, используя комбинацию клавиш Ctrl+F, и в появившееся поле ввести искомый объект, в нашем случае это /head. После этого, поиск подсветит нам, искомый тег. Теперь возвращаемся в виджеты вконтакте и копируем первую часть кода, которая выглядит примерно так:
<!-- 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. Просто скопируйте вот этот код и вставьте в необходимое место. Например, я вставил код после post-footer-line post-footer-line-3:
<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>
Теперь, наша кнопка находится там, где мы и хотели.
И остается последний нюанс — это внешний вид кнопки. В данном коде используется самый распространенный внешний вид кнопки «мне нравится» вконтакте. Но возможно вы выбрали другой внешний вид кнопки. Что делать в этом случае? Нужно просто изменить тип кнопки. В данном примере используется «button». Но есть и другие варианты. Чтобы изменить тип кнопки, смотрим код, который предоставляет социальная сеть вконтакте. А именно ее тип. Например, мы выбрали миниатюрную кнопку. Для этого, заменяем:
type: 'button'
на
type: 'mini'
После всех проделанных действий, кнопка мне нравится правильно встанет в наш блог на blogger. Надеюсь я смог все понятно объяснить, если же нет, то как всегда жду вопросы в комментариях. И хочу отметить, что я не сильно знаком с данной платформой, поэтому если у вас есть вопрос не относящиеся к этой теме, я навряд ли смогу помочь. На этом, у меня все. Удачи!
@ Катарина:
Здравствуйте, В статье все описано и это работает. Если не получается попробуйте еще раз. Куда вставлять код я так же указывал:
Например, я вставил код после post-footer-line post-footer-line-3
Будьте внимательны и все получится
Доброй ночи!
спасибо Вам за информацию, огромное, но есть один вопрос…
первую часть я сделала и вроде все вставила и сохранила
а вот со второй частью не получается совсем(( не появляется кнопка
а мне оооооочень нужно!!
я не понимаю куда вставлять вторую часть
или может у меня просто не получается так как есть кнопки соцсетей
я прошу прощения, но я совсем-совсем новичек а мне так нужно сделать мой блог доступным для всех…
если вам не трудно очень-очень вас прошу ответить как и куда вставлять вторую часть ссылки
премного благодарна!!!
@ Вера:
Здравствуйте.
По-моему в статье все расписано.
Или я что-то не понял в Вашем вопросе?
подскажите, куда именно надо вставлять код, чтобы одна кнопка была под каждой статьей?
что-то по-простому не получается! спасибо
@ Николай:
Хм, к сожалению не сталкивался с такой проблемой и навряд ли смогу помочь, так как blogger подробно я не изучал, увы.
Михаил, все сделал по инструкции, кнопка появилась во всех постах, отлично, но в первом посте, все равно вылазеют кнопки мне нравится столько, сколько постов на странице! Помогите, пожалуйста
@ Николай:
Здравствуйте.
Если все выполнено согласно инструкции, то все должно прекрасно работать. Если же все выполнено так, как сказано в статье, возможно шаблон отличается, или же были внесены какие-нибудь изменения в саму систему blogger.
Добрый день!
Подскажите, вставил ваш код чтобы кнопки не кучковались, но черт возьми все равно кучкуются…. что делать, подскажите пожалуйста.
Огромное спасибо автору!!! 8)Очень хорошо объяснил — всё получилось.
@ ИРИНА:
Здравствуйте.
На могу точно сказать, но если верить ошибке, то у Вас отсутствует закрывающий тег head. Но может дело в форматировании, у меня как-то так было — кнопка «Форматировать шаблон»
Пробую, пробую много раз. не получается! При попытки вставить в блог первую часть ссылки, Пишет:Ошибка при синтаксическом анализе XML (строка 2730, столбец 61): The element type «head» must be terminated by the matching end-tag «»
Подскажите, пожалуйста, что не так.
@ Зоя:
я так же)) 2 часа лома , а оказывается был это чудо сайт :)
@ Маргарита Заворотченко:
Не совсем правильно выразился. Кнопки нет. То есть она не подключена. По крайней мере у меня так. Вот, что я примерно вижу вместо кнопки:
http://sdelaemblog.ru/knopka-vkontakte-blogger/#comment-7857
@ Михаил Веб:
как не работает? Когда я нажимаю-работает.
@ Ilja:
Ну здесь, я увы, ничем не могу помочь :-) Возможно в настройках, что-нибудь подобное тоже есть? :-)
@ Михаил Веб:
Не из-за ссылок, сам разобрался буквально в тот же день, что и запостил вопрос))) Надо было просто добавить ещё один базовый домен в настройки — это оказывается возможно. Единственное, что не нравится — когда лайкаешь на «ком» странице, лайк не переходит на «ру» и наоборот.
@ Ilja:
Пожалуйста.
Все работает и на RU, и на COM. Я так понимаю проблема решена, или вопрос был с целью оставить ссылки?
@ Sandra W:
Пожалуйста.
Но кнопка У Вас не работает :-( По крайней мере я получаю такую ошибку: invalid domain
Добрый день. Спасибо за статью, есть вопрос… Если прописать в настройках мой сайт chessmanual.blogspot.com , то всё фурычит. Но когда люди заходят на chessmanual.blogspot.RU , то выскакивает invalid domain. Что в принципе логично. Можно ли как-то решить вопрос, чтобы кнопка работала на всех зеркалах?
Большое человеческое вам спасибо! Абсолютно всё внятно, а главное — действенно. А то я замучилась со скопищем кнопок в одном месте))