Social Media buttons

811 Views | Rishi Kashyap | 1 FOLLOW

    Social Media buttons


    Adding Social media buttons not only allow viewers to like or share your content easily, but also increases traffic to your website. These Social media buttons also show the count of like/share, indicating popularity of content.

    When I compared Facebook Like vs Share, I started to shift from like to share buttons and soon made my own Social media buttons for better user experience.Social Media buttons

    Rishi Kashyap | 6 years ago | EDIT | REPLY

      X My own Social media buttons

      For years I used addthis services for social media buttons and am still satisfied with their great service, however there were few problems:

      1. Difficult to modify Social media buttons
        Addthis easily places social buttons on website, however I found it difficult to modify (float, fix the buttons) to sync with my website design.
      2. More server calls and hence more pageload time
        For every social media button, my webpages used to call Addthis and then later required media buttons like Facebook, G+ etc. Recently when facebook like buttons were having problems, the page was taking few minutes to load completely creating terrible user experience. I decided to switch to text only Social media buttons then.
      3. Most users still copy URL and share
        My Addthis analytic showed that 80% viewers copied url for sharing, perhaps because sharing buttons were at bottom of content. I placed those buttons way down for better user experience, as told before.  
      4. Social media buttons were bad for SEO
        Social buttons could be placed anywhere on website but for better design some extra div needs to be created. While search engines ignored the Javascript, these extra divs pushed the content down. To avoid this and better SEO I always placed the Social media buttons after the content.
      5. Not crazy about social media popularity count
        I am not crazy how many shares/likes an article got. Any content which gets popular will drive more traffic for that page and I could always track its progress through Server log Analytic. Just check the page and referrer, this makes those count absolute numbers nothing much !

        I wanted to remove 3rd party dependency & switch to "share" buttons with text link for better pageload, better SEO and better sharing, so I created my own customized Social media buttons in Javascript with few favorite service.

      Rishi Kashyap | 6 years ago | EDIT | REPLY
        X Javascript Social media buttons tutorial

        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);

        //Define the share buttons
        var shrbtn="<b><span class='shrbtn' style='background:#E2E2E2;color:#000;'>SHARE</span><a href='"+sloc+"' target='_blank' class='shrbtn' style='background:#48649F;'>facebook</a><a href='"+sloc+"' target='_blank' class='shrbtn' style='background:#DD4B39;'>google+</a><a href='"+sloc+"&button_hashtag=JAHAJEE&text="+stitle+"&screen_name=JAHAJEEcom' target='_blank' class='shrbtn' style='background:#00ACEE;'>twitter</a><a href='"+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 = "sbox";
        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
        //Add the Social media button at bottom of content

        //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 | 6 years ago | EDIT | REPLY