www.webdeveloper.com
Results 1 to 2 of 2

Thread: How to place a like and follow button next to each other?

Hybrid View

  1. #1
    Join Date
    Dec 2012
    Posts
    1

    Exclamation How to place a like and follow button next to each other?

    Hey there! I'm a complete newbie to HTML so please help me if you can! I use WordPress for my website and I want to include a 'Like' and a 'Follow' button next to each other on the top left of the site, it is a widget area. I have attached a screenshot of how it looks now, the follow button should be right next to the like and not bellow it, here's the code of the buttons as I use it right now:

    HTML Code:
    <div class="fb-like" data-href="http://www.facebook.com/pages/5isMagic/445329882196675" data-send="false" data-layout="button_count" data-width="450" data-show-faces="true"></div>
    
    <a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-show-count="true" data-lang="en">Follow @twitterapi</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>
    http://www.htmlforums.com/attachment...6&d=1356637513

  2. #2
    Join Date
    Oct 2012
    Posts
    78
    The problem probably is that the area where your follow and like goes is smaller than the combined lenght of the two elements.(Like and follow button)

    So lets say the max-width of the area for #widget is 550px.
    And then your Like image is 300px.
    And you twitter image is 500px.
    You would have a combined length of 800px.

    I've tried to explain it in maths since I think its easier to understand basically 800 won't fit into 550 so the browser then puts what can't be fit onto the line below so both elements fit within the width restrictions.

    Solution:

    I'm not to sure on what your css is but its looks like the class of the widget area might be called fb-like.
    Search for this in the CSS file.

    Code:
    #fb-like{
    max-width:800px;
    }
    The above may work depends on the size of the images remember try to use the best size possible you don't want a massive gap.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles