Как вставить виджет группы вконтакте на сайт

Как вставить виджет группы вконтакте на сайт

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

Пригодится такой виджет для того, чтобы связать ваш блог с вашей группой ВКонтакте, и, соответственно сделать блог более популярным и посещаемым.


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

Пример виджета ВКонтакте

Итак, приступим к установке. Прежде всего, для того, чтобы виджет этот нам раздобыть, нужно перейти по такому адресу: http://vk.com/dev

Также на нужную нам страничку можно попасть, со своей страницы в ВКонтакте. Для этого нужно в самом низу страницы перейти по ссылке «разработчикам»:

для разработчиков

Кстати, как известно, добраться до самого низа страницы очень сложно, особенно если у вас на странице большое количество новостей. Поэтому советую перейти в раздел «настройки», откуда добраться до низа страницы будет очень просто.

Поехали дальше. Нажимаем на ссылку «разработчикам» и попадаем сюда:

Приложения Вконтакте

Здесь нужно выбрать пункт «Авторизация и виджеты для сайтов» и нажать на него.

Далее в разделе «Виджеты для сайтов» выбираем пункт «Сообщества» и попадаем в настройки виджета:

Пункт Сообщества

Также на нужную страницу можно попасть минуя все предыдущие пункты, просто перейдя по адресу: http://vk.com/dev/Community Попадете в то же место.

Настройка виджета группы вконтакте для сайта

Настройки буду разбирать по пунктам, которые я пронумеровала на рисунке:

Настройка виджета группы вконтакте для сайта

1. В первом пункте нужно вставить адрес страницы Вашей группы. Для этого откройте в новом окне свою группу и скопируйте из адресной строки адрес группы.


2. Определитесь как будет виджет отображаться: в виде аватарок участников (как в моем примере), новостей, или просто в виде названия. Протестируйте все пункты по очереди и посмотрите как больше нравится.

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

3. Настройте ширину и высоту, в зависимости от места, на сайте, где будет находится виджет.
Кстати, в дальнейшем, если нужно будет изменить размер, совсем не обязательно снова заходить на эту страничку и выставлять другие цифры. Достаточно просто в коде, который мы будем вставлять на блог, изменить параметры «width» (ширина) и «height» (высота)

4. В четвертом пункте выбираем цвет фона, текста и кнопки по своему вкусу.

5. И последнее, что нужно сделать, скопировать в буфер обмена код, который находится дальше.

6. Шестой пункт — это просто наглядный пример, как будет смотреться созданный виджет.

Теперь давайте разберем как виджет Вконтакте вставить на сайт.

Есть два варианта вставки кода. Я использовала оба и оба у меня работали без проблем. Поэтому смотрите какой из вариантов Вам больше подойдет

Первый вариант, считается более правильным. Первую часть кода, возле которой я на рисунке поставила букву «А», нужно скопировать и вставить в файл шаблона с названием «header.php» перед закрывающим тегом «</head>».
Некоторые блоггеры советуют все подобные коды вставлять в файл «footer.php», чтобы они не мешали загрузке основного контента сайта. Но, с этим виджетом это не проходит, он просто не будет работать

Вторую часть кода (помечена буквой В) нужно прописать в то место, где будет находится виджет. Чаще всего это файл «sidebar.php». Или его просто можно вставить через админку сайта. Для этого нужно перейти в раздел «Виджеты», выбрать виджет «текст», перетянуть его на сайдбар и прописать туда вторую часть кода.

Второй вариант. Если Вы еще новичок в сайтостроении и не испытываете особого удовольствия от ковыряния в файлах шаблона Вашего блога, этот вариант для Вас.

В этом варианте не нужно открывать никакие файлы, просто переходите сразу в админку сайта в раздел «Виджеты» и, как и в предыдущем варианте, в виджете «текст» прописывайте обе части кода, то есть и А и В. Не забываем сохранить изменения.

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



Автор: Светлана Слободенюк
Ваша оценка статьи: [ratings]
Letyshops [lifetime]

Не пропустите похожие интересные посты!

Об авторе Смотреть все записи

Светлана Слободенюк

Я автор данного блога. Все статьи, которые вы найдете на моем блоге авторские, написанные исходя из личного опыта и "набитых шишек")

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены знаком *

тринадцать − 9 =

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: