I recently redid my social media submit buttons on DragonBlogger.com and I have to thank Devesh who runs TechnShare for the guest article he posted on Traffic Generation Café as well as Ana herself for having her social media buttons configured in the way which inspired me to change my own site.
The article you should read is titled How to add Social Media Buttons in WordPress and this will provide you with the code to add the buttons manually to Thesis or non-Thesis WordPress themes as well as showcase 3 plugins which can help add social media buttons automatically. I opted for the Custom Sharebar plugin because it allowed me to build new share buttons on the fly which make it easy for you to add a BlogEngage, Blokube, SerpD, BizSugar or any other of your favorite share site buttons.
With the Custom Sharebar it also puts the bar on the side of your post so that when a reader scrolls down, the Sharebar will scroll with the post. No longer does your reader have to remember to go back to the top of your post, they have the social submit buttons right in their peripheral vision the entire time. This in theory should increase the number of shares your article will receive.
Old Social Submit Buttons
Before the change you can see my social buttons are squished in my post on the top right, they are only at the top and on long articles you have to scroll all the way to the top to share my articles. This also causes images and text to either float to the left of the image or be pushed down which affects cosmetics.
New Social Submit Buttons
You now can see the buttons are off to the side of the post instead of inside the article, they are always at the eye level of the reader and will scroll with the content when it scrolls.
Setting up the Custom Sharebar
When setting up the Custom Sharebar you just install the WordPress plugin, then go to the options to start configuring which buttons you want to display.
You simply edit position #’s and decide which social articles you want to present on your site. Note, you probably should limit to no more than 5 or 6 tops so pick the article directories which convert the best or have provided you with the most traffic/votes previously for a good starting point.
When setting up the Twitter button, remember to click on ‘edit’ and add your twitter username in the data-via=”twitterid” section so it will have a via @yourusername when someone tweets your article. Or you can simply add your “Twitter username” to the sharebar settings instead. I preferred to use custom code so I can add the data-related to recommend other Twitter accounts after retweeting.
Building Custom Sharebar Buttons
It is very easy to build custom sharebar buttons, all you have to do is click “Add New Button”
Then all you have to do is name the button, and cut/paste the code for the “voting buttons” from the article directory you want to implement.
I used Blokube for this example, and chose buttons on the Blokube Voting Buttons page. All I did was cut and paste the code for 1 vertical button and 1 horizontal button.
Set the position # and checkmark enabled to enable the Social Submit button to show up on your site.
Then test the button to make sure it works properly.
When Not to Use Custom Sharebar
Custom Sharebar will put the Social Media Sharing buttons on either side of your blog posts, but if you have sidebar columns on both left and right side of your blog post, then the Custom Sharebar is better of not being used by default. You can use the custom code included in the Sharebar to put the buttons manually inside the post or instead use the Digg Digg WordPress plugin or one of the other plugins/php code tips recommended in the article on Traffic Generation Café listed above in this blog post.
Overall I am super impressed with the Custom Sharebar written by By Monjurul Dolon of DevGrow and I highly recommended it to bloggers who use themes which have sidebars on only one side of their blog.
What do you think of my new share buttons, do you like the new position and feature better than having them at the top right of the post? Share your honest input, if you liked the old method better let me know.
Custom Code Buttons for Sharebar:
Google +1 Button (Tall)
Google +1 Button (Small)
BlogEngage Vote Button