1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Custom Floating Bar on Homepage

Discussion in 'WordPress' started by gyahoo, Aug 9, 2014.

  1. #1
    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?
    SEMrush
     
    gyahoo, Aug 9, 2014 IP
    SEMrush
  2. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #2
    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
     
    carrieathomer, Aug 9, 2014 IP
    gyahoo likes this.
  3. Hefaistos

    Hefaistos Active Member

    Messages:
    194
    Likes Received:
    14
    Best Answers:
    9
    Trophy Points:
    63
    Digital Goods:
    1
  4. gyahoo

    gyahoo Well-Known Member

    Messages:
    1,115
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    100
    #4
    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?
     
    gyahoo, Aug 10, 2014 IP
  5. Hefaistos

    Hefaistos Active Member

    Messages:
    194
    Likes Received:
    14
    Best Answers:
    9
    Trophy Points:
    63
    Digital Goods:
    1
    #5
    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/
     
    Hefaistos, Aug 10, 2014 IP
    gyahoo likes this.
  6. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #6
    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.
     
    carrieathomer, Aug 10, 2014 IP
    gyahoo likes this.
  7. gyahoo

    gyahoo Well-Known Member

    Messages:
    1,115
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    100
    #7
    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. :)
     
    gyahoo, Aug 10, 2014 IP
  8. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #8
    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...
     
    carrieathomer, Aug 10, 2014 IP
    gyahoo likes this.
  9. gyahoo

    gyahoo Well-Known Member

    Messages:
    1,115
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    100
    #9
    But the problem is that I dont have any widget on my custom home page :(
     
    gyahoo, Aug 10, 2014 IP
  10. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #10
    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.
     
    carrieathomer, Aug 10, 2014 IP
  11. gyahoo

    gyahoo Well-Known Member

    Messages:
    1,115
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    100
    #11
    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.
     
    gyahoo, Aug 10, 2014 IP
  12. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #12
    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.
     
    carrieathomer, Aug 10, 2014 IP
    gyahoo likes this.
  13. gyahoo

    gyahoo Well-Known Member

    Messages:
    1,115
    Likes Received:
    21
    Best Answers:
    0
    Trophy Points:
    100
    #13
    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):
     
    gyahoo, Aug 10, 2014 IP
  14. carrieathomer

    carrieathomer Greenhorn

    Messages:
    108
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    18
    #14
    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.
     
    carrieathomer, Aug 10, 2014 IP