Создание Сайтов и их настройка

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

Как добавить кнопку Мне нравится Вконтакте в 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. После этого, поиск подсветит нам, искомый тег. Теперь возвращаемся в виджеты вконтакте и копируем первую часть кода, которая выглядит примерно так:

<!-- 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:

<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». Но есть и другие варианты. Чтобы изменить тип кнопки, смотрим код, который предоставляет социальная сеть вконтакте. А именно ее тип. Например, мы выбрали миниатюрную кнопку. Для этого, заменяем:

type: 'button'

на

type: 'mini'

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

Расскажи друзьям:
Поделись ссылкой:
Комментарии
  1. Михаил Веб

    @ Катарина:
    Здравствуйте, В статье все описано и это работает. Если не получается попробуйте еще раз. Куда вставлять код я так же указывал:
    Например, я вставил код после post-footer-line post-footer-line-3
    Будьте внимательны и все получится

    Ответить
  2. Катарина

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

    если вам не трудно очень-очень вас прошу ответить как и куда вставлять вторую часть ссылки
    премного благодарна!!!

    Ответить
  3. Михаил Веб

    @ Вера:
    Здравствуйте.
    По-моему в статье все расписано.
    Или я что-то не понял в Вашем вопросе?

    Ответить
  4. Вера

    подскажите, куда именно надо вставлять код, чтобы одна кнопка была под каждой статьей?
    что-то по-простому не получается! спасибо



    Ответить
  5. Михаил Веб

    @ Николай:
    Хм, к сожалению не сталкивался с такой проблемой и навряд ли смогу помочь, так как blogger подробно я не изучал, увы.

    Ответить
  6. Николай

    Михаил, все сделал по инструкции, кнопка появилась во всех постах, отлично, но в первом посте, все равно вылазеют кнопки мне нравится столько, сколько постов на странице! Помогите, пожалуйста

    Ответить
  7. Михаил Веб

    @ Николай:
    Здравствуйте.
    Если все выполнено согласно инструкции, то все должно прекрасно работать. Если же все выполнено так, как сказано в статье, возможно шаблон отличается, или же были внесены какие-нибудь изменения в саму систему blogger.

    Ответить
  8. Николай

    Добрый день!
    Подскажите, вставил ваш код чтобы кнопки не кучковались, но черт возьми все равно кучкуются…. что делать, подскажите пожалуйста.

    Ответить
  9. Валерий

    Огромное спасибо автору!!! 8)Очень хорошо объяснил — всё получилось.

    Ответить
  10. Михаил Веб

    @ ИРИНА:
    Здравствуйте.
    На могу точно сказать, но если верить ошибке, то у Вас отсутствует закрывающий тег head. Но может дело в форматировании, у меня как-то так было — кнопка «Форматировать шаблон»

    Ответить
  11. ИРИНА

    Пробую, пробую много раз. не получается! При попытки вставить в блог первую часть ссылки, Пишет:Ошибка при синтаксическом анализе XML (строка 2730, столбец 61): The element type «head» must be terminated by the matching end-tag «»

    Подскажите, пожалуйста, что не так.

    Ответить
  12. vs

    @ Зоя:
    я так же)) 2 часа лома , а оказывается был это чудо сайт :)

    Ответить
  13. Михаил Веб

    @ Маргарита Заворотченко:
    Не совсем правильно выразился. Кнопки нет. То есть она не подключена. По крайней мере у меня так. Вот, что я примерно вижу вместо кнопки:
    http://sdelaemblog.ru/knopka-vkontakte-blogger/#comment-7857

    Ответить
  14. Маргарита Заворотченко

    @ Михаил Веб:
    как не работает? Когда я нажимаю-работает.

    Ответить
  15. Михаил Веб

    @ Ilja:
    Ну здесь, я увы, ничем не могу помочь :-) Возможно в настройках, что-нибудь подобное тоже есть? :-)

    Ответить
  16. Ilja

    @ Михаил Веб:
    Не из-за ссылок, сам разобрался буквально в тот же день, что и запостил вопрос))) Надо было просто добавить ещё один базовый домен в настройки — это оказывается возможно. Единственное, что не нравится — когда лайкаешь на «ком» странице, лайк не переходит на «ру» и наоборот.

    Ответить
  17. Михаил Веб

    @ Ilja:
    Пожалуйста.
    Все работает и на RU, и на COM. Я так понимаю проблема решена, или вопрос был с целью оставить ссылки?

    Ответить
  18. Михаил Веб

    @ Sandra W:
    Пожалуйста.
    Но кнопка У Вас не работает :-( По крайней мере я получаю такую ошибку: invalid domain

    Ответить
  19. Ilja

    Добрый день. Спасибо за статью, есть вопрос… Если прописать в настройках мой сайт chessmanual.blogspot.com , то всё фурычит. Но когда люди заходят на chessmanual.blogspot.RU , то выскакивает invalid domain. Что в принципе логично. Можно ли как-то решить вопрос, чтобы кнопка работала на всех зеркалах?

    Ответить
  20. Sandra W

    Большое человеческое вам спасибо! Абсолютно всё внятно, а главное — действенно. А то я замучилась со скопищем кнопок в одном месте))

    Ответить

Нажимая на кнопку "Комментировать" Вы согласшаетесь с условиями политики конфиденциальности

Проверка комментариев включена. Прежде чем Ваши комментарии будут опубликованы пройдет какое-то время.

Навигация по статье