Adding A Facebook Twitter Share Button To Your Word Press Blog

UPDATE 17th Jan 20-13 : My current favourite sidebar sharing plugin that works well on mobile devices is AA’s Digg Digg Alternative plugin , you can download it here. http://wordpress.org/extend/plugins/aas-digg-digg-alternative/  
Many of the most popular Social Media websites use a sharing widget on the left side of their blog posts. This tutorial will show you a simple wordpress plugin you can use to achieve a similar result
media_1318502368873.png

As you scroll down the post the widget stays in place which means its always visible on the page increasing the liklihood of people sharing

media_1318502412810.png

The plugin we are going to use is called “Twitter, Facebook Like, Google Plus One Social Share

media_1318503308874.png

To add a wordpress plugin to your website login to your wordpress admin dashboard and select plugins on the left hands side

media_1318502437799.png

Click on “Add New”

media_1318502450271.png

Enter “Twitter Facebook Social Share”in the search box and install

media_1318502476948.png

Install the plugin and activate it

media_1318502500823.png

Now under Settings select TF social Share

media_1318502549616.png

You can now configure the plugin, select what social media sites you want displayed and where you want it to show up on your blog

media_1318502571921.png

You can configure how the left side floating option will be shown

media_1318502582533.png

You can also adjust the width and size of the social media buttons to match your blog design

media_1318502591334.png

By deafult the share box displays above each blog post

media_1318502616053.png

If you want it to show on the left side of the post you need to alter the position setting

media_1318502666949.png

You can select where on the screen you want it to display

media_1318502650806.png

So now the plugin is activated and showing in the correct place all you now need to do is send some traffic and encourage people to share your content

media_1318502705436.png
 

