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.
<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…
© copyright 2018 – All rights reserved