Jak osadzić na stronie HTML przyciski mediów społecznościowych

Przyciski portali społecznościowych są czynnikiem pomocniczym w promowaniu nie tylko serwisu, ale również potrzebnych nam stron w systemach medialnych, takich jak Facebook, Twitter, Youtube, Telegram, Pinterest itp. Takie podejście znacznie ułatwia realizację celu każdego webmastera pod względem zwiększenia oglądalności swojej witryny.

W tym poście przygotowałam dla Was dwa rodzaje przycisków. Pierwszy typ to „Jesteśmy w sieciach społecznościowych”, a drugi to „Udostępnij w sieciach społecznościowych”.

Instalacja przycisków HTML Jesteśmy w sieciach społecznościowych

Ten widżet jest kompatybilny ze wszystkimi systemami do tworzenia witryn, takimi jak Blogger, WordPress, Joomla, Ucoz i inne. Możesz zobaczyć „Demo - Follow us in” na blogu testowym. Jak widać zawiera najpopularniejsze systemy naszego regionu.

1) Znajdź linię </b:skin> w szablonie i dodaj przed nim kod CSS:

CSSul.social-counter.social.social-color.social-text {padding-bottom: 120px;}
.social-counter li a:hover { opacity: .8; } .social-counter li a:before { float: left; width: 34px; height: 34px; background-color: rgba(0,0,0,0.1); text-align: center; margin: 0 10px 0 0; } .social a:before { display: inline-block; font-family: fontawesome; font-style: normal; font-weight: 400; } .social-counter li:nth-child(1), .social-counter li:nth-child(2) { margin-top: 0; } .social-counter li:nth-child(even) { float: right; } .social-counter li { float: left; width: calc(50% - 5px); margin: 10px 0 0;  list-style-type: none;} .social-counter li a { display: block; height: 34px; font-size: 14px; color: #fff; line-height: 34px; transition: opacity .17s;}
.social .facebook a:before{content:"\f09a"}.social .twitter a:before{content:"\f099"}.social .gplus a:before{content:"\f0d5"}.social .rss a:before{content:"\f09e";font-family:fontawesome;font-weight:900}.social .youtube a:before{content:"\f167"}.social .skype a:before{content:"\f17e"}.social .stumbleupon a:before{content:"\f1a4"}.social .tumblr a:before{content:"\f173"}.social .vk a:before{content:"\f189"}.social .stack-overflow a:before{content:"\f16c"}.social .github a:before{content:"\f09b"}.social .linkedin a:before{content:"\f0e1"}.social .dribbble a:before{content:"\f17d"}.social .soundcloud a:before{content:"\f1be"}.social .behance a:before{content:"\f1b4"}.social .digg a:before{content:"\f1a6"}.social .instagram a:before{content:"\f16d"}.social .pinterest a:before{content:"\f0d2"}.social .twitch a:before{content:"\f1e8"}.social .delicious a:before{content:"\f1a5"}.social .codepen a:before{content:"\f1cb"}.social .flipboard a:before{content:"\f44d"}.social .reddit a:before{content:"\f1a1"}.social .whatsapp a:before{content:"\f232"}.social .messenger a:before{content:"\f39f"}.social .snapchat a:before{content:"\f2ac"}.social .email a:before{content:"\f0e0";font-family:fontawesome}.social .external-link a:before{content:"\f35d";font-family:fontawesome;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:#0077b5}.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:#888}.social-color .external-link a{background-color:#333}.social-text .blogger a:after{content:"Blogger"}.social-text .facebook a:after{content:"Facebook"}.social-text .twitter a:after{content:"Twitter"}.social-text .gplus a:after{content:"Google Plus"}.social-text .rss a:after{content:"Rss"}.social-text .youtube a:after{content:"YouTube"}.social-text .skype a:after{content:"Skype"}.social-text .stumbleupon a:after{content:"StumbleUpon"}.social-text .tumblr a:after{content:"Tumblr"}.social-text .vk a:after{content:"VKontakte"}.social-text .stack-overflow a:after{content:"Stack Overflow"}.social-text .github a:after{content:"Github"}.social-text .linkedin a:after{content:"LinkedIn"}.social-text .dribbble a:after{content:"Dribbble"}.social-text .soundcloud a:after{content:"SoundCloud"}.social-text .behance a:after{content:"Behance"}.social-text .digg a:after{content:"Digg"}.social-text .instagram a:after{content:"Instagram"}.social-text .pinterest a:after{content:"Pinterest"}.social-text .twitch a:after{content:"Twitch"}.social-text .delicious a:after{content:"Delicious"}.social-text .codepen a:after{content:"CodePen"}.social-text .flipboard a:after{content:"Flipboard"}.social-text .reddit a:after{content:"Reddit"}.social-text .whatsapp a:after{content:"Whatsapp"}.social-text .messenger a:after{content:"Messenger"}.social-text .snapchat a:after{content:"Snapchat"}.social-text .email a:after{content:"Email"}

2) Teraz przejdź do sekcji Układ, utwórz nowy gadżet HTML/Javascript. Wklej następujący kod HTML do tego gadżetu:

HTML<ul class="social-counter social social-color social-text">
<li class="facebook"><a href="#" rel="nofollow" target="_blank" title="facebook"></a></li>
<li class="twitter"><a href="#" rel="nofollow"  target="_blank" title="twitter"></a></li>
<li class="youtube"><a href="#" rel="nofollow"  target="_blank" title="youtube"></a></li>
<li class="pinterest"><a href="#" rel="nofollow"  target="_blank" title="pinterest"></a></li>
<li class="instagram"><a href="#" rel="nofollow"  target="_blank" title="instagram"></a></li>
<li class="vk"><a href="#" rel="nofollow"  target="_blank" title="vk"></a></li>
</ul>

3) Sprawdź, czy widżet działa na Twoim blogu. Jeśli ikony się nie wyświetlają, znajdź w szablonie linię </head> i dodaj przed nią następujący kod:

HTML<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

4) Zapisz ustawienia i przetestuj widżet. 

Instalowanie przycisków udostępniania w sieciach społecznościowych 

W przeciwieństwie do poprzedniego widżetu, ta opcja jest kompatybilna tylko z systemem Blogger. W przypadku WordPress, Joomla i innych platform najlepiej jest używać odpowiednich wtyczek.

1) Znajdź linię </b:skin> w szablonie, a po niej dodaj następujący kod CSS:

CSS<style>
.social .telegram a:before {content: "\f3fe";font-family: 'Font Awesome 5 Brands';} 
ul.share-links.social.social-color {padding: 0px;} li.telegram {background: #3ea9ff;} 
.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) Teraz znajdź linię <data:post.body/> (może wystąpić więcej niż jeden raz, jeśli widżet się nie pojawi, dodaj kod po następnej linijce <data:post.body/> i tak dalej, aż widżet się pojawi) w szablonie i po niej dodaj kod HTML:

HTML<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='telegram'><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='vk'><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) Zapisz ustawienia i przetestuj widżet na blogu Sprawdź, czy widżet działa na Twoim blogu. Jeśli ikony się nie wyświetlają, znajdź w szablonie linię </head> i dodaj przed nią następujący kod:

HTML<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Lub

HTML<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>

To wszystko na teraz, jeśli masz jakieś pytania, napisz w komentarzach.