22 августа 2013 г.

Виджеты ВКонтакте для blogger'a

Сегодня мы рассмотрим ряд интересных виджетов, которые позволяют более тесно связать блог с социальной сетью Вконтакте. Наверняка почти у каждого есть своя группа или страничка ВКонтакте и хочется, чтобы друзья имели возможность комментировать сообщения в блоге или делиться Вашими новостями, не использую Google-аккаунт или анонимного пользователя, которого очень часто отключают. Все исходные данные для виджетов находтся на странице http://vk.com/developers.php Пока что предлагается 7 различных виджетов:

  1. Комментарии
  2. Сообщества
  3. "Мне нравится"
  4. Рекомендации
  5. Опросы
  6. Авторизация
  7. Подписаться на автора
Все виджеты достаточно понятно описаны. Мы с Вами рассмотрим более подробно лишь некоторые из них, а также то, как внедрить эти виджеты в наш блог.
Рассмотрим внедрение виджета "Комментарии". Этот виджет предоставляет большие возможности по комментированию Ваших сообщений в блоге. Все эти возможности можно прочитать на странице виджета под заголовком "Все преимущества виджета для комментариев ВКонтакте".
Для начала необходимо подключить приложения API вконтакте к блогу. Сделать это можно следующим образом. Авторизоваться Вконтакте и перейти по следующей ссылке: http://vk.com/editapp?act=create&site=1. Перед нами появится форма, которую нам необходимо внимательно заполнить (рисунок 1). 
Рисунок 1

ВНИМАНИЕ: когда вводим базовый домен необходимо указать свой национальный домен! То есть, я территориально нахожусь в России, и национальный домен у нас .ru, следовательно я пишу blog-inventame.blogspot.ru. А если бы я жила в Германии с национальным доменом .de, то вводила бы blog-inventame.blogspot.de и т.д. По умолчанию блоггер в адресной строке преобразует окончание адреса блога в национальный домен.
После этого жмем кнопку "Подключить сайт" и на телефон придет бесплатная СМС с кодом подтверждения. Вводим код и переходим на следующую страницу, где редактируем описание блога для соц.сети (рисунок 2)

Рисунок 2

При этом в списке приложений ВКонтакте появится ссылка на приложение с названием "Сайт на blogger".
Итак, половина дела сделана и нам необходимо вернуться на страничку с перечнем  виджетов: http://vk.com/developers.php
Выбираем виджет "Комментарии", который позволит отображать под сообщением в блоге вот такую форму:
Рисунок 3

Здесь разработчики более или менее постарались и нам необходимо просто заполнить представленную форму. Опять же основной домен сайта заполняем корректно (одна из основных ошибок - неверный базовый домен и виджеты не работают).
Я выбрала минимальное количество одновременно отображаемых комментариев и выключила возможность вставки медиаданных, чтобы лишний раз не перегружать страничку.

Рисунок 4

После того, как все настроили необходимо обратиться к полю с названием "Код для вставки". Для большинства виджетов он состоит из двух частей:
  1. первая часть начинается строкой <!-- Put this script tag to the <head> of your page --> и предназначена для размещения в шаблоне в разделе заголовка, который ограничивается тэгами <head></head> (подробнее про тэги можно прочитать тут)
  2. вторая часть начинается вариациями строки <!-- Put this div tag to the place, where the Comments block will be --> и последующий код необходимо размещать в том месте, где необходимо разместить виджет.
Теперь необходимо скопировать первую часть и отправится в блоггер, выбрать Шаблон->Изменить HTML->Изменить шаблон (рисунок 5). 


Рисунок 5

Теперь в шаблоне блога нужно найти строку с закрывающим тэгом </head> это приблизительно 790-800я строка (не забывайте пользоваться поиском по странице!!!) и перед этой строкой вставить наш скопированный код (первую!! часть). Сохранились и продолжаем дальше. Теперь копируем вторую часть кода и ее необходимо разместить в шаблоне в том месте, которое отвечает за форматирование страницы с сообщением. Для этого необходимо найти строку с id='comment_picker' (рисунок 6)

Рисунок 6

