Social Buttons on Wordpress Site

That Guy · Apr 19, 2012

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)

Internet Explorer 7 (Google+ Button does not display)

Internet Explorer 8 and 9 (LinkedIn Button Scrambled)

Any help or ideas to find a solution would be great its driving me nuts

josegrad · Apr 20, 2012

Could you post the html that gets generated and goes to the browser? Open that on your browser, right click to view the source and copy the relevant part of the code. Please note that IE 7 is old and has lots of compatibility issues with modern techniques. IE 7 is dropped out by many web developers for a good reason.

Consider also how much sense it makes given the current user base it has:
http : // (a dot) w3schools.com/browsers/browsers_explorer.asp

Cheers.

That Guy · Apr 20, 2012

Here is the code when I choose "View Source"

Code:

<div style="width:600px; margin-top:20px; padding:0px;">

<div style="float:left; width:120px; padding:0px; margin:0px;"><div
class="fb-like" data-href="" data-send="false" data-layout="button_count" data-width="118" data-show-faces="false"></div></div>

<div style="float:left; width:120px; padding:0px; margin:0px;"><su:badge layout="2"></su:badge></div>

<div style="float:left; width:120px; padding:0px; margin:0px;"><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:120px; padding:0px; margin:0px;"><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:120px; padding:0px; margin:0px;"><div
class="g-plusone" data-size="medium"></div></div>

</div>

I need to either get the LinkedIn button working or ditch it for another service like reddit.com on another blog I have 30% of my visitors running IE7 still

josegrad · Apr 21, 2012

Hi,

Ha, I don't use windows :-(

But I wonder why do you have to make it by yourself. Why don't you use a service like sharethis.com ? This is the code needed for a website (there is specific options for wordpress also...)

With this:

Code:

<!DOCTYPE HTML>
<head>
<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http : // <FIX THIS w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "sadfasdfasdfasdfad"}); </script>    
    
</head>
<html>
<body>

<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_email_hcount' displayText='Email'></span>

</body>
</html>

You get this (add the http : // in the front)

c14732774.r74.cf2.rackcdn.com/Screen shot 2012-04-21 at 9.41.30 AM.png

BUT. This is list of supported browsers:

Firefox 8 and higher
Chrome 15 and higher
Internet Explorer 8 and higher
Safari 5.1 and higher

How does that look in IE7 anyway?
IE7 is ancient. Out of the 30% how many are sharing stuff? If they don't care about using an obsolete browser do think they even have a linkedin or google+ account?

That Guy · Apr 21, 2012

Thank You!! The ShareThis Buttons seem to be working perfect.

Here is the code I am using:

In the Header:

Code:

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "MY PUB CODE"}); </script>

In the Body:

Code:

<span class='st_plusone_hcount' displayText='Google +1'></span>
<span class='st_facebook_hcount' displayText='Facebook'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>

One thing I would like to change is the Twitter button. When I press the Twitter button it Generates the following:

Code:

Hello world! | The Apple Newbie http://shar.es/rOxEa via @sharethis

I want to disable or change the url shortener as twitter will do this automatically also change the @sharethis to @theapplenewbie

There is details of this on the page HERE, but not really understanding it.

Any help with this would be amazing

josegrad · Apr 24, 2012

That Guy said:
I want to disable or change the url shortener as twitter will do this automatically also change the sharethis to theapplenewbie

There is details of this on the page HERE, but not really understanding it.

Any help with this would be amazing

Sorry didn't reply to this one. From what I checked you cannot change that. You forgot to put the link to the HERE you mention, I guess we checked the same place but just in case.

There is also another option. Addthis . com is similar to this and I believe you can change those things with their system. Maybe you want to check that out.

webstore · Apr 24, 2012

josegrad said:
There is also another option. Addthis . com is similar to this and I believe you can change those things with their system. Maybe you want to check that out.

We find Addthis.com most excellent and use their code on all our own sites.
.

That Guy · Apr 26, 2012

They should all be working/displaying correctly now. I have tested in the following browsers:

FireFox
Internet Explorer 7, 8 and 9
Safari
Chrome

Test for yourself here:
http://theapplenewbie.com/iphone/how-to-easily-unlock-your-iphone-4-and-4s.html

Hope this helps others looking for something similar

josegrad · Apr 26, 2012

Looks good!

Search

Search

Social Buttons on Wordpress Site

That Guy

More options

josegrad

More options

That Guy

More options

josegrad

More options

That Guy

More options

josegrad

More options

webstore

More options

That Guy

More options

josegrad

More options

Latest Articles

Cookie Consent

Essential

Analytics

Marketing

Social Buttons on Wordpress Site

webstore