]]>eTXT]]>


]]>]]>

Как сделать виджеты социальных сетей во вкладках

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

Создавать вкладки мы научились в первом уроке «Создание вкладок для вывода любого контента.» 

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

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

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

 

 Как добавить виджеты фейсбук, вконтакте, твиттер во вкладках.

 

Добавляем на сайт виджет сообщества FaceBook

Сообщество в фейсбук для своего сайта у нас уже есть. Теперь добавим виджет.

Идем на страницу разработчика https://developers.facebook.com/docs/plugins?locale=ru_RU

Выбираем желаемый социальный плагин. Мы остановимся на LikeBox.

Социальный плагин от фейсбук LikeBox.

Выглядит этот блок следующим образом:

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

Заполняем все поля форм и настраиваем виджет.

Вставляем адрес сообщества. Приглашаю посетить и мое ]]>«Шпаргалка вебмастера»]]>. Я совершенно не занималась его продвижением, но постоянно наполняю новым контентом.

]]>Шпаргалка вебмастера в фейсбуке]]>

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

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

После окончания всех настроек нажмите на кнопку GetCode.

Посмотрите, что получилось у меня.

Сообщество фейсбук

Выбираем любой вид кода. Например, для вставки в виджет в вордпрессе или в блоки друпал лучше выбрать фрейм (IFrame)

Выбрать любой код

В этом случае будет достаточно вставить один код в блок или в текстовой виджет.

Если вы планируете вставлять непосредственно в файлы темы, то выбирайте HTML5.

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

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

Также вы всегда можете скачать плагин вордпресс Facebook Widget по ссылке https://wordpress.org/plugins/facebook-pagelike-widget/

 

Добавляем на сайт виджет группы ВКонтакте

Идем к разработчику http://vk.com/dev/Community

Здесь мы будем настраивать такой виджет:

]]>Социальный виджет вконтакте]]>

Заполняем также все поля и настраиваем внешний вид блока от вконтакте.

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

 

Осталось скопировать сгенерированный код и вставить в нужное место на сайте.

 

Плагин VKontakte API для вордпресс https://wordpress.org/plugins/vkontakte-api/

 

Виджет Twitter ленты для сайта

Идем на страницу в твиттере https://twitter.com/settings/widgets/new

Ширину виджета не нужно назначать, она адаптивная и сам подстроится под место на сайте.

 После настройки нажмите кнопку «Создать виджет». Осталось скопировать код и вставить в сайдбар.

Настройка твиттер ленты

Получили информер сообщений с твиттера:

]]>Лента сообщений твиттера]]>

Для друпал модуль Twitter Profile Widget https://www.drupal.org/project/twitter_profile_widget

Для wordpress плагин Twitter Widget Pro https://wordpress.org/plugins/twitter-widget-pro/

 

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

Комментарии

1

Спасибо большое! Все прекрасно работает! Очень удобно и доступно!

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
To prevent automated spam submissions leave this field empty.
CAPTCHA
Действительно ли вы человек?

Навигатор по интернету

Узнать простую, но эффективную систему для наращивания трафика. Плюс эта книга с правами перепродажи. 

Узнать подробнее!

Создание сайта

Сделать веб-сайт по приемлемым ценамЗаказать создание сайта под ключ. Цена: недорого.





Если вам понравилась статья, вы можете ]]>подписаться на RSS]]> или E-mail рассылку. Для получения обновлений по электронной почте, введите ваш e-mail адрес в эту форму:

Введите Ваш email:

Подпишись с ]]>FeedBurner]]>

Другие сервисы почтовых рассылок