HTML Кнопки Соцсетей для Сайтов и Блогов - Виджет, Плагин

HTML Кнопки Соцсетей для Сайтов и Блогов - Виджет, Плагин

Приветствую друзья. В данном уроке я покажу вам, как добавить на ваши сайты и блоги (не важно на какой они платформе Blogger или Wordpress) кнопки социальных сетей. И это будет не плагин, а виджет, что собственно намного лучше поскольку некоторые плагины могут негативно повлиять на скорость загрузки страниц сайта. Планирую реализовать два типа виджетов один "Мы в социальных сетях", а второй "Поделиться в соцсетях". Начну я пожалуй с первого типа.

Установка HTML кнопок для подписки на соцсети

Установка виджета Мы в соцсетях для Blogger, WordPress, Joomla.
Сюда входит большое количество медиа сетей однако в самом виджете на старте будет отображаться шесть ресурсов, а именно: Facebook, Twitter, Vkontakte, Pinterest, Youtube, InstagramДемо. Процесс установки очень прост и займет не более 5 минут. Для установки данного виджета скачайте файл с кодами и следуйте указанием в видео инструкции:




Установка виджета поделиться в соцсетях

Установка виджета Поделиться в соцсетях только для Blogger
Ну что продолжим друзья. В этот раз виджет можно использовать только на Blogger. В данный инструмент я добавил самые важные медаисети: Facebook, Twitter, Vkontakte, Odnoklassniki, Pinterest, Reddit и Telegram.

Для установки используйте кода ниже. Что и куда добавлять смотрите на видео.