У меня она под номером 1290 - приблизительно в этом месте и нужно искать (у меня поиск по странице не всегда работает корректно). Обратите внимание на черный треугольник рядом с номером страницы и - он скрывает часть строк кода, которые обозначаются на строке в виде троеточия. Нам необходимо нажать на него, чтобы отобразить скрытые строки. А затем вставить вторую часть кода сразу после найденной нами. То есть на строку 1291. В результате в шаблоне будет вот такой кусочек кода

Рисунок 7

Сохраняемся и идем смотреть в блог на результаты работы.  Если все сделали правильно, то под сообщением будет две формы комментариев.
Рисунок 8

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

Рисунок 9

Отправляемся в блоггер и выбираем уже привычный многим Дизайн-->Добавить гаджет-->HTML/JavaScript и вставляем наш код туда. Сохраняемся и идем любоваться в блог на результаты наших трудов.


24 комментария :

  1. спасиииибо ! так понятно все написали, что я сама смогла с этим недевичьим справиться!!! крутотенюшки))
    http://daryalady.blogspot.ru/ - хвастаюсь результатом! только вот с http://vk.com/app3835408 этим приложением что теперь делать? для чего оно мне нужно?)
    напишите мне плиз darya@live.com или в комментарии к любому моему посту))

    спасибо огрооомное еще раз! :-*

    ОтветитьУдалить
    Ответы
    1. ))) Оно нужно для внесения изменения в настройки, если это необходимо,

      Удалить
  2. Спасибо огромное,все получилось.Очень полезно.Хотелось бы еще добавить"мне нравится" или авторизация через ВК,но,боюсь вставить чтонить не туда )))))

    ОтветитьУдалить
    Ответы
    1. Все абсолютно по образу и подобию делается, только код другой вставляется и все. Бояться не нужно. Можно сделать копию блога или тренироваться на тестовом блоге.

      Удалить
  3. А я тэг head не нашла, нашла на строке 702 header . Это не тоже самое?

    ОтветитьУдалить
    Ответы
    1. Нет не то же самое. Посмотрите рисунок 5, строка 4 - там как раз тэг head приведен.

      Удалить
  4. Спасибище огромное! Только вчера искала информацию на эту тему, но везде так заумно написано, как будто мы программисты, а здесь все понятно.

    ОтветитьУдалить
  5. а у меня шаблон не сохраняется... висит неактивная кнопка "сохранение"

    ОтветитьУдалить
    Ответы
    1. Можно сначала почистить кэш и куки браузера и попробовать после этого. Еще можно выбрать кнопку "Форматировать шаблон" вместо "Изменить шаблон", внести необходимые изменения.

      Удалить
  6. Супер!Всё получилось!Спасибо Вам!

    ОтветитьУдалить
  7. Спасибо! Комментарии вставила! А как вставить кнопку "Мне нравится"? В какие строки?:)

    ОтветитьУдалить
  8. Девочки, помогите, у меня теперь в самом верху блога какая то ошибка весит:((( а вставить виджет комментариев так и не получилось:( я уже тыкала, куда только можно!
    http://nikitinaelizaveta.blogspot.ru/

    ОтветитьУдалить
    Ответы
    1. TEMPLATE ERROR: Unknown runtime binding: else in widget
      вот что писал мне в шапке блога (сейчас изменила дизайн блога, всё убралось). Но как все таки поставить виджет не знаю, помогите!

      Удалить
  9. спасибо! вставила и like и comments. Вот только они друг на друге висят, как бы расстояние между ними увеличить?... www.noviivegan.blogspot.com

    ОтветитьУдалить
  10. большое спасибо за доходчивое описание!

    ОтветитьУдалить
  11. Все замечательно работает, спасибо!

    ОтветитьУдалить
  12. Спасибо!
    Это самая лучшая в сети на эту тему!!!

    ОтветитьУдалить
  13. Спасибо большое за подсказки! В сети множество подобных публикаций, но только благодаря этой сделала всё за несколько минут)

    ОтветитьУдалить
  14. Cпасибо, уж думал возвращаться обратно к WP. Хорошо изложено, понятно, пошагово!

    ОтветитьУдалить
  15. Уведомления о комментариях не приходят. Можно как то настроить?

    ОтветитьУдалить