марта 2016
Автор: Рубрика: Сайтостроение 2 комментария

Виджеты социальных сетей для сайта

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

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

 

Виджеты социальных сетей для сайта

 

В основном речь пойдет о том, как привязать группу в социальных сетях к вашему сайту. И разместить форму подписки в сайдбар, чтобы людям было проще подписаться на обновления. Но помимо этого некоторые соц.сети предлагают и другие полезные функции, о которых стоит упомянуть. Так что помимо этого рассмотрела и создание опросов, и лайки, и репосты, и комментарии от соц.сетей – информации много и вся полезная.

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

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

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

Мне очень нравится соц.сеть вконтакте, так что начну именно с нее. Хотела рассказать только о том, как добавить виджет группы, но заодно рассмотрю и остальные – вдруг вас что-то еще заинтересует.

Чтобы получить доступ ко всем виджетам нужно зайти в раздел Настройки и внизу страницы нажать на кнопку Разработчикам.

вк разработчикам

На следующей странице выбираем среднюю иконку с надписью Подключение сайтов и виджетов.

вк подключение сайта

И здесь можно посмотреть все виды виджетов для вашего сайта:

вк виджеты

Виджет «Комментарии» — можно разместить блок с комментариями от ВК на вашем сайте, как это сделано у меня. Людям удобней и быстрей оставить запись в этой форме, чем вписывать имя и почту в стандартную. Да и при таких комментариях автоматически делается репост на стену комментатора, что будет для вас большим плюсом.

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

Затем настройки непосредственно самой формы: выберите число комментариев, которые будут отображаться на странице (остальные будут под спойлером «показать другие комментарии»). Нажмите на подробнее возле Медиа, и можно отключить некоторые функции. Укажите ширину поля для комментария, чтобы она не была слишком короткой и не вылезала за края. Если сразу не угадали с шириной, можно исправить прямо в коде – замените цифры в «width: «665».

вк комментарии

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

вк форма комментариев

Если возникли сложности с размещением этого кода, можно добавить комментарии с помощью специального плагина VK Comments. Узнать ID можно в этом же разделе разработчикам, просто в верхнем меню выберите Мои приложения и откройте нужный сайт. Цифры в конце ссылки и будут вашим ID (к примеру, vk.com/editapp?id=123456).

Виджет «Запись на стене» — применяется редко, но может кому-то пригодится. С его помощью можно вставить пост из вконтакте в статью. Все лайки при этом сохраняются и отображаются на записи в группе. Еще один метод использования – дословно цитировать важную информацию, сразу давая ссылку на источник.

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

вк запись в пост

Виджет «Сообщества» — отличный способ связать свою группу и сайт, чтобы люди активней подписывались. Добавьте этот виджет в сайдбар и он всегда будет на глазах.

Настройки очень просты – укажите ссылку на вашу группу, выберите формат отображения (список участников, последние записи или просто название). Установите ширину и высоту, чтобы красиво выглядело в вашем сайдбаре.

вк сообщества

Ниже можно настроить цвет, если стандартные расцветки вас не устраивают. После этого копируйте код и вставляйте в виджет Текст, чтобы добавить в сайдбар. Либо в любое другое место на сайте, как вам будет удобно.

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

В варианте «Кнопка с текстовым счетчиком» вы можете самостоятельно выбрать надпись для кнопки.

вк мне нравится

Виджет «Рекомендации» работает только совместно с предыдущим. Он анализирует число лайков на статьях, и выводит список самых популярных записей. Настройки все интуитивно понятные: количество записей, за какой период выводятся данные (день, неделя, месяц) и текст над разделом (Понравилось/Интересно …. Людям).

Виджет «Опросы» позволяет быстро и просто запустить опрос на вашем сайте. В поле с темой вводите вопрос, а ниже перечисляете все варианты ответов, добавляя новые с помощью кнопки Добавить. Выбирайте размер под ширину сайдбара или страницы, копируйте текст и вставляйте в нужное место.

вк опросы

Виджет «Авторизация» применяется крайне редко, и честно говоря даже не знаю зачем это может понадобиться.

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

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

Вот и все виджеты виджеты вконтакте, которые можно разместить на сайте.

Виджет одноклассники на сайт

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

ок разработчикам

Настроек здесь не очень много, так что вы без труда разберетесь:

ок виджет

  • Ширину и Высоту выбирайте сами по своим пожеланиями.
  • ID группы – зайдите в свою группу, и посмотрите на адресную строку. Цифры в строчке и будет ваш ID (например, http://ok.ru/group/50582132228315). Замените цифры на свои.

Скопируйте код, затем зайдите в админку Дизайн – Виджеты, перетащите виджет Текст в левую область и вставьте этот код.

Виджет фейсбук на сайт

Переходим в страницу для разработчиков: под правым разделом «вы можете их знать» есть перечень различных ссылок, но вам нужно нажать на «еще», и уже в этом выпадающем списке выбрать Разработчикам.

фб разработчикам

Затем перейдите в верхнем меню в раздел Docs и здесь найдите в списках Social Plugins.

Перейдите в раздел Page Plugin и тут заполните информацию о своей группе: ссылку на страничку, ширину и высоту виджета и внешний вид.

фб сообщества

Когда вас устроит результат, просто нажмите «Получить код» и тут вам предложат два кода.

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

  1. Вставляем часть, над которой написано Include the SDK JavaScript on your page once, ideally right after the opening body tag — зайдите в админку, выберите Дизайн – Редактор и здесь найдите footer. Запустите окно поиска (ctrl + F) и найдите body. Нам нужно именно закрывающееся -< /body >. И строчкой выше, прямо над ним, вставляем код из верхнего окна. Сохранить.
  2. Вторую часть нужно вставить в виджетах. Для этого зайдите в Дизайн – Виджеты и перетащите виджет Текст в левую область и вставьте этот код. Проверьте работоспособность и чтобы все правильно отображалось.

Виджет твиттера на сайт

Напоследок рассмотрю и добавление твиттера, хотя его добавляют довольно редко.

Зайдите в Настройки и выберите Виджеты.

tw виджет

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

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

Хочешь получать статьи этого блога на почту?
Получайте статьи на почту
2 комментария
  • Андрей

    Отличная и очень полезная статья!

    2016-03-23 в 6:30 | Ответить
  • Ольга

    Спасибо, может пригодиться информация, соцсети лишними не будут.

    2016-07-02 в 9:21 | Ответить