Sharebar WordPress Plugin
By Monji in Freebies + Resources104 CommentsNote: I’m moving support for this plugin from the comments to the Discussion Forum in hopes of keeping things more organized. Please post your support questions and requests there.
My first ever WordPress plugin! Sharebar adds a dynamic and fully customizable vertical box to the left of a blog post that contains links/buttons to popular social networking sites. For wide blogs, a vertical bar with popular sharing icons appears on the left of your post. If the page is resized, the vertical bar disappears and a horizontal sharebar appears under the post title.
This Sharebar isn’t a new idea at all, in fact the plugin is meant to mimic Mashable’s bar almost exactly. I most recently saw the effect on Inc. Magazine and after trying to find a plugin for it without success, I decided to make one myself. As with all of my plugins, I tried to keep things simple but customizable, so some effects were sacrificed for performance gains.
Try it Out!
I’ve enabled the plugin on this page so you can try it out – it should appear to the left of the post. If you resize the browser to less than 1000px, the sharebar should disappear from the left and a horizontal Sharebar will appear beneath the post title.
Download
You can view the plugin details at WordPress.org or view a simple demo.
Usage Instructions
WordPress makes the process pretty painless: download the plugin, upload it to your plugins directory and activate it in the WordPress admin panel. The plugin is enabled automatically when you activate it so that’s really all there is to it.
Settings and Customization
You can change nearly everything about the plugin from the Sharebar settings page (in the WordPress admin under Settings). The main page displays all of the active plugins – from here you can change their order, edit the button code or delete them. You can also add new buttons or reset them to the default configuration, which features TweetMeme, Facebook, Google Buzz, Digg and a standard e-mail button.
The Settings page allows you to disable the plugin from automatically adding the sharebars – this is useful if you’d like to position them somewhere other than before the post content. You might need to do this if your template or theme uses the overflow CSS position, as that may sometimes prevent the Sharebar from being visible outside of it’s container element. You can also disable the horizontal share bar that appears beneath the post title, change the location of the main vertical Sharebar (left or right) or adjust the offset/margin of the Sharebar element.
Lastly, you can also change the way the Sharebar element itself looks by modifying the CSS file found in the plugin folder. The design of the bar is meant to generic, feel free to customize it to fit your needs.
Compatability
I’ve tested the plugin on Firefox 3, IE7, Safari, Chrome and Opera – it seems to work fine in all of them. How it looks on your blog can depend on your theme and CSS files, however, so check those files first to identify the problem (the overflow:hidden; CSS declaration can hide the bar at times).
Final Remarks
Since this is my first WordPress plugin, please let me know what you think and if it’s useful to you. I’d love to hear suggestions on how to improve it. This is my first public foray into WordPress development but I’ve also been making a lot of progress on my custom themes framework, I think a lot of you will like them once they’re released as well. Also, all of the files are on Github, so feel free to fork away!
As always, please subscribe to RSS feed or follow me on Twitter for more posts and goodies like this.
Smashing Magazine
Six Revisions
Noupe
SpeckyBoy
Dawghouse Design
Hongkiat.com
When I try to Activate plugin it says “Parse error: parse error in C:\wamp\www\mushive\wp-content\plugins\sharebar\sharebar.php on line 157″ Its the last line of the file.
Hey Nabeel, what version of WordPress are you using? Also, did you download the plugin from here or on Github? I can’t seem to replicate that error.
I am using v2.9.2. I downloaded it from here. Seems like its a problem only on localhost. On my website its working fine.
Glad to hear that Nabeel. It’s strange it wasn’t working for you on localhost, I did all of my development on my Windows machine running XAMP, seemed to work fine.
This problem has been fixed in the latest version, 1.0.6 – please try the plugin again if you can!
I downloaded from here, install it, and dont work on my site…
Do you have a link to the site? What browser are you running? Did the horizontal sharebar appear when you resized the browser? Chances are it was a CSS problem – the main container may have hidden the sharebar as it has a negative margin. Try removing overflow:hidden; if it is applied to the container element.
Funny, I’ve been searching for this the other day :D
Also I have to thank you for making it able to add any kind of button with any kind of script in there!
This is what makes this plugin unique!!!
Thanks Eli, glad you’re finding it useful!
This Sharebar Working Fine For me! :D
Great to hear Karthikeyan, I’m glad it’s working out for you! I saw it out on your blog and it makes me feel tingly inside to see other people benefiting from my work, so thank you for that.
To everyone else, if you’re using this plugin, please leave a link to your blog here so I can check it out!
Great plugin! But please optimize you code, because it will badly pull down the page loading speed.
Thanks ww. Since I’m relatively new to WordPress plugin structures, do you have any tips to better optimize? I agree that it does tend to slow the single post page but I think that’s due to each button being loaded from a different site (ie Tweetmeme, Digg, Facebook, etc.). Since they are being loaded before the post content itself, if they are being slow your page will render slow as well.
The only solution to this I can think of would be to load the Sharebar dynamically after the page has loaded, however I tried that initially and a couple of buttons did not allow that (TweetMeme to be specific).
If you have any other suggestions I’d love to hear them.
I will deactivate it temporarily until you release a updated version, I’m looking forward it!
Hi, I’m also getting this:-
“Plugin could not be activated because it triggered a fatal error.
Parse error: syntax error, unexpected $end in C:\Inetpub\elderridge-puppies.co.uk\wp-content\plugins\sharebar\sharebar.php on line 157″
Version 2.9.2
Plugin downloaded from this site.
Regards
Hi Aaron, thanks for the response. It seems like the plugin is having trouble with certain Windows localhost setups (although XAMP works) – I’ll try to recreate it myself and report back.
Unfortunately ..
I can not put plugin outside body …
How do I solve the problem ?
I just verified that using any of the PHP code (like
<?php sharebar_button('digg'); ?>) works fine outside of the loop – where in your template did you put the code? If you’re doing it manually you should also disable Auto mode in the settings to avoid duplicate code.Nice Plugin.
How do you prevent the sharebar from showing up in wp-email. When the post is emailed to a friend, the sharebar gets included but it’s missing its buttons and stuff so it does not look right.
I would like to prevent it from displaying in wp-email.
Thanks.
Thanks Jason! I haven’t used WP-Email so I’m not sure of how it works, but I assume it’s calling the filtered version of the_content. Sharebar only filters the plugin on single posts and pages if Auto mode is enabled, so if you disable Auto mode and manually add the Sharebar PHP code to your single.php template, it shouldn’t be displayed on anything else.
Hope that helps!
Nice plugin, I was looking for exactly that but apparently not working on my site
Is the Sharebar just not displaying or was there a PHP error? What was the exact problem with it?
Sharebar is not displaying, apparently no PHP error, I tried to put code manually into template but still nothing
Nice plug-in. Now using it on my blog. I would like to add Topsy button. How do it do that? I am not very good at coding. I tried but failed.
Also are the small icons displayed by default below the posts. In my theme only the vertical bar show. I want both the horizontal and vertical bar to be present in single posts.
Hey Agent Deepak, thanks for the response! I see you were able to add a StumbleUpon button – it should be essentially the same process for Topsy (I assume). I haven’t tested out every service but since the button codes are hard-coded into the theme via PHP, they should all work fine. At first I tried loading them dynamically via jQuery but that caused issues with some buttons, specifically TweetMeme, so I opted for the current solution which makes it more compatible.
If you want the horizontal bar to also be visible without having to resize the page, you would have to edit the CSS file and remove the
display:none;from #sharebarx.I have removed the display:none; from #sharebarx. But the horizontal bar still doesn’t show.
Is it possible that my theme is missing some required codes?
Actually I forgot one thing – you also need to disable the horizontal bar in the plugin settings as that affects the javascript for the plugin. After you’ve done that, manually add the
<?php sharebar_horizontal(); ?>to your post template where you’d like the horizontal bar to appear. That should work and force the sharebar to appear at all times (assuming your CSS is correct). To make sure, check the HTML source and verify that the list is being created (it has an ID of sharebarx).Very nice, I’m a big fan of WordPress and it’s great to see new really useful plugins getting released. I’ll download and check it out, looks exactly like what I have been looking for for weeks. So, thanks alot!
Thank you James, I appreciate that! Try it out and let me know if it works or if you run into any problems.
Thank you for a great plugin, I had one before using jQuery and it was a lot more work than the ‘Sharebar’.
I have one issue, though, that comes from the different post templates used on my site (http://theurbn.com).
Examples of the issue can be seen here:
http://www.theurbn.com/2010/05/government-support-urban-developments/
How do I make it so that the Sharebar recognizes the wrapper of the entire page and not just the post content?
Thanks in advance
Thanks for the response! For more complex post templates, I would suggest disabling ‘Auto’ mode in the plugin settings page and then manually add the
<?php sharebar(); ?>and<?php sharebar_horizontal(); ?>to your template. That way you can place the sharebar in the wrapper for the entire page. Hope that helps!PS – Great job with the design of the site, it looks fantastic!
Thanks Monji (for the kind words about the design and for the help too).
I have managed to fix my problem pretty easily. I haven’t added the horizontal code (I don’t know exactly where the Sharebar would be positioned if it were to be horizontal…
Thanks again.
No problem, glad to hear it worked out! You can see the horizontal sharebar in action on this blog by resizing the window to less than 1000px – it creates a horizontal bar with the smaller share buttons. It’s totally optional but you could stick it in the footer or before/after the post title. Anyways, good luck!
Hi,
This looks great, but I was wondering if you have an alternative version that works with non-WordPress websites, and could contain other HTML. Basically, I love the way it stays visible ahd hugs the top of the window, but I want to do this with different HTML, i.e. a div tag with some text or images inside. Thanks, hope to hear back from you.
Hey Edward, thanks for the feedback! It’s actually pretty simple to apply the effect to any div element – all I’m doing is changing the CSS position property of the element using jQuery when the page scrolls beyond it’s initial height.
You should be able to do something like that using:
2
3
4
5
6
7
8
9
var element = $('#divID');
var start = $(element).offset().top;
$.event.add(window, "scroll", scrollDiv);
});
function scrollDiv(){
var p = $(window).scrollTop();
$(element).css('position',(p>start) ? 'fixed' : 'relative');
}
In your CSS you should set the position of the element to relative (or absolute, but change it in the JS too then).
The code is relatively simple – it calls the scrollDiv function whenever the window is being scrolled up or down. The scrollDiv function checks to see if the top of the element is past the top of the page and if it is, it will apply fixed positioning to it, which makes it stick.
Hope that helps!
Thanks for this! Love it, exactly what i have been looking for.
Just wondering if there was a plug-in to get it to show up on the “article summary” or “front” pages. Again like how Mashable has the ability to “like” or “retweet” or “share” the article without actually opening the full article.
Thanks!!
Hey Michael, thanks for the compliment! I actually decided against putting it on the homepage as that would result in several sharebars on a single page. I guess it could be functional if the sharebars were static, however that defies the purpose of using my plugin. If you’re talking about adding just one sharebar to the side of the main homepage (or elsewhere), that can be done by adding the sharebar code manually to the relevant template files (index.php for homepage, archive.php for archives, etc.).
Michael,
Great plugin! But I am having issues with the Sharebox background and Buttons not lining up. Any suggestions?
Also, the horizontal buttons are not showing up in a smaller browser.
Thanks
Hey Jay,
I just took a look at your site and it seems that this style in your CSS:
#content .post ul liis overriding the Sharebar CSS by adding padding to the list elements. You could either remove this code or change the Sharebar CSS to read#content .post #sharebarinstead of just#sharebar.I’m pretty confident that should work as I just tried it out myself using firebug and it makes the Sharebar look fine.
Good luck!
Monji
Michael,
You are a genius! That worked perfectly. I cannot tell you how happy I am to have found your site. Great plugin!
Jay
It’s actually Monji (not Michael), but thanks though! =D
Hi Monji,
Another quick question:
How do I get it so that the facebook shows the number of people that have shared the link to facebook? Right now it only does so when you click the facebook but goes back to not showing when you refresh the page.
How can this be fixed?
Sorry Monji! Don’t know what I was thinking…
Hey, I got problems with the bar.
It does not work well on my website when browsing it with IE7.
The bar, instead of beingon the left of the screen, it is in the middle of the text.
Do you know how to fix this?
Now to get this working on Joomla!!
How can I add and extra service like Reddit?
Nevermind
I normally display my Digg button conditionally based on a custom field like so:
`ID, "compact_digg", true))) { ?><?php echo '<a></a>'; ?>
`
I tried pasting the php into the sharebar admin but it doesn’t seem to handle the php correctly. How can I make the sharebar digg button conditional like I currently have it?
sorry about that, my code got stripped out.
Basically I just need to be able to execute some php in the edit button section of the admin area. Is that possible?
Hey Matt,
The way the plugin is structured right now, it’s not interpreting the code you enter as PHP, rather just displaying whatever is stored in the database as text and replacing certain values (like [url], etc.).
If you’d like it to interpret PHP, I would probably suggest manually adding that button to the code to the sharebar() function in the sharebar.php file – it’s probably the fastest/simplest way of going about it.
Hope that helps!
Monji
Hi,
I am trying to add it to my template files so that it appears on my homepage and all pages. so I would need to add it to index.php and template_fullwidth.php, they are the only 2 I use.
I can not seem to figure out where to put
it keeps breaking into my layout rather than hanging on the side?
any ideas.
happy to give you my login
Site has to be up tomorrow night!
thanks in advance
Mark
Hi,
sorry to post again, I have been trying and failing some more. As I have only 4 pages, no posts in the site I want to float the bar on all of them
I have tried putting the code () in so that it appears just inside the head tag and same with the body tag.
body seems to be defined in my header.php file?
<body id='’ >
I also tried putting it before everything in index.php and also after get header
<?php
In all cases it appears but as part of the page, not floating, and buttons misaligned
hope you can help.
I really want to use it.
Mark
Hey Mark,
To use the sharebar on pages, disable Auto mode in the settings and place the
<?php sharebar(); ?>code in your page.php template file. Where you place the code will dictate the exact positioning of the sharebar, however that can be edited using CSS. By default the plugin will include the required javascript file (sharebar.js) to single posts and pages, however if you want to add it to every page just edit line 130 in sharebar.php.Hope that helps,
Monji
Hello Monji, im hawdee from Indonesia. Your plugin is what i need! and i really loves it! :D
however, i use mobipress plugin to display mobile themes to my site and i dont want this plugin appear on mobile version of my site.
So, i decided to turn off auto add to single post and manually add: and
But the horizontal didn’t appear when i resize my site, so i tried to searching through your code. Then i found a little fix:
-in default, the sharebar php, function sharebar_horizontal have the tag:
if($echo) echo $str; else return $str; I Change to this:
if($print) echo $str; else return $str; and Voila it works now! :D
Just to let you know, but pardon me if im wrong or make a mistakes and please excuse of my bad English… :(
great work, 2 thumbs up for this Plugin! =D
Hey hawdee – you’re absolutely correct, that was a bug on my part. Thank you for finding it!!
I’ve fixed it and the plugin files should now reflect the changes.
Hey, I got problems with the bar.
It does not work well on my website when browsing it with IE7.
The bar, instead of being on the left of the screen, it is in the middle of the text. My website is http://www.padelcentrum.nl Works well with Firefox thou.
Do you know how to fix this?
Hi norbeto,
This is likely due to conflicting CSS – please make sure that the CSS stylesheet from your site does not interfere with the sharebar UL code (which can affect the float or padding).
Hope that helps!
Monji
I have one more problem. I just created a contributor user for my blog and I see the setting of Sharebar are accessible by a Contributor account.
I do not want that. What should I do so that its settings are editable only by administrator account.
Plz reply soon. URGENT.
Hey Deepak,
I actually didn’t try that out before – I’ve added a restriction so only people who can manage the settings should be able to see the plugin page.
Please let me know if that works!
Thanks,
Monji
Hi,
I have finally used it on my blog. Now I got a concern, why is it that sometimes or more frequently the number or the sharing count on Facebook doesn’t show? As for my site, I already have around 35+ facebook shares on my post but the plugin shows none on my facebook vertical bar.
Is that a normal? or is it a bug?
One more thing, how can I add the “Yahoo buzz” on the vertical bar? Where can I get the code for that?
Thanks so much and more success to come!
Thanks for the comment! I’ve actually been trying to figure out the Facebook shares issue myself – I’ve actually had problems with the button not displaying the number of shares in the Sharebar and in the footer of my blog post (so it’s not due to the Sharebar). I am tempted to try a variation of that code or use an altogether different service to display share counts. I used Facebook instead of fbshare.me because I assumed it would be faster, however the lack of share counts is annoying.
To add Yahoo! Buzz (or any other button), go to the plugin settings page and simply click Add New button. The big button is displayed in the vertical sharebar and the small button is displayed in the horizontal one.
Hope that helps, and thanks for using Sharebar!
Monji
Hi,
The facebook share counts is already working. But I have a problem when I tried to add the Yahoo Buzz button. It is merging with the other button.
Screenshot below: http://img375.imageshack.us/img375/3373/59311816.jpg
great plugin, seriouly love it..downloaded it, activated it several times… I’ve found an issue between google counter with my alexa widget…google buzz counter make my alexa widget disappear…, when I remove the google buzz suddenly alexa widget appear…need your help since I’m not expert in this..thanks
Hey etomyam, thanks for commenting! I haven’t tried the Alexa widget so I’m not sure if there is a conflict when using that with Google Buzz. What you should do is create a blank HTML page and paste both button codes on it to see if they interfere with each other in an isolated environment. If they do, then you would have to find alternative buttons or contact the site administrators and inform them of the behavior (that is out of my reach as well). If they don’t, then there is a possibility of conflicting CSS, though that sounds unlikely from my experience.
I would also try variations in the button order, perhaps loading one before the other might help.
Good luck!
Monji
it would be useful if i could remove it from individual pages
Actually, you can do that with a bit of coding. Turn off Auto mode in the Sharebar settings and manually add the sharebar PHP code to your page template in a conditional loop, like so:
2
3
sharebar();
}
That example should display the Sharebar on any page other than the About or Contact pages. You could do the same for categories, archives, etc.
Hope that helps!
Monji
Hi,
Thanks for the great plug-in.
I managed to play with it a little bit to look very similar to Mashable and I can send you the files if you provide me with an email.
One note however, the latest update to the plug-in have crashed my word press 3 database and the only way to get it live again was to delete the plugin and install the older version.
Regards
M
Hi Mohammad,
Thank you very much for pointing that out, I’ve fixed the issue and committed a new version. Please upgrade the plugin to fix the problem.
Sorry about that!
Monji
Didn’t work for me. I am using WP version 2.8.6 (I’ll update soon to 3.0).
This is the error I am getting on the backend and frontend, once I activate it:
Fatal error: Call to undefined function wp_get_current_user() in ../wp-includes/capabilities.php on line 926
Hey Etienne,
I’ve fixed the problem causing that error – please try it again after upgrading the plugin.
Thanks and sorry about that!
Monji
Hi there :-)
Just posting to let you know that after the automatic update to the latest version it broke my WP-3.0 blog. Same error as above. Bad thing is that the error broke the wp admin interface, too. Non-tech users might be in for a surprise ;-).
Cheers
Slawo
Fatal error: Call to undefined function wp_get_current_user() in ../wp-includes/capabilities.php
Hey Slawomir,
I’ve just updated the plugin to version 1.0.3 – this one should fix the error. Sorry for that, please try it again if you can.
Thanks,
Monji
Hi Monji,
Thanks for posting the update so quickly. Now everything is back to normal again :-)
Cheers
Slawo
Nice info :) really love this.
I’m using Digg digg now, but I’ll try Sharebar too.
Hi Monji,
I am having issues getting the sharebar to be visible. I am sure it is in my CSS because I do not see any errors. However I am not real comfortable with CSS. Is there any way you could take a look and tell me what to do to get the sharebar working. I have read through all the questions and made sure that I do not have the overflow:hidden also I tried adding the sharebar manually but it still did not show up. Thank you so much for the great plugin and all the support.
Hi Tyson,
I just looked at your site and it turns out the problem is actually due to the JavaScript function not being called – are you loading the plugin normally through WordPress? Maybe another plugin is removing the required JavaScript? You should have something like this in the footer:
Thank you very much! I really appreciate your help. I got the plugin to work via your advice and I think it is amazing!.
i’m having the same problem! when i add this section of code to my sidebar, the javascript you mentioned seemed to be removed. but my codes don’t seem to do that. It’s just codes to add 3 posts to my sidebar. Pls help!
2
3
4
5
6
ID, "thumbnail", true) ): ?>
<a href="" rel="bookmark"><img class="thumb80" src="ID, "thumbnail", true); ?>" alt="" /></a>
<a href="" rel="bookmark"><img class="thumb80" src="/images/thumbnail.png" alt="" /></a>
<a href="" rel="bookmark"></a>
<a class="readMore" href="">Read More</a>
Error with localhost .. when the plugin is activated
Parse error: syntax error, unexpected $end in C:\xampp\htdocs\wp3\wp-content\plugins\sharebar\sharebar.php on line 156
I haven’t been able to figure out why certain installs on Windows/XAMPP aren’t working, if you or anyone else can help troubleshoot this error I would be very grateful.
how can I remove the sharebar from showing up in my /about page and other related pages?
I’ve added a new setting that allows you to pick whether you’d like it to show up in your posts or pages (or both). Please update the plugin to see the new settings.
Thanks,
Monji
thank you!
I get this error Get this on Ubuntu 9.04 , Nginx/fpm-php with WordPress 3.0, MySQL DB 5.1
2
Parse error: syntax error, unexpected $end in /home/public_html/mwamba.com/public/wp-content/plugins/sharebar/sharebar.php on line 157
Sorry forget to say I Installed from WordPress plugin site and I have Version: 1.0.5
Hey Mwamba,
I think I figured out what was causing that error – your PHP setup is configured to ignore short tags. While my plugin used mainly normal
<?php ...tags, I did have one<? ...tag as well, so I’ve changed that to the full form.Version 1.0.6 should correct this issue – please try updating the plugin (once again) and let me know if it works.
Monji
It’s fixed and now working properly , thanks for the great work
Good day
Hi,
My sharebar has disappeared when I updated my plugin automatically from my admin panel. Though it is still active, it doesn’t show on my page. Any help?
Plus one more thing, before the update I was trying to add the “Yahoo buzz” on my sharebar but seems it doesn’t fit correctly.
See the screenshot below: http://img375.imageshack.us/img375/3373/59311816.jpg
Hey Pinoy,
You have to re-activate the Sharebar in you settings – go into the settings page and take a look at the first two checkboxes. Make sure at least one of them is checked.
For Yahoo Buzz, I would suggest playing with the CSS or even adding this right after the code:
<div style="clear:both;"></div>.Hope that helps!