1.CSS
<style>
ul.share-links.social.social-color {padding: 0px;}
.post-share{position:relative;overflow:hidden;line-height:0;margin:0 0 20px;margin-top:10px;} .share-links li{width:30px;float:left;box-sizing:border-box;margin:0 5px 0 0;list-style: none;} .share-links li a{float:left;display:inline-block;cursor:pointer;width:100%;height:28px;line-height:28px;color:#fff;font-weight:400;font-size:13px;text-align:center;box-sizing:border-box;opacity:1;margin:0;padding:0;transition:all .25s ease} .share-links li.whatsapp-mobile{display:none} .mobile-share li.whatsapp-desktop{display:none} .mobile-share li.whatsapp-mobile{display:inline-block} .share-links li a:before{float:left;display:block;width:30px;background-color:rgba(0,0,0,0.05);text-align:center;line-height:28px} .share-links li a:hover{opacity:.8} .social-color .odnoklassniki {background: #ffbc00;} .social-color .email a:before{content:&quot;\f189&quot;} .social a:before{display:inline-block;font-family:&#39;Font Awesome 5 Brands&#39;;font-style:normal;font-weight:400} .social .blogger a:before{content:&quot;\f37d&quot;} .social .facebook a:before{content:&quot;\f09a&quot;} .social .twitter a:before{content:&quot;\f099&quot;} .social .telegram a:before{content:&quot;\f3fe&quot;} .social .odnoklassniki a:before{content:&quot;\f263&quot;} .social .gplus a:before{content:&quot;\f0d5&quot;} .social .rss a:before{content:&quot;\f09e&quot;;font-family:&#39;Font Awesome 5 Free&#39;;font-weight:900} .social .youtube a:before{content:&quot;\f167&quot;} .social .skype a:before{content:&quot;\f17e&quot;} .social .stumbleupon a:before{content:&quot;\f1a4&quot;} .social .tumblr a:before{content:&quot;\f173&quot;} .social .vk a:before{content:&quot;\f189&quot;} .social .stack-overflow a:before{content:&quot;\f16c&quot;} .social .github a:before{content:&quot;\f09b&quot;} .social .linkedin a:before{content:&quot;\f3fe&quot;} .social .dribbble a:before{content:&quot;\f17d&quot;} .social .soundcloud a:before{content:&quot;\f1be&quot;} .social .behance a:before{content:&quot;\f1b4&quot;} .social .digg a:before{content:&quot;\f1a6&quot;} .social .instagram a:before{content:&quot;\f16d&quot;} .social .pinterest a:before{content:&quot;\f0d2&quot;} .social .twitch a:before{content:&quot;\f1e8&quot;} .social .delicious a:before{content:&quot;\f1a5&quot;} .social .codepen a:before{content:&quot;\f1cb&quot;} .social .flipboard a:before{content:&quot;\f44d&quot;} .social .reddit a:before{content:&quot;\f1a1&quot;} .social .whatsapp a:before{content:&quot;\f232&quot;} .social .messenger a:before{content:&quot;\f39f&quot;} .social .snapchat a:before{content:&quot;\f2ac&quot;} .social .external-link a:before{content:&quot;\f35d&quot;;font-family:&#39;Font Awesome 5 Free&#39;;font-weight:900} .social-color .blogger a{background-color:#ff5722} .social-color .facebook a{background-color:#3b5999} .social-color .twitter a{background-color:#00acee} .social-color .gplus a{background-color:#db4a39} .social-color .youtube a{background-color:#db4a39} .social-color .instagram a{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)} .social-color .pinterest a{background-color:#ca2127} .social-color .dribbble a{background-color:#ea4c89} .social-color .linkedin a{background-color:#149fe7} .social-color .tumblr a{background-color:#365069} .social-color .twitch a{background-color:#6441a5} .social-color .rss a{background-color:#ffc200} .social-color .skype a{background-color:#00aff0} .social-color .stumbleupon a{background-color:#eb4823} .social-color .vk a{background-color:#4a76a8} .social-color .stack-overflow a{background-color:#f48024} .social-color .github a{background-color:#24292e} .social-color .soundcloud a{background:linear-gradient(#ff7400,#ff3400)} .social-color .behance a{background-color:#191919} .social-color .digg a{background-color:#1b1a19} .social-color .delicious a{background-color:#0076e8} .social-color .codepen a{background-color:#000} .social-color .flipboard a{background-color:#f52828} .social-color .reddit a{background-color:#ff4500} .social-color .whatsapp a{background-color:#3fbb50} .social-color .messenger a{background-color:#0084ff} .social-color .snapchat a{background-color:#ffe700} .social-color .email a{background-color:#63839f} .social-color .external-link a{background-color:$(main.dark.color)} .social-color-hover .blogger a:hover{background-color:#ff5722} .social-color-hover .facebook a:hover{background-color:#3b5999} .social-color-hover .twitter a:hover{background-color:#00acee} .social-color-hover .gplus a:hover{background-color:#db4a39} .social-color-hover .youtube a:hover{background-color:#db4a39} .social-color-hover .instagram a:hover{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)} .social-color-hover .pinterest a:hover{background-color:#ca2127} .social-color-hover .dribbble a:hover{background-color:#ea4c89} .social-color-hover .linkedin a:hover{background-color:#0077b5} .social-color-hover .tumblr a:hover{background-color:#365069} .social-color-hover .twitch a:hover{background-color:#6441a5} .social-color-hover .rss a:hover{background-color:#ffc200} .social-color-hover .skype a:hover{background-color:#00aff0} .social-color-hover .stumbleupon a:hover{background-color:#eb4823} .social-color-hover .vk a:hover{background-color:#4a76a8} .social-color-hover .stack-overflow a:hover{background-color:#f48024} .social-color-hover .github a:hover{background-color:#24292e} .social-color-hover .soundcloud a:hover{background:linear-gradient(#ff7400,#ff3400)} .social-color-hover .behance a{background-color:#191919} .social-color-hover .digg a:hover{background-color:#1b1a19} .social-color-hover .delicious a:hover{background-color:#0076e8} .social-color-hover .codepen a:hover{background-color:#000} .social-color-hover .flipboard a:hover{background-color:#f52828} .social-color-hover .reddit a:hover{background-color:#ff4500} .social-color-hover .whatsapp a:hover{background-color:#3fbb50} .social-color-hover .messenger a:hover{background-color:#0084ff} .social-color-hover .snapchat a:hover{background-color:#ffe700} .social-color-hover .email a:hover{background-color:#888} .social-color-hover .external-link a:hover{background-color:$(main.dark.color)}
</style>

2. HTML вставляете после data:post.body
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<div class='post-share'>
<ul class='share-links social social-color'> 
<b:class cond='data:blog.isMobileRequest' name='mobile-share'/>
<li class='facebook'><a class='facebook' data-height='650' data-width='550' expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><span/></a></li>
<li class='twitter'><a class='twitter' data-height='460' data-width='550' expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><span/></a></li>
<li class='pinterest'><a class='pinterest' data-height='750' data-width='735' expr:href='&quot;https://www.pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.featuredImage + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'/></li> 
<li class='odnoklassniki'><a class='' data-height='750' data-width='735' expr:href='&quot;https://connect.ok.ru/offer?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title=''/></li> 
<li class='linkedin'><a class='' data-height='650' data-width='1000' expr:href='&quot;https://telegram.me/share/url?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='telegram'/> </li>                               
<li class='email'><a class='' data-height='650' data-width='650' expr:href='&quot;https://vk.com/share.php?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank' title='Vkontakte'/></li>
 <li class='reddit'><a class='twitter' data-height='460' data-width='550' expr:href='&quot;https://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;resubmit=true&amp;title=&quot; + data:post.title + &quot;&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank'><span/></a></li>
</ul>
</div>
</b:if>

3. Код для подключения иконок можно взять здесь.

Переходим к просмотру видео:




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

В общем с целью кнопок все понятно, теперь перейдем к их установке. На наш взгляд самым лучшим сервисом, который поможет вам стать счастливым обладателям стильных кнопок социальных сетей является Pluso. Перейдя на сайт вы можете сгенерировать вид кнопок по своему желанию. После копируете код и вставляете его на свой сайт. Вы можете разместить этот код в разделе Дизайн - Добавить гаджет - HTML\Javascript. Если вы хотите, заменить старые кнопки, тогда вам нужно перейти в раздел Шаблон - Изменить HTML в открывшемся окне жмете сочетание клавиш CTRL+F в поисковом окошке вбиваете код:
<b:includable id='shareButtons' var='post'> и нажимаете Enter. Когда браузер найдет этот код вам нужно будет заменить код который идет ниже на код который вы взяли на сайте Pluso. Удаляете от <b:if> .... </b:if> на картинке ниже обведено откуда и до куда нужно удалять.







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



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

4 Коммент.

Оставить комментарий
avatar
Всё о Дианализе
мая 29, 2019

Нормально!

Ответить
avatar
Анонимный
сентября 11, 2019

Виджет подписки мне понравился, только есть вопрос. Как поменять кнопку подписки Facebook к примеру на Телеграм?

Ответить
avatar
Mark Korvin
сентября 11, 2019

Добавьте к CSS следующий код:
.social-color .telegram a{background:#2196f3}
.social .telegram a:before {content: "\f2c6";}
.social-text .telegram a:after {content: "Telegram";}

А в HTML вместо facebook пропишите telegram

Ответить
avatar
Yuriy Bravo
сентября 14, 2019

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

Ответить