Вкладки (табы) социальных сетей без плагина — Виджеты Follow Us для сайта

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

Мой виджет состоит из:

  • Like Box — Facebook
  • Виджет для сообществ — ВКонтакте
  • Виджет ленты пользователя — Twitter
  • Кнопки RSS подписки — Feed Burner

Естественно для использования этого виджета, вы должны быть зарегистрированы в данных соцсетях.

Установка на сайте

Шаг 1 — JS

Для установки данного виджета прежде всего Вам нужно подключить скрипт idTabs.min на сайт. Скачайте файл jquery.idTabs.min.js и загрузить на сайт в папку js. Далее после тега <body> установите этот скрипт, а именно вставьте следующий код:

Шаг 2 — CSS

Установите на свой сайт CSS стили виджета:

Шаг 3 — HTML

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

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

Like Box — Facebook

Перейдите по ссылке https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=ru_RU и в поле «Facebook Page URL» вставьте ссылку на свою странице в Фейсбуке. Ширина блока 250px;. Все остальные настройки по вашему желанию. Нажмите «Get Code» чтобы получить код скрипта.

Виджет для сообществ — ВКонтакте

Перейдите по ссылке http://vk.com/dev/Community и в поле «Ссылка на страницу» вставьте ссылку на свою страницу ВКонтакте. Ширина 250; высота 300. Скопируйте «Код для вставки»

Виджет ленты пользователя — Twitter

Зайдите в свой аккаунт в Твиттере. Перейдите по ссылке https://twitter.com/settings/widgets/new. Установите высоту блока 300 и нажмите «Создать виджет«. Появится код для вставки.

Feed Burner — Google

С Фидбернером дело обстоит сложнее, поэтому если вы до сих пор не зарегистрированы, вы можете просто исключить эту вкладку. Если Вы зарегистрированы в Feed Burner, тогда перейдите: Publicize — Email Subscribtion и под заголовком Subscription Link Code Вы найдете код для ссылки. Вам НЕ НУЖНО его копировать ВЕСЬ. Нужно только скопировать только саму ссылку. Примерно она выглядит так: https://feedburner.google.com/fb/a/mailverify?uri=Handy-Hands&loc=ru_RU. Эту ссылку и нужно вставить в HTML вместо «ССЫЛКА НА FEED BURNER».

Теперь ваш HTML готов к использованию и вы можете разместить его на вашем сайте в том месте, где вы хотите видеть виджет.
Если что-то не получается — спрашивайте. Старалась объяснить как можно более понятнее!


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

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

  1. извините, ещё и как обозвать файл css и куда его поместить, чтобы всё работало ?

  2. Здравствуйте, подскажите, в какой файл вставлять этот скрипт:
    если сайт сделан на WordPress?
    Могу я в коде дописать tab 5, tab 6 или больше четырёх табов работать не будет?

  3. Добрый день! Скажите виджета только четыре можно встроить? И еще, проблема: виджеты становятся друг под другом. Как быть?

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

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