Simple Way to Add Social Media Buttons to Any Website

Today social media sites are the biggest sources of web traffic. More than two third of the total net users are using social networking sites every day! So, if you're still not integrated social media on your sites then you're missing a flow of huge traffic.


Here is very simple way to integrate social media buttons to your website or blog.

You just need to work with few of HTML codes. Let's see..

No#1.  First of all, go to the social media sites and copy the share Plugin HTML/JavaScript codes from developer section. Then paste those codes into a word file on your desktop. 

Now you need to create a vertical table with HTML code. If you want to add four social sharing buttons then you have to create a single row table containing four cell.

Here is the necessary HTML code to create the table-

<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> <td>Row 1, cell 3</td> <td>Row 1, cell 4</td> </tr> </table>

No#2. Place the code on your site's HTML body where you like to add social media buttons.The box will be shown like this-

Row 1, cell 1

Row 1, cell 2

Row 1, cell 3

Row 1, cell 4

No#3. Again go to the HTML table code and paste all four social media share Plugin HTML/JavaScript code one by one in place of- Row 1, cell 1 / Row 1, cell 2 / Row 1, cell 3 / Row 1, cell 4 .

At last replace- table border="1" to  table border="0"

Final code Demo

<table border="0"> <tr> <td>Facebook Code</td> <td>Twitter Code</td> <td>Linkedin Code</td> <td>Stumbleupon Code</td> </tr> </table>

The final code will be shown like this ( see the PDF file)

No#4. Some Social Media Sharing Button Code-

Stumbleupon Code:- 

<!-- Place this tag where you want the su badge to render --> <su:badge layout="5"></su:badge> <!-- Place this snippet wherever appropriate --> <script type="text/javascript">   (function() {     var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;     li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);   })(); </script>

Twitter Code:-

<a href="https://twitter.com/share" class="twitter-share-button" data-via="Add your own twitter user name">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id; js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Linkedin share button:-

<script src="//platform.linkedin.com/in.js" type="text/javascript">  lang: en_US </script> <script type="IN/Share" data-counter="top"></script>

Google+ Sharing Button:-

<!-- Place this tag where you want the share button to render. --> <div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div> <!-- Place this tag after the last share tag. --> <script type="text/javascript">   (function() {     var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;     po.src = 'https://apis.google.com/js/plusone.js';     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);   })(); </script>

No#5. Add more cell and add social media as you need. Final work will be shown like this- 

Hope this will be work on your site...