Custom Floating Bar on Homepage

Hello,

I want to show a custom floating bar on homepage.
Basically I need to show the Like button, Tweet and +1 button on it.

But facebook like button shouldn't like homepage url. It should be the page of the site on facebook. So, that if someone clicks on like button it goes on my facebook page.

can anyone has suggestion for this?

 

Add all the follow and share codes inside the following div container. you can change the height and width according to your needs

<div style="display:fixed; top:200px; right:5px;width: 50px; height:300px;"></div>

you should add the above in header.php file in the theme folder or just next to the body tag

 

I think you are looking for https://developers.facebook.com/docs/plugins/like-box-for-pages

 

Thanks for the helping guys.. But I know about these.. However, I want something else..

I need a floating bar on homepage with:
1. Facebook page like button
2. Twitter Follow button
3. Google Plus button

I have searched numerous plugins, but they only give the option to like the link of the page.. But I want when someone clicks on "Like", this is actually the like of my page, like its in likebox.

Any help?

 

Take a look at: https://developers.facebook.com/docs/plugins/like-button

You can place the URL of your FaceBook page inside "URL to Like" field.
Then, to get only a simple button, set "Button" to Layout, uncheck "Include Share Button" and "Show Friends' Faces" and hit "Get Code" button.
Copy the respective code where you want the button to be displayed and that's all for FaceBook.

For Twitter Follow.
https://about.twitter.com/resources/buttons#follow

And for Google Plus Button:
https://developers.google.com/ /web/follow/

 

Addthis.com comes with a floating like box container, i am not sure whether you can configure the facebook page in it. just try it.

 

I am so obliged, thank you so much for helping me out guys..

however, its still not solved..

I want the same thing as this plugin: http://wordpress.org/plugins/wpsite-follow-us-badges/
but this is a widget, however I need this thing in floating bar on homepage.
Any help?

But thanks again guys for helping me.

 

i did try that widget now, it did not work. But it is easy for your requirement.

what you have to do is create a sidebar that will be available only in the homepage template. And now you add the widget in this homepage sidebar.

just google how to create "home page sidebar in wordpress"

you are almost there...

 

But the problem is that I dont have any widget on my custom home page

 

The answer is in my previous post, you have to create sidebar in the home page, just google to find how to do it. you need to know HTML CSS AND LITTLE BIT PHP. or create your own floating box with the code what i gave and insert into the home page template.

 

Thanks bro..

I have found something..
http://wordpress.org/plugins/webloggerz-wp-floating-footer-bar/

This is exactly what I need. However, its showing the bar on every page.. I'm looking at the code, but can't figure out how to make it show only on the homepage.

 

you can change the css of this bar, but whenever there is a plugin update it will revert. But if you have a custom css field in your theme options. then you can strictly force the bar to be none.

eg

if you have a bar on the widget

.floating-bg{background:#525252;}

then in your custom field you can add

.floating-bt{background:none!important

All these depends on how your css loads. worth a try.

 

I'm sorry, but this doesn't make sense to me. How changing CSS will hide the buttons on certain pages?

This plugin has its own css file.

.fixedbar{ background: #000;bottom: 0px;color: #fff;font-family: Arial, Helvetica, sans-serif; left: 0;padding: 0px 0;position: fixed; font-size: 16px;width: 100%;z-index: 99999; float: left;vertical-align: middle; margin: 0px 0 0;opacity: 0.9;font-weight: bold;}
.floatingbox { text-align: center; width: auto;margin: 0 auto;}
#tips {width: auto;font-size: 18px;line-height: 100%;max-width: 960px;
margin: auto; margin-top:4px; padding: 0px !important;}
#tips li{ float:right; list-style:none; padding:12px 0; margin:0 6px 0 0 !important; }
#tips li a{color:#FFF; text-decoration:none;}
#tips li a:hover{color:#FFF !important; text-decoration:none;}

Code (CSS):

 

i am sorry i misunderstood your question. you can't disable the plugin with only css in particular pages. you have to use the previous plugin with homepage sidebar created, or use my code to create custom floating bar in the home page.