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 и вставляем наш код туда. Сохраняемся и идем любоваться в блог на результаты наших трудов.

Хм… Песня сегоднешнего дня у меня такая - привязалась и не отпускает:

1 комментарий :

  1. О господи, очень полезно, но пока для меня и очень сложно(это я про часть с вставлением кода).

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