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
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
The plugin we are going to use is called “Twitter, Facebook Like, Google Plus One Social Share“
To add a wordpress plugin to your website login to your wordpress admin dashboard and select plugins on the left hands side
Click on “Add New”
Enter “Twitter Facebook Social Share”in the search box and install
Install the plugin and activate it
Now under Settings select TF social Share
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
You can configure how the left side floating option will be shown
You can also adjust the width and size of the social media buttons to match your blog design
By deafult the share box displays above each blog post
If you want it to show on the left side of the post you need to alter the position setting
You can select where on the screen you want it to display
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
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
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.
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 🙂
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
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
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….
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.
Problem with such plugin is you lose the iphone/ipad users…
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
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);
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!
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/
https://www.facebook.com/groups/IamTheJoker/
join my group , only for joker lovers , active people neded
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!
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
Remarkable! Its actually remarkable post, I have got much clear
idea on the topic of from this article.