1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: Facebook and Twitter buttons on same line?

Discussion in 'Web Design & Development' started by Denys, Dec 11, 2011.

Thread Status:
Not open for further replies.
Advertisement
  1. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Code:
    <p>
    <div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true"></div>
    <a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </p>
    At the moment they are on two separate lines, but I need them both on the same line with a little space between them. Could someone please do this for me?

    Much appreciated,

    Denys
     
  2. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Anyone? Will reward rep!
     
  3. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,299
    First Name:
    Colin
    This may work but without seeing the rest of the code and the CSS it is just an educated guess

    Code:
    <p>
    <div class="fb-like" data-href="https://www.facebook.com/pages/Which-Boarding-School/192810007476904" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true">
    <a href="https://twitter.com/UKBoardingHelp" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @UKBoardingHelp</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div></p>
    
    If it doesn't then it will need some more work and would need a url as a minimum to offer any more advice.
     
  4. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Thank you very much for your reply. Unfortunately it was still on two lines. Here is the url: www.which-boarding-school.com.
    I have left it so that only the twitter button shows otherwise the quotes are cut off but I will keep experimenting with your suggestions.

    Thanks again,

    Denys
     
  5. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
  6. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    I would suggest that you need to use a bit of CSS to do that.

    Specify the width of the two sections such that they don't fill the screen space available.
    Then set them both to float left.
    So long as there is space for the Twitter section to the right of the Facebook section they should collapse onto the single line.
     
  7. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Hi there, I have never done proper website designing before and it's all quite new to me. I didn't actually design the site myself and have just been handed the finished product. I have located the CSS files but after researching online I am completely lost as to what to do!

    Help is much appreciated!

    Thanks.
     
  8. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Sorry if this asking a lot but I really would like to have this done for my parents' website!
     
  9. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    I can't see the buttons on the page any more.
     
  10. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
  11. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    Sorry for the confusion, that was my script blocker preventing them from appearing.
     
  12. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Oh OK. Any ideas?
     
  13. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    It looks like you've got it sorted out. (y)
    The only modification that I would suggest is placing your style code (width: 200px; clear: none; float: left; ) in the CSS file (styles/wbs.css) that affects all of your site. That way you can apply the same formatting to all the pages instead of having to change it each time. It also marginally reduces the size of each page visited on your site.

    You'll learn quickly if you can show such determination and ability in research for all the problems you encounter.
     
  14. Denys

    Denys Thread Starter

    Joined:
    Nov 25, 2009
    Messages:
    145
    Thank you very much for your help. I have changed the width to 200px, but unfortunately :eek: the text that is meant to go underneath 'Don't just take our word for it....' is next to the buttons. Probably something simple but help is much appreciated!! (Wasn't anything to do with your recommended CSS change by the way, I already had the problem :D)
     
  15. Ent

    Ent Trusted Advisor

    Joined:
    Apr 11, 2009
    Messages:
    5,467
    First Name:
    Josiah
    the Clear keyword allows you to force elements onto the next line.
    Where your code reads
    <p style="width: 200px; float: left; clear: none;">
    try replacing it with
    <p style="width: 200px; float: left; clear: right;">
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Solved Facebook Twitter
  1. chrispyfahy
    Replies:
    7
    Views:
    530
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1030747

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice