0

HTML:

<ul>    
    <li class="socialHeader"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://thedomain">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    </li>
    <li>
        <div class="g-plusone" data-size="medium"></div>
    </li>    
</ul>

CSS:

li, ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline-block;
}

.g-plusone, .twitter-share-button {
    margin: 0;
    padding: 0;
}    

Output

http://jsfiddle.net/4235gcL9/

How can I get the icons horizontally flush against one another? I've seen in the browser console that the javascript accompanied by each dynamically generated button includes some width properties but I'm not sure how to access them.

2 Answers 2

1

It's the width: 109px of your iframe

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" src="..." class="twitter-share-button twitter-tweet-button twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 109px; height: 20px;"></iframe>

decrease the width to something smaller (like 85px) to fix the spacing:

iframe{
   width: 85px !important; //the important is needed to override the inline width
}

FIDDLE

1

That is the WIDTH from the iframe element being generated by the code, my guess is that it is leaving enough space to allow for the counter to get to the 1000's and not be cut off! It's generating an inline width. you could do this but it's a bad idea.

#twitter-widget-0 {width:81px !important;}
2
  • Ah great, thanks for the pointer. If the JS is generating the inline-width it's probably possible to get it to increase the width on the amount of likes... Commented Jan 8, 2015 at 3:39
  • maybe but my guess is the code itself just doesn't bother so it just left space for 1000's you could over-ride it with css as above and just keep an eye on it or if you know you will be at 3 digits for a long time if you set the width to 90px that will work up until 999 likes
    – Nickfmc
    Commented Jan 8, 2015 at 3:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.