How to Make a Cool Social Media Box for Thesis

by Matt Langford on September 1, 2009 · Comments

I have been asked many times, “What plugin did you use to get your social media sharing icons on your site?” Well, I didn’t use a single plugin to do it! Because of that, I decided to make a tutorial showing exactly how you can achieve the same thing.

Watch this short video for an overview of what we’re going to do.

1. Understanding the Design

Using css, we’re basically going to create a container that holds 3 different elements: (1) RSS/Email Links, (2) Social Media Sharing, (3) Ads. Everything within the container (including the 4 images) will be styled exclusively within custom.css.

We will be using a css 3.0 feature called opacity to create the hover effects. This will work flawlessly in Firefox, Safari, Chrome, and other trendsetting browsers; however, it will NOT be visible in Internet Explorer (the icons will show, the hover effect will not).

2. Understanding the Functionality

We will edit custom_functions.php to create the actual content within the box, including placing the images, links, and other features. Additionally, we will command the box to only show on single posts (not your home page or other pages).

3. Placing the Style

Open custom.css in your favorite editing application. Paste the following code into that file.

/*Stay-Connected and Share-This-Post Box*/
.box { margin: 0; padding: 0.7em; background: #e5f6fc; border: 1px solid #0262A5;}
.box h3 { margin-top: 0; }
.box p { margin-bottom: 0; }
.box .stayintheloop {float:left; width:58%;}
.box .social_icons {float:right; width:38%; }
.box .social_icons a, .box .social_icons a:hover {border:none;}
.box .social_icons img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;-khtml-opacity: 1.0; }
.box .social_icons img:hover {filter:alpha(opacity=50);-moz-opacity: 0.5; opacity: 0.5;-khtml-opacity: 0.5;}
.advert {background-color:#FFFFA0; color:#000; border: 1px solid #0262A5; border-top: 0; padding: 0.3em; text-align: center; font-size:12px;}

Of course, you can edit much of the above to fit your theme and preferences, but we’ll get to that in a bit.

4. Placing the Content

Next, open custom_functions.php and paste the following.

function post_footer () {
if (is_single()) {
?>
<div class="box">
<div class="stayintheloop">
<h3>Stay In The Loop!</h3>
<p>Insert RSS/Email Links Here</p>
</div>
<div class="social_icons">
<h3>Share This Post:</h3>
<p>Insert Social Media Links Here</p>
</div>
<div style="clear:both;"></div>
</div>
<div class="advert">
Advertisement: Created by <a href="http://MattFlies.com">MattFlies.com</a>
</div>
<?php
   }
}
add_action('thesis_hook_after_post', 'post_footer');

Tip: Automatically shorten urls before posting.

5. Edit to your liking

The box should now be visible on your single post pages. Take a look at it, and start to input the appropriate links and content. Use FeedBurner to get links to RSS and Email. Links and icons for social media are provided by the respective service (e.g. Twitter, Delicious). You can also view a list of the most popular links, complete with the correct functions for your Wordpress blog.

Replace your information in the necessary spots as indicated in Step 4. Any images that you insert within the social_icons div will automatically have the hover effect applied to them.

Edit the css from Step 3 to fit within the parameters of your color scheme, theme size, and more. Just have fun with it!

If you have any questions about this tutorial or you successfully incorporated the box into your blog, let me know in the comments. Don’t be afraid to drop a link to your site!

  • Another Great Tutorial! Thanks, Matt.
  • BK
    Love your use of screenr for quick and easy video tutorials and walkthroughs. And thanks for the cool tutorial here as well :) Quick question: can you share the code for the social media icons to generate the correct links to bookmark / twitter / stumble for respective posts? In other words what do you insert for 'Insert Social Media Links Here'. Thanks!
  • Checkout this comment by Chris for info on links!
  • Thanks Matt, cool tip. This may help those looking for the linking codes... http://blog.themeforest.net/wordpress/add-socia...
  • Thanks for the heads up, Chris!
  • Hi Matt,

    Thanks for another useful tutorial. I have used some tips from your earlier tutorial to create my post footer.


    Btw, your new footer is cool!!

    Regards,
    Ashwin
  • That's pretty sweet. I figured that you had to code it and not use a plugin. Just didn't know how :)

    Thanks so much for posting this!!
  • Good tutorial Matt. My only question lies in the linking. I can't seem to get this ironed out. How do you program so it automatically recognizes the blog URL to go into the code for sharing on twitter, stumble, delicious, etc. What does the code need to look like and what needs to be done so the info is updated post by post - as you have done.
  • Each service provides their own link, but you can refer to this comment by chris for an article that may help you out.
  • Everything is working perfectly - the last hitch I have is with Twitter. How do I get the URL to be shorter when you click the tweet icon? Also, how do I get it to say RT @mattChevy before the name of the post and link? Thanks again for your help and for putting together this awesome tutorial.
  • Here is the code to use to insert RT @mattChevy:

    <a title="Tweet About It!" href="http://twitter.com/home?status=RT @mattChevy <?php the_title(); ?> <?php the_permalink(); ?>" target="_blank">

    When a user clicks submit for the tweet, Twitter will automatically shorten the url using bit.ly. If you'd like to do it before you sent it to Twitter, it's a little more complicated. For directions, follow the directions under the heading, "One Problem."
  • First of all let me just say your ScreenCast tutorial are really awesome and really do enlighten newbies to Thesis, although I'm not a total newbie maybe 6 months into it I still appreciate the tutorials

    Secondlly, I finally managed to get my Social Media Setup over at my Thesis test site http://bit.ly/19EueP so thank you again but I'm having a little problem with the Twitter code you gave and that is that its not shorten the url via bit.ly am I missing something ?

    Thanks in advance,
    Jorge
  • The code provided here does not automatically shorten the urls, but there are two things to note here. Twitter will automatically shorten the url for you when you click post, IF the tweet is shorter than 140 characters initially. Obviously, this isn't ideal for people with very long links.

    This article by Ahjira, has (among other things) directions to implement url shortening via TinyUrl or bit.ly. Her article is focused towards Thesis users, so be sure to check it out!
  • Awesome tutorial.. Thanks a lot worked like a charm! One less plugin!
  • Very nice implementation, Cam! Nice going!
  • I love this tutorial Matt. Thanks
  • so stinkin' sweet Matt. Thanks.
  • FYI, your code doesn't work in IE7, much less IE6. Very unfortunate, as I love your box otherwise! Any chance you could make it IE friendly?
  • Melanie, I've tested in IE6, IE7, and IE8 with no problems whatsoever.

    Added: For other readers, Melanie fixed her displaying issues. It DOES work in IE.
  • Once again, thanks for the tutorial. I've spent the past three hours looking at "sharing" options and then I come to see what's new on MattFlies...I'll be trying it out tomorrow!
  • Glad to hear I could help! This should go as a lesson though, always check MattFlies first! =)

    Good luck in fantasy football this year man!
  • Worked like a charm (and I'm closer on the "basic" side of intermediate!)! Thanks so much!
  • kara515
    Thanks so much for another great tutorial Matt! Do you know how one could add an "email to a friend" button?
  • Kara, if you use this code, when clicked, it will open up a new email with the appropriate recipient and subject already inserted.
  • Matt, thanks! This is awesome!
  • Matt I'd love to add the Digg Icon where can I find the matching icon to your set, thanks
  • You can find the complete set right here.
  • Great work, Matt.

    I combined your old Media Box (without Images) with the new one to have such a great combo!

    Thanks- Anshoo
  • Nice job with the combo!
  • hey matt is there a way to alter the php so that i can insert this into the footer of my page? i was going to experiment but messing with php can get messy :)
  • Brian, the easiest way would be to copy the html from above and put it in the Footer Box using Thesis OpenHook. If you're not a php expert, I'd highly suggest going this route. I use OpenHook from time to time too!
  • Name
    Great work !

    I am a complete greenhorn when it comes to coding.
    QUESTION:
    Where do you place the image tags (icons) in the file, and how does the code have to look like ?
  • In Step 4, it shows you where to insert the image code. And the image code looks like this.
  • Matt,

    Great tutorial. Many thanks.
  • Hi Matt,

    I know this is a little off-topic, but how can I remove posts of a particular category from listing on the Main-Page?

    I used the following code:



    function limit_front_page() {
    	global $query_string;
        if (is_home()) {
            query_posts('cat=-31');
        }
    }
    add_action('thesis_hook_before_content', 'limit_front_page');


    But the issue with this is, when I click "<--Previous Entries" on the Home Page, it does not navigate to the correct entries. Instead, the Home Page entries stay unchanged. Please help :)
  • Matt,

    I figured it out :) A DiYThemes member knew the solution:

    The new code is:


    function limit_front_page() {
    	if(is_home()){
    		global $wp_query;
    		query_posts(
    			array_merge(
    				array('cat' => 1),
    				$wp_query->query
    			)
    		);
    	}
    }
    add_action('thesis_hook_before_content', 'limit_front_page');
  • Awesome, glad you got it! Thanks for posting the solution as well.
  • Great how-to! Thank you very much, Matt!
  • I'll make a note of this post as I'm thinking to switch my blog's theme to Thesis!
blog comments powered by Disqus

Previous post:

Next post: