SEO блог Михаила Шакина

  • Контакты
    • Мои аккаунты и каналы
    • Мои интервью
    • Мои доклады
  • Мои книги
    • Мои приключения в Америке
    • SEO Коллайдер
    • SEO разведка
    • SEO Винчестер
  • Услуги
    • Продвижение сайтов
    • Консультации по продвижению сайтов
    • Консультации по продвижению англоязычных сайтов
  • Лучшее
    • Продвижение сайтов
    • Приключения
    • Видеоуроки
    • WordPress
    • Блоггинг
    • Привлечение посетителей с социальных сетей
    • Саморазвитие и работа в интернете
    • Вебмастеру
  • Мой хостер

Как добавить Вконтакте на свой сайт

20.09.2010

Дорогие друзья, сегодня я расскажу о том, как добавить кнопку «Мне нравится» и виджет друзей от популярной социальной сети Вконтакте на свой сайт. Вы также можете почитать мои статьи Как добавить Facebook на свой сайт, Как сделать страницу Facebook для привлечения посетителей на сайт и Как добавить кнопки социальных сервисов на свой сайт.

Как добавить Вконтакте на свой сайт

Сегодня основатель Вконтакте Павел Дуров опубликовал новость о нововведениях в этой социальной сети, среди которых - кнопка «Мне нравится» и виджет друзей.

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

Кнопка «Мне нравится» Вконтакте

Начнем с кнопки «Мне нравится». Разместив ее на своем сайте, вы дадите возможность своим читателям поделиться понравившимся им материалов на вашем сайте со своими друзьями.

Для настройки и получения кода кнопки переходим по этой ссылке. Заполняем название сайта, адрес сайта и основной домен:

Кнопка «Мне нравится» Вконтакте

Жмем «Сохранить». Внимание - без нажатия кнопки «Сохранить» копировать код не нужно, так как он не будет работать - в нем не будет привязки к вашему сайту.

Ширину я оставил по умолчанию - 496 пикселей. Можете изменить ее при необходимости:

Кнопка «Мне нравится» Вконтакте - ширина

Далее я выделил первую часть кода, которую нам нужно поместить в пределах тега <head> нашего сайта, о чем повествует соответствующая надпись Put this script tag to the <head> of your page:

Виджет «Мне нравится» Вконтакте код

Для этого открываем файл header.php в папке с вашей темой (если у вас блог на WordPress) и помещаем выделенный участок кода в пределах тега <head>. Для новичков поясню - найдите закрывающий тег </head> и поместите этот код сразу перед ним, чтобы получилось вот так:

Виджет «Мне нравится» Вконтакте код вставки

🔥 Кстати! Я провожу платный курс по продвижению англоязычных сайтов SEO Шаолинь seoshaolin.com. Для читателей блога я делаю хорошую скидку. По прокомоду "блог" тариф Про стоит не 50, а 40 тыс. рублей. Тариф Лайт не 25, а 20 тыс. рублей. Тариф Команда не 75, а 60 тыс. рублей. Пишите мне в Telegram @mikeshakin.