Comments

  1. Thanks for sharing this plugin, I’ve been wondering about something like this for a while, and this really helps.

    A couple of things I noted though:

    1. It would be better if the left-side positioning could be set relative to the left side of the post container DIV instead of the screen. This presents a challenge because it doesn’t always display correctly, depending on the viewer’s screen resolution.

    2. Setting the plug-in to display the sharing bar on single posts also adds it to all the posts on the home page (if the blog is set up that way, which I believe most are). I would rather just see it on the left (or at the top) one time.

    3. Can you confirm that you had to implement some additional code on this site to detect the screen width and move the share code accordingly? That’s what it appears like, and maybe you could add that to the article for those who want to implement this cool plug-in.

    Thanks

    Nigel

  2. iandavidchapman says:

    I didn’t add any additional code I just experimented on two different screen sizes to see the results. If you watch towards the end of the video you will see this.

  3. Nice plugin tutorial Ian, it’s very similar to the Sidebar Share plugin which I currently use on my business blog. Do you know if this share button plugin is compatible with Genesis Theme?

    Thanks :)

  4. Many of us in the WordPress coding community do not recommend the ajax float boxes for the same reason your very own site is demonstrating: (screenshot) http://ow.ly/i/kVty You see it is floating over the text in a narrowed browser window. Also, because mobile devices do not render them your posts have no share buttons when visited from a mobile phone. These types of boxes are very tricky to implement well and not a stand alone solution unfortunately. Yours floating on the content makes it almost impossible to read the post. Sorry :(
    Kim

  5. Nigel, I replied below before reading your comment. This plugin is not hooked correctly unfortunately and lands over the text on narrow resolutions. You are right to raise those questions as it is why these types of plugins are not usually recommended as they tend to require a lot of additional tweaking and tend to lack mobile support.
    Kim

  6. Thanks for the plugin. I must say that for the people who DO view websites on their home computers, you now have it positioned too far to the right. I’ve learned that the baby boom generation like to bypass the computer’s default screen resolution and go to a bigger screen for easier viewing. The end result? On 19 and 20 inch screens (the majority of desktops), your website takes up the entire real estate and the plugin bar covers the text on the left. One day, when everyone has a 24 inch screen, this will not be a problem. Today however….

  7. This plugin needs some work – while good in theory as soon as you use an iPhone/iPad the left side floating margin size breaks down.

    The plugin needs some way of changing this for these types of browsers which are making up a huge number of page views on the average site.

  8. Problem with such plugin is you lose the iphone/ipad users…

  9. iandavidchapman says:

    Thanks for your input Kimberly, do you know anyone who has a similar plugin that is coded in a more optimal way? I admit I didnt check this on my ipad so I wasnt aware that it didnt show up

  10. iandavidchapman says:

    I just did a quick search to find a possible solution to the floating issue and found a post on Mashable where their devloper shares his code

    /***********************************************************************
    This is a simple plugin to allow you to toggle an element between
    position: absolute and position: fixed based on the window scroll
    position. This lets you have an apparently inline element which floats
    to stay on the screen once it would otherwise scroll off the screen.

    Author: Chris Heald (cheald@mashable.com)

    Copyright (c) 2011, Chris Heald All rights reserved.

    Redistribution and use in source and binary forms, with or without
    modification, are permitted provided that the following conditions are
    met:

    Redistributions of source code must retain the above copyright notice,
    this list of conditions and the following disclaimer. Redistributions in
    binary form must reproduce the above copyright notice, this list of
    conditions and the following disclaimer in the documentation and/or
    other materials provided with the distribution. Neither the name of the
    project nor the names of its contributors may be used to endorse or
    promote products derived from this software without specific prior
    written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS
    AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES,
    INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
    AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL
    THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
    INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
    NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF
    USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
    ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
    (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
    THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    ***********************************************************************/

    (function($) {
      var triggers = [];
      $.fn.floatingFixed = function(options) {
        options = $.extend({}, $.floatingFixed.defaults, options);
        var r = $(this).each(function() {
          var $this = $(this), pos = $this.position();
          $this.data(“floatingFixedTop”, pos.top);
          $this.data(“floatingFixedLeft”, pos.left);
          $this.data(“floatingFixedOptions”, options);
          $this.data(“floatingFixedTopOrigTop”, $this.css(“top”));
          triggers.push($this);
        });
        windowScroll();
        return r;
      }
      
      $.floatingFixed = $.fn.floatingFixed;
      $.floatingFixed.defaults = {
        padding: 0
      }
      
      var $window = $(window);
      var windowScroll = function() {
        if(triggers.length === 0) { return; }
        var scrollY = $window.scrollTop();
        for(var i = 0; i < triggers.length; i++) {
          var t = triggers[i], opt = t.data("floatingFixedOptions"), top = t.data("floatingFixedTop");
          if(top < scrollY + opt.padding && !t.data("isFloating")) {
            t.css({position: 'fixed', top: opt.padding, left: t.data("floatingFixedLeft") }).data("isFloating", true);
          } else if(top >= scrollY + opt.padding && t.data(“isFloating”)) {
            t.css({position: null, top: null, left: null}).data(“isFloating”, false);
          }
        }
      };
      
      $window.scroll(windowScroll).resize(windowScroll);
    })(jQuery);

  11. Thanks for the clear instructions. I actually took (massive) action and added this plugin to my site. Share button looks nice on my screen but have to see how it is with 15 inch laptop. Very useful post!

  12. iandavidchapman says:

    I also found another similar plugin called sharebar that I am going to play around with later and see how it holds up on mobile devices. http://wordpress.org/extend/plugins/sharebar/

  13. MaskMan says:

    https://www.facebook.com/groups/IamTheJoker/
     
    join my group , only for joker lovers , active people neded

  14. I like the valuable information you provide in your
    articles. I will bookmark your blog and check again here frequently.
    I am quite certain I will learn a lot of new stuff right here!
    Best of luck for the next!

  15. Undeniably believe that which you said. Your favorite justification appeared to be on the net the simplest thing to be aware of.
    I say to you, I definitely get annoyed while people
    consider worries that they just don’t know about. You managed to hit the nail upon the top as
    well as defined out the whole thing without having side-effects
    , people could take a signal. Will likely be
    back to get more. Thanks

Speak Your Mind

*