HTML social media buttons for Blogger, WordPress and other CMS

HTML social media buttons for Blogger, WordPress and other CMS

August 21, 2020

Greetings, friends. In this lesson, I will show you how to add social networking buttons to your sites and blogs (no matter which platform they are on Blogger or WordPress). And it will be not a plugin, but a widget, which is actually much better, because some plugins can negatively affect the speed of loading pages on your site. I plan to implement two types of widgets, one "Follow us in networks" and the second "Share in social networks". I will start with the first type.


Setting up HTML buttons Follow us in social network

Installing a widget We are in social networks for Blogger, WordPress, Joomla, etc. This includes a large number of media networks, but the widget itself at the start will display six resources: Facebook, Twitter, Linkedin, Pinterest, Youtube, and Instagram. Demo. The installation process is very simple and will take no more than 5 minutes. To install this widget, download file with HTML codes and follow the instructions in the video:


Installing a widget to share on social media


Installing a widget Share in social networks only for Blogger.

Well, let's get on with it, friends. This time the widget can only be used on Blogger. In this tool, I have added the most important media networks: Facebook, Twitter, Linkedin, Pinterest, Reddit, and Whatsup. To install, use the code below and watch the video instruction:
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;FontAwesome&#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;\f0e1&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;\f0e1&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, add it after 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='linkedin'><a class='' data-height='650' data-width='1000' expr:href='&quot;https://www.linkedin.com/shareArticle?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=950, height=650, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/> </li>                               
<li class='whatsapp whatsapp-desktop'><a class='' data-height='650' data-width='650' expr:href='&quot;https://web.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=900, height=550, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'/></li>
<li class='whatsapp whatsapp-mobile'><a class='whatsapp' expr:href='&quot;https://api.whatsapp.com/send?text=&quot; + data:post.title + &quot; | &quot; + data:post.url' rel='nofollow' target='_blank'/></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>

Connect Font Awesome icons:

<link crossorigin='anonymous' href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Video Instruction:

That's all if you have some question's use comment form.

Share by this in:

Author:

Hello, I'm Daniel. For a long time I successfully worked with Blogger templates and for this reason I want to share my experience with each of you.