Как добавить виджет вконтакте на blogger ~ MANNEVO

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

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

Комментарии

Сообщества

"Мне нравится"

Рекомендации

Опросы

Авторизация

Подписаться на автора

Все виджеты достаточно понятно описаны. Мы с Вами рассмотрим более подробно лишь некоторые из них, а также то, как внедрить эти виджеты в наш блог.

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

Для начала необходимо подключить приложения API вконтакте к блогу. Сделать это можно следующим образом. Авторизоваться Вконтакте и перейти по следующей ссылке: http://vk.com/editapp?act=create&site=1. Перед нами появится форма, которую нам необходимо внимательно заполнить (рисунок 1).

Рисунок 1

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

После этого жмем кнопку "Подключить сайт" и на телефон придет бесплатная СМС с кодом подтверждения. Вводим код и переходим на следующую страницу, где редактируем описание блога для соц.сети (рисунок 2)

Рисунок 2

При этом в списке приложений ВКонтакте появится ссылка на приложение с названием "Сайт на blogger".

Итак, половина дела сделана и нам необходимо вернуться на страничку с перечнем виджетов: http://vk.com/developers.php

Выбираем виджет "Комментарии", который позволит отображать под сообщением в блоге вот такую форму:

Рисунок 3

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

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

Рисунок 4

После того, как все настроили необходимо обратиться к полю с названием "Код для вставки". Для большинства виджетов он состоит из двух частей:

первая часть начинается строкой  и предназначена для размещения в шаблоне в разделе заголовка, который ограничивается тэгами <head></head>

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

Теперь необходимо скопировать первую часть и отправится в блоггер, выбрать Шаблон->Изменить HTML->Изменить шаблон (рисунок 5).

Рисунок 5

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

Рисунок 6

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

Рисунок 7

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

Рисунок 8

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

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