We are updating, some features may not work !
Please leave a feedback if you face any problem.
Social Media buttons >> Javascript Social media buttons tutorial
X

Javascript Social media buttons tutorial


0

I wanted to add the social media buttons at top and bottom of website content. Code for adding them<script type="text/javascript">
var sloc=encodeURIComponent(window.location);
stitle=encodeURIComponent(document.title);

//Define the share buttons
var shrbtn="<b><span class='shrbtn' style='background:#E2E2E2;color:#000;'>SHARE</span><a href='https://www.facebook.com/sharer/sharer.php?u="+sloc+"' target='_blank' class='shrbtn' style='background:#48649F;'>facebook</a><a href='https://plus.google.com/share?url="+sloc+"' target='_blank' class='shrbtn' style='background:#DD4B39;'>google+</a><a href='https://twitter.com/intent/tweet?url="+sloc+"&button_hashtag=JAHAJEE&text="+stitle+"&screen_name=JAHAJEEcom' target='_blank' class='shrbtn' style='background:#00ACEE;'>twitter</a><a href='http://www.stumbleupon.com/submit?url="+sloc+"&title="+stitle+"' target='_blank' class='shrbtn' style='background:#313131;'>StumbleUpon</a></b>";

//Create new div element and add the Social media buttons to it
var newDiv1 = document.createElement("div");
newDiv1.className="sharebox";
newDiv1.className = "sbox";
newDiv1.innerHTML=shrbtn;
newDiv2 = newDiv1.cloneNode(true);

//The content must be enclosed in a div with unique id
//Here the id of the content div is "toshare"
//Change "toshare" to the id of div with content
//Add the Social media button on top of content
document.getElementById("toshare").insertBefore(newDiv1,document.getElementById("toshare").firstChild);
//Add the Social media button at bottom of content
document.getElementById("toshare").appendChild(newDiv2);
</script>

//Highlight the link and define the style
//Change style/design as per your need
<style type='text/css'>.shrbtn{padding:5px;color:#FFF;font-size:12px;margin:0;margin-right:1px;}</style>
I have added favourite share button for my website, you are free to add more service depending upon your need ! The script

  1. finds the url & title of the page called.
  2. Creates list of sharing services.
  3. Create new HTML elements and copies that for 2 share button blocks.
  4. Adds those share buttons block on top and bottom of content div.
You can check the demo at Social Media Buttons example.

Please note few points :
  1. Place this code after closing the div box which needs the share button (best before closing body tag.)
  2. Define and echo/print the div box prior calling this script.
  3. Follow KISS (Keep it simple silly) principle. Less is more ! More service you add, more cluttered/confused your Social media buttons will appear.

Rishi Kashyap | | EDIT