Shopping Cart (0)

Twitter tweet and Facebook like. Magic.

7 Posted March 22, 2011 by George Categories: Tips and Tricks

Sharing is caring, right tadpoles?

So today, we’re going to show you how to auto-magically super-charge your blog posts, with easy-to-click Twitter and Facebook buttons, so that your readers can tweet and like your content seamlessly. Just like the supermarkets put all the chocolates around you when you’re at the tills, so it’s dead easy to drop a couple while you’re feeling great about all the veggies you’ve just bought? Just like that.

And it’s just a single piece code, added to the functions.php file, in your theme folder. Very easy. As always, you want to back up first. So say you were using our free Greyzed theme, you’d be looking in wp-content/themes/greyzed. Find the functions.php file and copy it to say, functions.php.bak.

Now you can go ahead and open functions.php in a plain text editor, like NotePad, or TextMate or something similar. Scroll to the bottom, and then use the ‘view source’ button, top right of the code snippet below, and copy and paste the code as the last function in the file.

[sourcecode]
function facebook_twitter_button($content){
if(!is_feed() && !is_home()) {
$content .= ‘<div class=”facebook-twitter-button”>
<a href=”http://twitter.com/share”
class=”twitter-share-button” data-count=”vertical”>Tweet</a>
<script type=”text/javascript”
src=”http://platform.twitter.com/widgets.js”></script>
<div class=”facebook-share-button”>
<iframe
src=”http://www.facebook.com/plugins/like.php?href=’.
urlencode(get_permalink($post->ID))
.’&amp;amp;layout=box_count&amp;amp;show_faces=false&amp;amp;width=200&amp;amp;action=like&amp;amp;colorscheme=light”
scrolling=”no” frameborder=”0″ style=”border:none;
overflow:hidden; width:200px;”
allowTransparency=”true”></iframe>
</div>
</div>';
}
return $content;
}
add_action(‘the_content’, ‘facebook_twitter_button’);
[/sourcecode]

Now save the file, and you’re all done! Open a post on your blog and admire your own geek-itude! Well done!

Update: Turns out, you might need a little something extra, that is, some CSS, and  a change to the code we originally included. That’s been changed in the code snippet above, and the CSS changes are detailed here.

In the same way that you’ve edited the functions.php file, now open style.css, in the same folder, wp-content/themes/greyzed in our example, and at the bottom, add this snippet of CSS code:

[sourcecode]
/* =Extras for the Facebook and Twitter buttons.
————————————————————– */

.facebook-twitter-button {
float:left;
width:270px;
}

.facebook-share-button {
float:right;
height:80px;
}
[/sourcecode]

Save that file too.
THEN it’ll show up as the pics above shows…. :)

Comments

22/03/2011 10:14 pm
Chris

Thank you for sharing. I have a question, when I use the code and place it in my function.php file, it appears like this: http://oi51.tinypic.com/33z8cgy.jpg – How do I make it look like in your example, the 2 squares?

Reply
18/04/2011 12:41 pm
George

Hi Chris…

We’ve added some and changed some. It works better now.
Pardon for that… *sheepish*

18/04/2011 12:53 pm
Chris

Thank you George :)

Reply
26/04/2011 1:32 pm
SheBee

Hey guys – thanks so much for the tip :) I tried my best to follow your instructions to the letter, but for some reason it wonked by blog out :(

Thank goodness you told me to back up the original code so I was able to revert back to the old version.

Any idea what I did wrong? Am running wordpress 3.1.1

Reply
27/04/2011 11:13 am
George

Heeeey Shebee…
How cool is this? Two old friends, a bee and a frog, just chattin’ round the pond…

Really sorry to hear that “it wonked by blog out”. D’you have a cold, Ms. Bee?
What does it look like when it’s “wonked out”? That would *really* help us to find what went wrong…
Well done for the backup! Clever SheBee :)

So, we asked around the smart tadpoles here, and these are some suggestions…
1. Sure you put the two parts in their correct files?
2. Did you use the source-code buttons on the code snippet thingies above, to copy the code?
3. Did you paste it all? Like not just some of it? Not just the pretty bits?
4. Do you perhaps have the Wonk-out plugin installed? Cos y’know, that would do it…? #ribbit
(Haha! No, I totally made that one up :) )

Keep us posted, okay?

04/01/2012 7:31 am
technorefuse

It seems my page keeps crashing after trying to add the function.php code at the end before the last break. I’ve also tried placing it in various areas, but it still crashes at the second line of the new code.
To add, there were no errors when adding the style.css code.

Reply
05/01/2012 9:56 am
Guru Frog

@technorefuse – Thank you very much for your comment and feedback. Could you perhaps tell me what browser you’re testing in? Does it happen in all browsers or are you just using one? I cannot replicate the problem on my side so I’m trying to narrow things down a little so as to find you a solution.

Leave a Comment

(required)

(required, not shown)

TimThumb not displaying images? Let’s fix that!

If you've noticed that a number of images aren't displaying correctly ... Read more

Adding a Tweet Box to your site

Both Windows and Mac are integrating social media platforms more and m... Read more

Valentines Giveaway: Win a copy of our new gorgeous theme – Occasions

Love is in the air, and lucky for you frogs aren't immune to Cupid's m... Read more

George has something new to show you

Hello tadpoles! We're as happy and excited as a dog with two tails, to tell you about the latest theme from the team around the pond. It's called Cohesion, and we like to think of it as "a socially-engaged business theme". Read more

Create a slick dropdown or flyout menu in minutes

As the amount of content in your site grows, at some stage you'll want... Read more

eFrog News Categories

Browse our themes