This tutorial is about that how to add simple social share buttons to your website without difficulty. This will allow your visitors to share your article/content within their social networks.
There is very simple method to make this. We will share the code of some popular website like Facebook, Twitter, Google Plus, Digg, Reddit, Linkedin, Pinterest, Stumblea and also you can email to your friends directly.
Social Share HTML Buttons Tutorial
Step 1:
First of all get some attractive social sharing images.
Step 2:
Now you have needed to style your buttons. Here is basic CSS code that can apply the default settings within your <HEAD> tags.
<style type="text/css"><br>
#social-share-btns img <br> padding: 5px;<br> border: 0;<br> box-shadow: 0;<br> display: inline;<br> <br>
</style>
Step 3:
After placing your CSS in head tag, now you need to add the HTML script for the buttons in <body> area.
<div id="share-buttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.tutorialspalace.com" target="_blank">
<img src="images/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="http://twitter.com/share?url=http://www.tutorialspalace.com&text=Simple Share Buttons" target="_blank">
<img src="images/twitter.png" alt="Twitter" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.tutorialspalace.com" target="_blank">
<img src="images/google.png" alt="Google" />
</a>
<!-- Digg -->
<a href="http://www.digg.com/submit?url=http://www.tutorialspalace.com" target="_blank">
<img src="images/diggit.png" alt="Digg" />
</a>
<!-- Reddit -->
<a href="http://reddit.com/submit?url=http://www.tutorialspalace.com&title=Simple Share Buttons" target="_blank">
<img src="images/reddit.png" alt="Reddit" />
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.tutorialspalace.com" target="_blank">
<img src="images/linkedin.png" alt="LinkedIn" />
</a>
<!-- Pinterest -->
<a href="javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());">
<img src="images/pinterest.png" alt="Pinterest" />
</a>
<!-- StumbleUpon-->
<a href="http://www.stumbleupon.com/submit?url=http://www.tutorialspalace.com&title=Simple Share Buttons" target="_blank">
<img src="images/stumbleupon.png" alt="StumbleUpon" />
</a>
<!-- Email -->
<a href="mailto:?Subject=TutorialsPalace&Body=I%20saw%20this%20and%20thought%20of%20you!%20 http://www.tutorialspalace.com">
<img src="images/email.png" alt="Email" />
</a>
</div>
Now you will get your own share buttons running and up.
See Demo of Social Share Buttons
Social Share HTML Buttons Tutorial
No comments:
Post a Comment