How add Social media plugin or Follow buttons and widges in blogger.Get the code and paste it.

When we create website or blog in blogger.After some time we know that social media plugin or social media button is very important for our website.
If we have a account on instagram,facebook,Twitter etc.Below we have given the code that that you can paste as shown in images and you can easily show the social media buttons on your website or blog.To easily visit your instagram,facebook etc account.Which is really important for to get traffic on your blog or website.





You have to Follow Steps given Below and you get social media Follow buttons on your Website.
1.Show Facebook page on blogger.
Step 1-
Go into layout option of blogger.
 


Step2- click on add the gadget and Select the html/javascript . 


Step 3 -paste this code in the html javascript gadget

code


<center><div class="fb-padding"><div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3&appId=1395743857335531";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page" data-href="#" data-width="340" data-height="230" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div></div></center>


paste this code and paste it in html javascript gadget and add your facebook URL in place of # highlight in the code
Step 4 -after place this code .paste your facebook page Url in place of # and save it ,click on save arrangement.
and go to your website page you will see the facebook page like shown in below image
2.If you have to Add social media buttons like this
Code to add This type of Social media Buttons

<style>
.to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow .fa-twitter{background:#55ACEE}.to-social-follow .fa-google{background:#dd4b39}.to-social-follow .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow .fa-instagram{background:#125688}.to-social-follow .fa-pinterest{background:#cb2027}
</style>
<div class="to-social-follow">
<a href="#" class="fa fa-facebook" target="_blank"></a>
<a href="#" class="fa fa-twitter" target="_blank"></a>
<a href="#" class="fa fa-google" target="_blank"></a>
<a href="#" class="fa fa-linkedin" target="_blank"></a>
<a href="#" class="fa fa-youtube" target="_blank"></a>
<a href="#" class="fa fa-pinterest" target="_blank"></a>
</div>
 Same Steps you have to Follow that given above to add facebook page.

3.If you have to Add social media buttons like this
Code 
Code to add This type of Social media Buttons


<style>
.techornate-social-buttons ul{padding-left:0;list-style:none}.techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}.techornate-social-buttons ul li{margin-bottom:10px;width:100%}.techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1}.techornate-social-buttons li a.social-btn-facebook{background:#3b5998}.techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}.techornate-social-buttons li a.social-btn-youtube{background:#cd201f}.techornate-social-buttons li a.social-btn-instagram{background:#405de6}.techornate-social-buttons li a.social-btn-google{background:#dd4b39}
</style>
<div class="techornate-social-buttons">
<ul class="sidebar-social clearfix">
<li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li>
<li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>
<li><a href="#" class="social-btn-google">Follow on Google+ <i class="fa fa-google"></i> </a></li>
<li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li>
<li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li>
</ul>
</div>

Same Steps you have to Follow that given above to add facebook page.
4.How to add Instagram page on Blogger like this
Step 1-go to your instagram account
Step 2-select those image from your account that you have to show on website.
and Click on the three dots Infront of the name of your account

Step 3-Click on the Embed option like show in below image

Step 4-After click on Embed Option you get code copy that code as it is.

Step5-Go into your blogger layout section .

Step 6- Click on add gadget and select Html/javasrcipt.
Step 7-Paste the Embed code at it is like shown below
Step 8 -save it and click on save arrangement.And go to your website refresh the page and you will see that the instagram page on your blog or website.



In this way you can easily add social media buttons,widges.Which is really helpful for your website.

Post a Comment

0 Comments