Представляю вашему вниманию вариант размещения на сайте виджетов социальных сетей, которые позволяют присоединиться к вашей страничке или группе. Выглядит он так:
Мой виджет состоит из:
- Like Box – Facebook
- Виджет для сообществ – ВКонтакте
- Виджет ленты пользователя – Twitter
- Кнопки RSS подписки – Feed Burner
Естественно для использования этого виджета, вы должны быть зарегистрированы в данных соцсетях.
Установка на сайте
Шаг 1 – JS
Для установки данного виджета прежде всего Вам нужно подключить скрипт idTabs.min на сайт. Скачайте файл jquery.idTabs.min.js и загрузить на сайт в папку js. Далее после тега <body> установите этот скрипт, а именно вставьте следующий код:
1 | <script type="text/javascript" src="/js/jquery.idTabs.min.js"></script> |
Шаг 2 – CSS
Установите на свой сайт CSS стили виджета:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /* Style for Social tabs */ .socusual /* отвечает за весь внешний блок*/ {width:250px; /*ширина внешнего блока*/} .socusual ul {padding-left: 0px!important; margin-left: 0px!important;} .socusual li { list-style:none!important; float:left!important; margin-right: 5px; margin-left: 0px; } /*вид вкладок*/ .socusual li a span.jj, .socusual li a.selected span.jj, .socusual li a span.fb, .socusual li a.selected span.fb, .socusual li a span.vk, .socusual li a.selected span.vk, .socusual li a span.tw, .socusual li a.selected span.tw, .socusual li a span.rs, .socusual li a.selected span.rs {display: inline-block; height: 32px; width: 32px; } .socusual li a:hover span.fb, .socusual li a:hover span.vk, .socusual li a:hover span.tw, .socusual li a:hover span.jj, .socusual li a:hover span.rs {width: 32px; height: 32px; } .socusual li a span.fb, .socusual li a.selected span.fb{background: url(https://stepfor.top/social_tabs/22.png) no-repeat top;} .socusual li a:hover span.fb {background: url(https://stepfor.top/social_tabs/22.png) no-repeat bottom;} .socusual li a span.vk, .socusual li a.selected span.vk{background: url(https://stepfor.top/social_tabs/25.png) no-repeat top;} .socusual li a:hover span.vk {background: url(https://stepfor.top/social_tabs/25.png) no-repeat bottom;} .socusual li a span.tw, .socusual li a.selected span.tw{background: url(https://stepfor.top/social_tabs/24.png) no-repeat top;} .socusual li a:hover span.tw {background: url(https://stepfor.top/social_tabs/24.png) no-repeat bottom;} .socusual li a span.jj, .socusual li a.selected span.jj{background: url(https://stepfor.top/social_tabs/21.png) no-repeat top;} .socusual li a:hover span.jj {background: url(https://stepfor.top/social_tabs/21.png) no-repeat bottom;} .socusual li a span.rs, .socusual li a.selected span.rs{background: url(https://stepfor.top/social_tabs/20.png) no-repeat top;} .socusual li a:hover span.rs {background: url(https://stepfor.top/social_tabs/20.png) no-repeat bottom;} .ppbut { background-color: #dd9933; display: inline-block; padding: 9px 14px; margin-bottom: 10px; margin-top: 10px; transition: background-color 0.3s linear 0s; border-radius: 4px; clear:both; } .ppbut a {font-size: 12pt; font-weight: 300%; color: #ffffff; } .ppbut:hover {background-color: #D6341D; } .ppbut a:hover{color: #ffffff;} .menu-item-323 a {color:red!important;} .menu-item-323 ul li a {color: #666666!important;} /* END-Style for Social tabs */ |
Шаг 3 – HTML
В том месте, где вы хотите видеть такой виджет вставьте следующий код, но предварительно в него нужно добавить коды самих выиджетов социальных сетей, поэтому пока скопируйте его в редактор:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <div id="socials1" class="socusual" > <!---Вкладки---> <ul> <li><a href="#tab1" class="selected"><span class="fb"></span></a></li> <li><a href="#tab2"><span class="vk"></span></a></li> <li><a href="#tab3"><span class="tw"></span></a></li> <li><a href="#tab4"><span class="rs"></span></a></li> </ul> <!---///Вкладки---> <!---Информация соответствующая вкладкам---> <div id="tab1"> ТУТ ВСТАВИТЬ КОД ВИДЖЕТ ФЕЙСБУКА ПОЛУЧЕННЫЙ ПО ССЫЛКЕ: https://developers.facebook.com/docs/plugins/like-box-for-pages?locale=ru_RU </div> <div id="tab2"> ТУТ ВСТАВИТЬ КОД ВИДЖЕТ ВКОНТАКТЕ ПОЛУЧЕННЫЙ ПО ССЫЛКЕ: http://vk.com/dev/Community </div> <div id="tab3"> ТУТ ВСТАВИТЬ КОД ВИДЖЕТ ТВИТТЕРА ПОЛУЧЕННЫЙ ПО ССЫЛКЕ: https://twitter.com/settings/widgets/new </div> <div id="tab4"> <div style="margin-left: 0px;" class="ppbut"> <center><a href="javascript:void(0)" onClick="javascript:window.open('ССЫЛКА НА FEED BURNER', 'RSS', 'width=845,height=600,status=no,toolbar=no, menubar=no,scrollbars=yes,resizable=yes');"> Подпишитесь на RSS рассылку</a> </center> </div> </div> </div> <!---///Информация соответствующая вкладкам---> <!---Сам скрипт НЕ МЕНЯТЬ!!!!---> <script type="text/javascript"> $("#socials1 ul").idTabs(); </script> |
В этот 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 готов к использованию и вы можете разместить его на вашем сайте в том месте, где вы хотите видеть виджет.
Если что-то не получается – спрашивайте. Старалась объяснить как можно более понятнее!
извините, ещё и как обозвать файл css и куда его поместить, чтобы всё работало ?
Вячеслав! Файл CSS обзывать не надо. В WordPress стили нужно добавить:
Консоль – Внешний вид – Редактор – Таблица стилей (style.css)
Здравствуйте, подскажите, в какой файл вставлять этот скрипт:
если сайт сделан на WordPress?
Могу я в коде дописать tab 5, tab 6 или больше четырёх табов работать не будет?
Вячеслав! Для того, чтобы установить этот код на WordPress воспользуйтесь этой статьей, и выполните Шаг 1 и Шаг2.
Вы можете дописать сколько угодно табов. Но Вам придется самостоятельно закачивать картинки для них.
Добрый день! Скажите виджета только четыре можно встроить? И еще, проблема: виджеты становятся друг под другом. Как быть?
Сергей, мой виджет – это простой код, и я делала его только для трех соцсетей и RSS. Если виджеты становятся друг под другом – значит не работает скрипт. Какая у Вас CMS? просто бывают нюансы…