How to Add Floating Share Bar on WordPress without Plugin
Few days back I wrote a post which explained what are the best places on blog to put social sharing buttons. In that post I tried to explore, what are the heat zones on a blog post to put social sharing buttons. In conclusion we came out with two best places and today I am going to explain one of them. This will help even those bloggers who are not much technically sound but do understand a little bit of css and html stuff.
Being a wordpress use we rely heavily on wordpress plugin, but today I am not going to talk about any plugin implementation for social sharing button but rather placing them manually.
Why Placing Social Buttons Manually if We Have Plugins
WordPress stores everything in database tables and when we install plugins then they also create tables for their use. These tables keeps track of plugin configurations and setting related to every page. If you blog is growing then certainly these tables will grow and data retrieval will take more time. Remember loading time is one of the factors in search engine ranking.
Thumb rule for WordPress bloggers should be : If you can implement something manually then don’t use plugins. Plugins do simplify our lives but they also increases site load time which is really bad.
I am not saying that you shouldn’t use plugins. WordPress without plugins is like man with undergarments only.
Why Floating Share Bar is Useful for Blog
Sharebars are useful because of many useful and interesting reasons.
- They adds interactivity to your blog post.
- If you have wrote something useful and interesting then you might become famous in very short time because people tend to share useful stuff socially. (So, always write useful stuff)
- Search engines are considering social engagement of site as ranking criteria.
- There can be hundred more reasons but the best one is, it increases user engagement and bring targeted traffic which in turn increases sales ( if you are into affiliate markiting ).
How to add Floating Share Bar Without Plugin
Let’s implement Floating Share Bar step by step. I’ll be dealing with CSS and HTML stuff.
I am using thesis theme which gives me all sort of flexibility to move div’s around. Thesis is little expensive and requires lot of editing to get a better and professional look. To save time and energy you can download beautiful & professional themes from theme junkie. There we can implement it via wordpress widgets (discussed below).
Step 1: Login to your wordpress and go to Appearance > Widgets. Under “Available Widgets” area look for “Text” saying “Arbitrary text or HTML”. You need to drag this to one of your sidebar to the right.
Step 2: Now we will add a div into our newly dragged text area.
The outer div (sharebar_wrapper) will work like a wrapper and inside this div we will create other divs to hold social buttons, one for each.
HTML: (you need to paste only html in the above created text area)
<div id=”sharebar_btn”> put twitter code </div>
<div id=”sharebar_btn”> put facebook code </div>
<div id=”sharebar_btn”> put google+ code </div>
CSS: (Paste CSS code into your style.css file)
background: none repeat scroll 0 0 #FFFFFF;
Now just have to go to facebook, twitter and google+ pages to get their sharing button codes. Just paste those codes and you are done with it. Save it.
Get codes here:
Final Output after Implementation
Question / Answers
- Which side (left/right) should we prefer to put these floating share links?
- I have found that in this implementation social sharing buttons works best to the left side of the post. Because they remain available throughout the post and if anytime user thinks that it’s worth sharing they simply click and share.
- How many social buttons should we add at floating sidebar?
- I prefer 3 or max 4, the most useful one’s. You can add as many you want.
- I like to change the looks of these social buttons.
- Many kinds of buttons are available and you can choose the one you want. I prefer big buttons you might like small buttons. As far as background of sharing block is concerned you can control that with above discussed CSS.
If you have any more question or finding any sort of difficulty then ask without any hesitation. I’ll help you out.