Далее нам нужно вставить кнопку «Мне нравится» Вконтакте в нужное место сайта. Об этом говорит фраза Put this div tag to the place, where the Like block will be. Я предлагаю разместить ее в начале статьи. Если у Вас блог на WordPress, то нужно открыть в папке с вашей темой файл single.php (в некоторых темах его нет, и тогда нужно открывать index.php) и вставляем перед <?php the_content("); ?> выделенный код:

Кнопка Вконтакте Мне нравится

Вместе с кнопкой retweet от Твиттера код кнопки Вконтакте «Мне нравится» на моем блоге выглядит так:

<div  style="float: right; margin-left: 10px;"><script  type="text/javascript">
tweetmeme_source  = 'shakinru';
tweetmeme_service  = 'bit.ly';
</script>
<script  type="text/javascript" src="https://tweetmeme.com/i/scripts/button.js"></script><br>
</div>
<div  id="vk_like" style="margin: 5px 0 0 0;"></div>
<script  type="text/javascript">
VK.Widgets.Like("vk_like",  {width: "496"});
</script>
<?php  the_content(''); ?>

В код кнопки «Мне нравится» Вконтакте я добавил отступ сверху:

style="margin: 5px 0 0 0;"

Расшифровка такая:

Первые 5px - отступ сверху в 5 пикселей;

Второй 0 - отступ справа;

Третий 0 - отступ снизу (от текста статьи);

Четвертый 0 - отступ слева.

Можете задать нужные вам отступы на основе этой расшифровки.

В итоге получаем такую красоту:

Виджет Vkontakte Мне нравится

С помощью кнопки Вконтакте «Мне нравится» пользователи также могут рекомендовать понравившиеся страницы вашего сайта друзьям:

Виджет Вконтакте рекомендовать друзьям

Полная документация по настройке кнопки «Мне нравится» Vkontakte вы можете почитать здесь.

Виджет друзей Вконтакте (виджет сообществ)

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

Предварительно нужно создать группу своего сайта на сервисе Вконтакте. На этом я подробно останавливаться не буду, можете почитать цикл статей Максима Шпона Большой FAQ по оформлению и раскрутке группы Вконтакте.

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

Для блога shakin.ru я создал группу Вконтакте Продвижение и развитие сайтов, кстати, можете к ней присоединиться.

На странице получения кода для виджета Вконтакте в первом поле «Группа» с помощью выпадающего меню выбираем свою группу:

выбираем свою группу Вконтакте

Отмечаем галочку «Показывать участников», с ними виджет смотрится намного интереснее:

Вконтакте - отмечаем галочку «Показывать участников»

По ширине - как я понял, задать ширину виджета менее 200 пикселей на данный момент нельзя. Я хотел вывести виджет сообществ Вконтакте в боковой колонке блога, но для этого нужна ширина в 180 пикселей.

Так как при размещении кнопки «Мне нравится» мы уже поместили необходимый код в пределах тега <head>, то сейчас повторно этого делать не нужно.

Если вы хотите поместить виджет сообжеств Вконтакте в боковой колонке вашего блога и ширина в 200 пикселей вам подходит, то помещаем выделенный далее на скриншоте код в нужном месте файла sidebar.php. Если вам нужно разместить виджет Vkontakte после статей, то помещаете выделенный код в файле single.php (в ряде тем это index.php) после кода <?php the_content("); ?>:

виджет Vkontakte

В итоге получим примерно такой блок друзей Вконтакте:

блок друзей Вконтакте

Полную информацию по виджету для групп Вконтакте вы можете прочитать здесь.

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

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

Желаю вам успешного дня!

Глобатор

Десерт на сегодня - видео о самых быстрых людях на Земле, которые занесены в Книгу рекордов Гиннесса:

Подпишитесь на рассылку блога с полезными материалами по SEO


Категория: Социальные сети Теги: вебмастеру, советы, Социальные сети

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

Комментарии:

  1. zilkerOk говорит

    20.09.2010 at 16:56

    Молодец! Оперативненько. Прочитав с утра новость, подумал: В блогах она появится до или после обеда?=)

  2. Motsarev говорит

    20.09.2010 at 17:19

    Миша как думаешь будет ли пользоваться успехом эта кнопка среди блоггеров пишущих о тематике seo, smo...? Просто всегда в рунете считали что вконтакте для детей, а фейсбук для взрослых. Ведь если для детей то не думаю что детвора посещает подобные блоги.

  3. StasSesign говорит

    20.09.2010 at 17:26

    Очень интересно, спасибо.

    Похоже Вконтаке все больше стремится к Facebook

  4. Елена говорит

    20.09.2010 at 19:10

    Поставила несколько дней назад виджет комментариев. Комментов на сайте нет (проверяла), зато в статистике время от времени отображаются переходы с этого сайта. Однако счетчики их не учитывает. Примерно 300-400 переходов в день буквально за одну минуту) И из-за этих лже-переходов появляется желание вообще убрать виджет.

  5. Шпон Максим говорит

    20.09.2010 at 19:50

    Спасибо за упоминание моего FAQ Михаил!
    Безусловно этот виджет был очень нужен, т.к у большинства групп-комьюнити вконтакте есть свои сайты. Как сливать аудиторию с группы на сайт было понятно, а вот с сайта на группу...Люди придумывали кнопки, рисовали баннеры и прочее... Ну а сейчас виджет решит все проблемы разом!
    Хорошая статья, упомяну у себя! 😉

  6. Самостоятельный Путешественник говорит

    20.09.2010 at 20:42

    Михаил, не обнаружил виджет твоей группы ВКонтакте на твоем блоге. Почему ты его не вставил - достаточно виджета от Facebook?

  7. Plazik говорит

    20.09.2010 at 21:48

    Спасибо!

    Только у меня, когда не залогинен при нажатии на Мне нравится выскакивает ошибка Open API security breach ?

  8. Andrey говорит

    21.09.2010 at 00:30

    извиняюсь за вопрос не по теме, а как сделать анимированный фавикон как у Вас на блоге, чтобы анимация происходила не постоянно а через какое то время?

  9. Иван говорит

    21.09.2010 at 00:49

    Здравствуйте Михаил

    я одно думаю – виджеты под одну социалку надо делать, иначе мусорка из виджетов получится. Либо Фейсбук, либо контакт

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

  10. Константин говорит

    21.09.2010 at 01:34

    Михаил, спасибо.
    Поставил кнопки на странички. А как узнать работает ли она (кнопка)? Своего аккаунта ВКонтакте пока нет.

  11. dmitri yakimov говорит

    21.09.2010 at 01:44

    Товарищ, вы не пробовали разместить кнопки "Сохранить в заметки" и "Мне нравится" для ВК в один ряд?
    Проблема, не хотят и всё. Либо не работают , либо криво встаёт всё....
    Если есть мысли - поделитесь плиз.
    И еще вопрос - корректно ли передаются у вас описания страницы?
    У меня сплошные левые символы 🙁

  12. Daisy говорит

    21.09.2010 at 01:49

    Спасибо! про виджет коментов уже давно читала, а вот для группы очень полезным будет!

  13. Olya говорит

    21.09.2010 at 03:06

    Подскажите как дело обстоит с blogger.com?
    Как залить эту кнопку чтобы она была под каждым постом? В какое место отправить второй тег?

  14. Алексей говорит

    21.09.2010 at 15:16

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

  15. devastation говорит

    21.09.2010 at 23:09

    Мне кажется это не особо актуальная кнопка. Но все равно, свои шансы на успех имеет!

  16. Georg говорит

    26.09.2010 at 14:26

    Никак не пойму, а как сделать, чтобы появлялся бокс "Рекомендую друзьям"? Добавил кнопку на сайт, но у меня отображается только галка "Мне нравится"...

  17. Алексей говорит

    10.10.2010 at 21:04

    У меня после заполнения формы и нажатия "Сохранить" не происходит подстановка api_id
    Текст кода все равно остается таким:

    <script type="text/javascript">
    VK.init({apiId: API_ID, onlyWidgets: true});
    </script>

    Пробовал уже во всех браузерах: файрфокс, опера, хром, эксплорер. Нигде не получается. Где взять этот API_ID, ума не приложу. Вконтакте, если что, залогинен. Помогите!!!

  18. Серж говорит

    14.10.2010 at 17:35

    Алексей.
    Когда нажмете сохранить, снова выбирите подключить новый сайт и опять сохранить, должно помочь

  19. Ксения говорит

    28.10.2010 at 03:55

    Алексей, была такая же проблема, как у вас - api_id не подставлялся и ничего не отображалось.
    Оказалось, все просто. Если копируешь адрес сайта из строки браузера, то нужно удалить конечный слеш, иначе программулька не может определить основной домен сайта.

  20. Артем Хадиулин говорит

    26.05.2015 at 13:12

    Долго маялся с этим вк модулем, то к группе не привяжешь, то ошибка Open Api, то сайт не авторизован. В итоге нашел модуль, сразу для vk, твиттер, инстаграм - ejfe.ru/widget

  21. Tatarin говорит

    28.01.2017 at 17:37

    Михаил подскажи, что лучше для действующего лечащего врача имеющего свой блог создать в Вконтакте:
    1. Публичная страница
    2. Открытая группа
    3. Веб-сайт

    • Михаил Шакин говорит

      28.01.2017 at 20:19

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

  22. Andrews32 говорит

    31.01.2017 at 21:48

    Спасибо! Почему-то у Вас есть такая статья, а на самом Вк, если я нахожусь в группе как админ, нет ссылки "создать виджет" (( Камень в огород Mail_ru Group.

    • Михаил Шакин говорит

      31.01.2017 at 21:59

      Может, у них что-то поменялось в этом плане.

Подписывайтесь

Youtube - канал на YouTube
t.me/shakinru - SEO в рунете
t.me/burzhunet - англоязычное SEO
vk.com/globator - ВК
vk.com/video/@globator - ВК Видео
tenchat.ru/mikeshakin - TenChat
dzen.ru/shakin - Дзен
rutube.ru/24777621/ - Rutube

Категории

Продвижение сайтов
Приключения
Видеоуроки
SEO ответы
Wordpress
Интервью
Блог-шоу

Полезное

Что я использую в работе

Моя книга про Америку

Книга Михаила Шакина про приключения в Америке

В случае перепечатки материалов обязательно мое письменное разрешение и прямая индексируемая ссылка на Shakin.ru
© 2007-2025 Shakin.ru
Политика конфиденциальности
Пользовательское соглашение