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

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

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

 

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

 

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

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

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

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

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

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

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

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

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

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

Затем настройки непосредственно самой формы: выберите число комментариев, которые будут отображаться на странице (остальные будут под спойлером «показать другие комментарии»). Нажмите на подробнее возле Медиа, и можно отключить некоторые функции. Укажите ширину поля для комментария, чтобы она не была слишком короткой и не вылезала за края. Если сразу не угадали с шириной, можно исправить прямо в коде – замените цифры в «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. Вторую часть нужно вставить в виджетах. Для этого зайдите в Дизайн – Виджеты и перетащите виджет Текст в левую область и вставьте этот код. Проверьте работоспособность и чтобы все правильно отображалось.

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

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

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

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

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