Thesis Tutorial: How to Add Facebook, Linkedin, Twitter & email share buttons without a plugin

This is an “add a social share button” Thesis Tutorial with a twist…

Here we’re not only going to add the official Facebook ‘share’ and Twitter buttons – we’re also going to include ‘Linkedin‘ and ‘Share by Email‘ buttons.

And all without a plug-in in sight!

And… we’re off!

Let’s add the following to your Thesis site…

• A ‘share by email’ button
• The official Facebook ‘Share’ Button (much better than the ‘like’ button)
• The official Linkedin Share button (yes, they do exist)
• The Official Twitter Button

Tools needed for today…

• custom_funtions.php
• custom.css (these are in your ‘custom’ folder in Thesis)
• 5 minutes of time
• This folder
  (contains an image for you to upload as well as the following code for your reference)

Step One – Add a ‘Share by Email’ Image

Download and unzip the folder. Upload the email image into your thesis/custom/images folder.

Step Two – Back-Up (boring but important)

via ftp backup your custom_functions.php and custom.css files somewhere safe.

Personally, I never use the built in file editor (especially for custom_functions.php) for some reason stuff can go missing resulting in a broken site.

Step Three – Add The Share Button Codes into Custom_Functions.php

Copy and paste the following code into custom_functions.php and save to your server.

The only change you need to make to this code is on line 8. Replace ‘TWITTER USERNAME’ with your twitter username. e.g. mine is @richer_image so I would enter richer_image (without the ‘@’)

1
2
3
4
5
6
7
8
9
10
11
12
13

function social_share_buttons() {
?>
<div class="share-buttons">
 <ul>
 <li><a href="mailto:?subject=Check this out&BODY=I found this article interesting and thought of sharing it with you. Check it out: <?php the_permalink(); ?>" target="_blank"></a></li>
 <li><a name="fb_share"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>
 <li><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="right"></script></li>
 <li><a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="TWITTER USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
 </ul>
</div>
 <?php
}
add_action('thesis_hook_after_headline', 'social_share_buttons');

The actual positioning of these buttons is handled by thesis_hook_after_headline. You can change the position of your buttons by using an alternative Thesis hook such as thesis_hook_after_post.

For a full breakdown of all of the hooks available to Thesis, check out http://thesishooks.com/

of course you could add them to a couple of places simultaneously by using an additional hook like so…

13
14

add_action('thesis_hook_after_headline', 'social_share_buttons');
add_action('thesis_hook_after_post', 'social_share_buttons');

This code will insert your share buttons site-wide – whether it be a blog post or a page. You can change what pages/posts the buttons are displayed on by using WordPress Conditional Tags.

For instance you can insert  if ( is_single() ) { between lines 1 and 2 (not forgetting to add a additional closing bracket } to line 12) to make your buttons show only on single blog posts.

1
2
3
4
5
6
7
8
9
10
11
12
13

function social_share_buttons() {
if (is_single()) {
<div class="share-buttons">
<ul>
<li><a href="mailto:?subject=Check this out&BODY=I found this article interesting and thought of sharing it with you. Check it out: <?php the_permalink(); ?>" target="_blank"></a></li>
<li><a name="fb_share"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>
<li><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-url="<?php the_permalink(); ?>" data-counter="right"></script></li>
<li><a href="http://twitter.com/share" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="TWITTER USERNAME">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></li>
</ul>
</div>
<?php
} }
add_action('thesis_hook_after_headline', 'social_share_buttons');

Step Four – Let’s dress these puppies up with CSS…

Copy and paste the following into your custom.css file and save to your server.

1
2
3
4
5
6
7
8

.custom .share-buttons ul {margin: 10px 0; display: inline-block;}
.custom .share-buttons li {background: none !important; padding-left: 0 !important; list-style: none outside none !important; margin-right: 2px; vertical-align: top !important; display: inline-block; height: 19px !important; margin-bottom: 5px; }
.custom .email-share a {background: url(images/email_icon_19x24.png) no-repeat scroll 0 0 transparent; display: block; height: 19px; margin: 0; width: 26px;}
.custom .email-share a:hover {background-position: -26px 0;}
.custom .email-share {margin-top:  0px;}
.custom .facebook-share {margin-top: -4px;}
.custom .linkedin-share {margin-top: -4px;}
.custom .twitter-share  {margin-top:  0px; margin-right: 0 !important;}

Since each button is a slightly different size, the buttons do not ‘out-of-the-box’ sit horizontally well together. To address this, I’ve assigned each button it’s own class to enable targeted vertical and horizontal positioning by way of “margin styling” with CSS.

(I did look at using ‘vertical-align‘ but with no joy, if anyone knows of a better way to get them to align property I’d be pleased to know via the comments.)

And that’s it!

You should be up and running by now. This is my first ever Thesis Tutorial so I hope I got it right for you. Please let me know how you got on (good or bad) via the comment section – if you run into any problems I’ll do my best to help you out

Tagged as: facebook, linkedin, thesis, Tutorials, twitter

Like this post? Share it!

• Tweet

Related Posts

• Thesis Tutorial: getting text to wrap round images in a pretty way
• Thesis Tutorial: How to create Multi-Coloured Headlines
• 6 Great Thesis Tutorials for Noobs
• Pimp your Thesis – For Free!
• What’s your story Morning Glory? Well?