Приветствую друзья. В данном уроке я покажу вам, как добавить на ваши сайты и блоги (не важно на какой они платформе Blogger или Wordpress) кнопки социальных сетей. И это будет не плагин, а виджет, что собственно намного лучше поскольку некоторые плагины могут негативно повлиять на скорость загрузки страниц сайта. Планирую реализовать два типа виджетов один "Мы в социальных сетях", а второй "Поделиться в соцсетях". Начну я пожалуй с первого типа.
Установка HTML кнопок для подписки на соцсети
Установка виджета Мы в соцсетях для Blogger, WordPress, Joomla.Сюда входит большое количество медиа сетей однако в самом виджете на старте будет отображаться шесть ресурсов, а именно: Facebook, Twitter, Vkontakte, Pinterest, Youtube, Instagram. Демо. Процесс установки очень прост и займет не более 5 минут. Для установки данного виджета скачайте файл с кодами и следуйте указанием в видео инструкции:
Установка виджета поделиться в соцсетях
Установка виджета Поделиться в соцсетях только для BloggerНу что продолжим друзья. В этот раз виджет можно использовать только на Blogger. В данный инструмент я добавил самые важные медаисети: Facebook, Twitter, Vkontakte, Odnoklassniki, Pinterest, Reddit и Telegram.
Для установки используйте кода ниже. Что и куда добавлять смотрите на видео.
1.CSS
2. HTML вставляете после data:post.body
3. Код для подключения иконок можно взять здесь.
Переходим к просмотру видео:
Подключение кнопок AddThis, ShareThis
Дополнительные варианты кнопок Follow us:
Чутка разбавим вариации кнопок для некоторых соц сетей. В приоритете Facebook, Вконтакте и Youtube.
Варианты HTML кнопок для Youtube
1 вариант
Youtube
Youtube.youtubebut1{padding:5px; border-radius:4px; box-shadow: 2px 2px 4px -2px rgb(0, 0, 0, 0.5); background:#ed1b23; width: 130px; display: inline-block; text-align: center;}2 вариант
.social_item.social_youtube { background: #E22020; background: linear-gradient(141deg,#f46464 0%,#E22020 75%); position: relative; display: block; height: 45px; line-height: 45px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);} .social_item span { margin-left: 20px;} i.fa.fa-youtube.social_icon { margin-left: 20px; } .social_item.social_youtube:after { content: '\f054'; position: absolute; right: 5%; color: #fff; top: 0; line-height: 45px; font-family: fontawesome; transition: all .3s;} a.social_item:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.24);}3 вариант
.youtube{display: block; height: 44px; font-size: 15px; color: #5b7676; line-height: 44px; border-radius: 22px; transition: opacity .17s; box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.3); transition: opacity .17s; background: #fff!important; transition: .5s .17s; float: left; width: 100%; margin: 0 auto 10px auto; list-style: none;} .youtube:before { content: "\f167"; color: #f00; float: left; width: 44px; height: 44px; text-align: center; margin: 0 10px 0 0; border-radius: 22px; box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.3); -webkit-transition: all 1s ease-out; font-family: fontawesome;} .youtube:after { content: "YouTube"; color: #333; margin-left: 20px; }Варианты HTML кнопок для Вконтакте
1 вариант
Vkontakte
Vkontakte.vkbut1{padding:5px; border-radius:4px; box-shadow: 2px 2px 4px -2px rgb(0, 0, 0, 0.5); background:#6383a8; width: 130px; display: inline-block; text-align: center;}2 вариант
.social_item.social_vk { background: #E22020; background: linear-gradient(141deg,#7896b7 0%,#6383a8 75%); position: relative; display: block; height: 45px; line-height: 45px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);} .social_item span { margin-left: 20px;} i.fa.fa-vk.social_icon { margin-left: 20px; } .social_item.social_vk:after { content: '\f054'; position: absolute; right: 5%; color: #fff; top: 0; line-height: 45px; font-family: fontawesome; transition: all .3s;} a.social_item:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.24);}3 вариант
.vk{display: block; height: 44px; font-size: 15px; color: #5b7676; line-height: 44px; border-radius: 22px; transition: opacity .17s; box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.3); transition: opacity .17s; background: #fff!important; transition: .5s .17s; float: left; width: 100%; margin: 0 auto 10px auto; list-style: none;} .vk:before { content: "\f189"; color: #6383a8; float: left; width: 44px; height: 44px; text-align: center; margin: 0 10px 0 0; border-radius: 22px; box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.3); -webkit-transition: all 1s ease-out; font-family: fontawesome;} .vk:after { content: "Vkontakte"; color: #333; margin-left: 20px; }Варианты HTML кнопок для Facebook
1 вариант
Facebook.fbbut1{padding:5px; border-radius:4px; box-shadow: 2px 2px 4px -2px rgb(0, 0, 0, 0.5); background:#6383a8; width: 130px; display: inline-block; text-align: center;}2 вариант
.social_item.social_fb { background: #E22020; background: linear-gradient(141deg,#5d80c8 0%,#395796 75%); position: relative; display: block; height: 45px; line-height: 45px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);} .social_item span { margin-left: 20px;} i.fa.fa-facebook.social_icon { margin-left: 20px; } .social_item.social_fb:after { content: '\f054'; position: absolute; right: 10%; color: #fff; top: 0; line-height: 45px; font-family: fontawesome; transition: all .3s;} a.social_item:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.24);}3 вариант
.fb{display: block; height: 44px; font-size: 15px; color: #5b7676; line-height: 44px; border-radius: 22px; transition: opacity .17s; box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.3); transition: opacity .17s; background: #fff!important; transition: .5s .17s; float: left; width: 100%; margin: 0 auto 10px auto; list-style: none;} .fb:before { content: "\f09a"; color: #395796; float: left; width: 44px; height: 44px; text-align: center; margin: 0 10px 0 0; border-radius: 22px; box-shadow: 2px 2px 4px -2px rgba(0,0,0,0.3); -webkit-transition: all 1s ease-out; font-family: fontawesome;} .fb:after { content: "Facebook"; color: #333; margin-left: 20px; }Устаревший материал по теме
В общем с целью кнопок все понятно, теперь перейдем к их установке. На наш взгляд самым лучшим сервисом, который поможет вам стать счастливым обладателям стильных кнопок социальных сетей является Pluso. Перейдя на сайт вы можете сгенерировать вид кнопок по своему желанию. После копируете код и вставляете его на свой сайт. Вы можете разместить этот код в разделе Дизайн - Добавить гаджет - HTML\Javascript. Если вы хотите, заменить старые кнопки, тогда вам нужно перейти в раздел Шаблон - Изменить HTML в открывшемся окне жмете сочетание клавиш CTRL+F в поисковом окошке вбиваете код:
После того, как вставите код нажимаете Сохранить тему и радуетесь новым кнопкам соцсетей. Кстати многие сервисы не поддерживают Вконтакте поделиться вместе с картинкой, в нашем же сервисе такой проблемы нет.
6 Коммент.
6 Коммент.
Здравствуйте!У меня на сайте от Blogger кнопки соцсетей отображаются только в компьютерной версии,а в мобильной почему-то их нет.Подскажите пожалуйста как это исправить.Заранее спасибо!
ОтветитьНужно найти код кнопок, выше него должен быть оператор data:blog.isMobileRequest вот его нужно удалить.
ОтветитьЗдравствуйте, хочу спросить можно виджет "поделиться" сделать фиксированным, липким(с левого бока), пыталась вместо data:post.body поставить в другое место, чтобы на главной кнопки тоже были, но в сплывающем окне подставляется только ссылка на главную и нет названий статьи?
ОтветитьВ шаблоне data post body может встречаться несколько раз, один из которых выводит код(виджет) и на главную стр. сайта, найти нужный data post body можно методом тыка. А если data post body встречается один раз, то выводит и на Главную и на Сообщения и на Страницы.
ОтветитьМожно поставить липкий после data post body, но тогда он будет отображаться на Главной после каждого сообщения, а если поставить в другом месте, то будет отображаться как нужно, но репостить будет только главную, а Сообщения нет, поэтому для Главной лучше ставить обычный фиксированный после каждого Сообщения, а для Сообщений можно липкий.
Спасибо большое, есть еще один вопрос. Как добавить линкедин и тумблер. В ссылке нет кода для них?
ОтветитьВ представленном здесь HTML данных соцсетей нет. Используйте сервисы Addthis или Share this там есть.
Ответить