Сегодня мы рассмотрим ряд интересных виджетов, которые позволяют более тесно связать блог с социальной сетью Вконтакте. Наверняка почти у каждого есть своя группа или страничка ВКонтакте и хочется, чтобы друзья имели возможность комментировать сообщения в блоге или делиться Вашими новостями, не использую Google-аккаунт или анонимного пользователя, которого очень часто отключают. Все исходные данные для виджетов находтся на странице http://vk.com/developers.php Пока что предлагается 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
После того, как все настроили необходимо обратиться к полю с названием "Код для вставки". Для большинства виджетов он состоит из двух частей:
- первая часть начинается строкой <!-- Put this script tag to the <head> of your page --> и предназначена для размещения в шаблоне в разделе заголовка, который ограничивается тэгами <head></head> (подробнее про тэги можно прочитать тут)
- вторая часть начинается вариациями строки <!-- 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 и вставляем наш код туда. Сохраняемся и идем любоваться в блог на результаты наших трудов.
Спасибо, все получилось!:)
ОтветитьУдалитьспасиииибо ! так понятно все написали, что я сама смогла с этим недевичьим справиться!!! крутотенюшки))
ОтветитьУдалитьhttp://daryalady.blogspot.ru/ - хвастаюсь результатом! только вот с http://vk.com/app3835408 этим приложением что теперь делать? для чего оно мне нужно?)
напишите мне плиз darya@live.com или в комментарии к любому моему посту))
спасибо огрооомное еще раз! :-*
))) Оно нужно для внесения изменения в настройки, если это необходимо,
УдалитьСпасибо огромное,все получилось.Очень полезно.Хотелось бы еще добавить"мне нравится" или авторизация через ВК,но,боюсь вставить чтонить не туда )))))
ОтветитьУдалитьВсе абсолютно по образу и подобию делается, только код другой вставляется и все. Бояться не нужно. Можно сделать копию блога или тренироваться на тестовом блоге.
УдалитьА я тэг head не нашла, нашла на строке 702 header . Это не тоже самое?
ОтветитьУдалитьНет не то же самое. Посмотрите рисунок 5, строка 4 - там как раз тэг head приведен.
УдалитьОй, спасибо!!!!
ОтветитьУдалитьСпасибище огромное! Только вчера искала информацию на эту тему, но везде так заумно написано, как будто мы программисты, а здесь все понятно.
ОтветитьУдалитьа у меня шаблон не сохраняется... висит неактивная кнопка "сохранение"
ОтветитьУдалитьМожно сначала почистить кэш и куки браузера и попробовать после этого. Еще можно выбрать кнопку "Форматировать шаблон" вместо "Изменить шаблон", внести необходимые изменения.
УдалитьСупер!Всё получилось!Спасибо Вам!
ОтветитьУдалитьСпасибо! Комментарии вставила! А как вставить кнопку "Мне нравится"? В какие строки?:)
ОтветитьУдалитьДевочки, помогите, у меня теперь в самом верху блога какая то ошибка весит:((( а вставить виджет комментариев так и не получилось:( я уже тыкала, куда только можно!
ОтветитьУдалитьhttp://nikitinaelizaveta.blogspot.ru/
TEMPLATE ERROR: Unknown runtime binding: else in widget
Удалитьвот что писал мне в шапке блога (сейчас изменила дизайн блога, всё убралось). Но как все таки поставить виджет не знаю, помогите!
спасибо! вставила и like и comments. Вот только они друг на друге висят, как бы расстояние между ними увеличить?... www.noviivegan.blogspot.com
ОтветитьУдалитьбольшое спасибо за доходчивое описание!
ОтветитьУдалитьВсе замечательно работает, спасибо!
ОтветитьУдалитьСпасибо!
ОтветитьУдалитьЭто самая лучшая в сети на эту тему!!!
Спасибо большое за подсказки! В сети множество подобных публикаций, но только благодаря этой сделала всё за несколько минут)
ОтветитьУдалитьБольшое спасибо!!!
ОтветитьУдалитьСпасибо. Получилось.
ОтветитьУдалитьCпасибо, уж думал возвращаться обратно к WP. Хорошо изложено, понятно, пошагово!
ОтветитьУдалитьУведомления о комментариях не приходят. Можно как то настроить?
ОтветитьУдалить