Positioning with CSS

  • Ricardo

    #2260

    This is the code for my 3 social media buttons:

    <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="ffwd_and_rwd">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

    <g:plusone size="medium" count="false"></g:plusone>

    <div class="fb-like" data-send="false" data-width="450" data-show-faces="false" data-font="arial"></div>

    Now, I want them all 3 next to each other right above the grey line with the tags.

    The Tweet button was easy using:

    .twitter-share-button {
    position:relative;
    top:20px;
    }

    I can’t get the other 2 buttons on the same row as the Tweet button (with some spacing between them)

    http://fastforwardandrewind.com/

    Mod

    Kenneth John Odle

    #19181

    Why don’t you wrap the latter two in a <div> and style it the same way?

    <div style="position:relative;top:20px;">
    <g:plusone size="medium" count="false"></g:plusone>
    <div class="fb-like" data-send="false" data-width="450" data-show-faces="false" data-font="arial"></div>
    </div>

    Might not work, but worth a try.

    Ricardo

    #19182

    Now they aren’t on the same row (the Tweet button is above the other 2). I’ve left the code in so you can see.

    Josh

    #19183

    It’s kind of quirky because we are nesting divs.

    I haven’t tested it, but let’s try re-arranging the original code.

    Try this:

    <div class="fb-like" data-send="false" data-width="450" data-show-faces="false" data-font="arial"><a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-via="ffwd_and_rwd">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script><g:plusone size="medium" count="false"></g:plusone></div>

    Oh wait, I just realized that will probably change the order of the buttons.

    Still, I’m curious if it will work.

    Ricardo

    #19184

    This scrambles the buttons, they are not aligned and the ‘Like’ button is gone.

    Shouldn’t we just start over? The Tweet buttons is already perfect, so we need to insert a +1 and a Facebook like button (without a counter, or the text behind the FB button).

    <g:plusone size="medium" count="false"></g:plusone>

    Is the right code for the +1 button, so how do we get this next to it. Can’t we assign an ID to it, and then just use CSS?

    Ricardo

    #19185

    So… While searching for a better Facebook button, I came across this plug-in:

    http://wordpress.org/extend/plugins/only-tweet-like-share-and-google-1/

    This actually fixes all my problems and even the box counters work again! The plug-in also has a support forum:

    Plugin Support Forum

    So I’m sticking with this plug-in.

    Case closed!

    (and thanks for your help!)

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.