Social Buttons on Wordpress Site

That Guy

That Guy

That Guy

Associate
Joined
31 Jan 2010
Posts
283
Location
UK
I have spent days trying to get a Wordpress Theme exactly how I want it and have sorted everything apart from Social Sharing Buttons.

I have tried loads of plugins but most look terrible, for example buttons not lined up and spread all over the place.

I took the decision to add the buttons manually to get a layout that I am happy with and in a way I wish I didn't bother.

Here is the code I am using:

Code: 
<div style="width:100%; margin-top:20px;">

<div style="float:left; width:20%;"><div class="fb-like" data-href="<?php $permalink = get_permalink( $id ); ?>" data-send="false" data-layout="button_count" data-width="118" data-show-faces="false"></div></div>

<div style="float:left; width:20%;"><su:badge layout="2"></su:badge></div>

<div style="float:left; width:20%;"><script src="//platform.linkedin.com/in.js" type="text/javascript"></script><script type="IN/Share" data-counter="right"></script></div>

<div style="float:left; width:20%;"><a href="https://twitter.com/share" class="twitter-share-button" data-via="TheAppleNewbie">Tweet</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>

<div style="float:left; width:20%;"><div class="g-plusone" data-size="medium"></div></div>
                
</div>

The code inside the divs is copied from the relevant social sites button generator, with the relevant .js in the footer above the </body> tag.

Here are the problems......

Google Chrome / Firefox (Looks Perfect)
chrome_firefox.png


Internet Explorer 7 (Google+ Button does not display)
ie7.png


Internet Explorer 8 and 9 (LinkedIn Button Scrambled)
ie8_ie9.png


Any help or ideas to find a solution would be great its driving me nuts :mad:
 
100/5 = 20%, but when it calculates the pixels one may be rounding up or down to a figure which won't all add together?

Or it's default margin/padding on the items?
 
I added padding:0px; and margin:0px; but still seems to have the same problem.

I am using Adobe BrowserLab and NetRenderer to test the sites in IE7, 8 and 9.

Anyone have a virtual machine running IE7, 8 or 9 who can test the page in question?

If so the page is:
Code: 
http://theapplenewbie.com/uncategorized/hello-world.html

Thanks in Advance :)
 
You must log in or register to reply here.
Back
Top Bottom