Creating Social Media Sharing on Your Blog Without a Plugin

by Matt Langford on July 27, 2009 · Comments

Creating Social Media Links Without a Plugin

While there are many plugins that offer various ways to enable social media sharing on your Wordpress blog, many people prefer a completely custom option. In this tutorial, I will quickly take you through the steps of creating your own links with images and autofilling forms (such as a Twitter status message).

This tutorial applies to all Wordpress themes, but I’ve placed special alert boxes for directions specific to the Thesis Theme.


Step 1: Find (or Create) and Upload Icons

If you’re a graphics designer, you can create your own images/icons to match your blog, but there are also thousands of free options as well. Here’s a good place to start if you’re looking.

Once you’ve settled on an image set, upload them to your server in the size you prefer. I suggest nothing larger than 64×64, which is the size I use. For simplicity’s sake, make sure you name them something easy to remember (e.g. twitter.png, delicious.png).

Thesis Theme Users: Upload the images to your custom folder!

Step 2: Displaying the Icons

If you are NOT using the Thesis theme, you’ll now need to edit your theme’s core files. If you’re not sure how to do this, be sure to backup your files first! As every theme is different and every user may want to display the icons in a different place, I will only go into brief detail for this step. You’ll probably want to edit single.php to accomplish this.

Insert this code:

<div class="social_icons">
<a href=""><img src="IMAGE LOCATION" width="XX" height="XX" /></a>
</div>

For now, leave the link tag <a> as is, we’ll populate that in a minute. Insert the image location link and size in the specified location for your first icon (you choose what is first: RSS, Twitter, etc). Duplicate the link and image code (everything between the div tags) for every icon you’d like to display.

Unsolicited Advice: Some bloggers link to every social media source known to humanity, but I suggest minimizing that to the top 8-10 at MOST.

Thesis Theme Users: You can bypass the single.php editing by inserting the above code into your preferred location using the Thesis OpenHook plugin (novice) or by editing custom_functions.php (advanced).

Step 3: Styling the Icons Using CSS

As you can see, the images are probably stacked vertically. This is probably NOT what you had in mind! To fix this, we’re gonna edit style.css (non-Thesis users). Simply insert the following code:

div.social_icons img {padding: 2px;}

Of course, you can edit the padding pixels and add additional styling to fit your preferences.

Thesis Theme Users: Insert the above code into custom.css.

Step 4: Link it Up!

Since we’ve got it looking right, now we need to make it actually work! In Step 2, we inserted some link <a> code, but left it blank. Now we’ll fix that!

Every social media site has it’s own requirements and properties that we’ll have to follow. Below, you’ll find a list of the proper links for many of the most popular sites. If you’d like to know how to setup any additional sites, please ask in the comments (or if you DO know any additional sites, please add them in the comments).

TWITTER: ∞

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

DELICIOUS:

<a href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us"> </a>

STUMBLEUPON:

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Stumble It!" target="_blank"> </a>

DIGG:

<a href="http://digg.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" title="Submit to Digg" target="_blank"> </a>

FACEBOOK:

<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" rel="nofollow" title="Share on Facebook" target="_blank"> </a>

GOOGLE BOOKMARKS:

<a href="http://www.google.com/bookmarks/mark?op=edit&bkmk=<?php the_permalink(); ?>" rel="nofollow" title="Bookmark on Google" target="_blank"> </a>

REDDIT:

<a href="http://reddit.com/submit?url=<?php the_permalink(); ?>" rel="nofollow" title="Submit to Reddit" target="_blank"> </a>

Tip: Automatically shorten urls before posting.

  • Ahh!! Thanks so much for this. I'll dedicate one morning doing this!

    P.s. Site looks awesome again. Told you it was m weird computer! :)
  • Renee, You're welcome! And I'm glad to hear that it's viewable again for you!
  • Thanks, Matt! I recently deactivated my "Sociable" WP Plugin and I'm looking forward to customizing the Media Sharing on my personal blog (powered by Thesis, obviously). Keep up the great work!

    @RBeale
  • Good Luck, Ryan! And let me know if you need any help along the way!
  • lorennason
    How would you do this if you don't use openhook?
  • You would need to add a function to custom_functions.php for the specific location you'd like it to appear.

    I'd recommend this function:
    function post_footer() {
    if (is_single())
    {
    ?>
    INSERT CODE FROM TUTORIAL HERE
    <?php
    }
    }
    add_action('thesis_hook_after_post', 'post_footer');
  • manu
    MIXX:

    <a href="http://www.mixx.com/submit?page_url=<?php the_permalink(); ?>" rel="nofollow" title="Add to Mixx!" target="_blank">MIXX
  • kleew17
    Matt - I'm so new to Thesis it hurts. I have the icons up using hooks, but they are still in a vertical line. I added the code to custom.css, but what I wanted is more like your "Stay in the Loop" box you have your icons in. Can you help me?

    Also, where do I put the links for each of the sites?

    Thanks so much!

    Kipi
  • Kipi, I'd love to help you out! Would you mind providing me with a link to your site so I can see your code? Thank you!
  • kleew17
  • Looks like you have every image surrounded by it's own social_icons div. Instead of that, put all images and links inside a single social_icons div. If that still doesn't work, add float:left; to the css.
  • kleew17
    Success! Thanks, Matt.

    Thanks for your help and patience!
  • I could tell you! But to me, it appears like you've got it!
  • Hey Matt,

    Thanks for putting this up, I'm also enjoying the screencasts. Probably a beginner question but... how do you implement a url shortener here? I got it working but of course when I go to Twitter it shows the full url

    Thank you!
  • It's a little complicated, but I'll try to get a tutorial up tonight on how to do that! Stay tuned.
  • I didn't mean to cause any trouble, but thanks a lot.
  • No trouble at all! It's why I'm here!
  • Got it right here: Learn how to automatically shorten urls with bit.ly before posting to Twitter.
  • Hi Matt. Thanks for this tutorial, but I'm still trying to get the social media icons to work. Can you help me out?

    I've followed all your steps so far, but still am encountering a little bit of trouble. I added this code underneath to my custom_functions.php for my Thesis:

    function post_footer() {
    if (is_single())
    {
    ?>
    <div class="social_icons">
    <a href="<a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" rel="nofollow" title="Share on Facebook" target="_blank">
    "><img src="https://p3nlsccweb.secureserver.net/filemanager/5746abb5-864f-11de-b1b2-001422211cbb" width="64" height="64" />
    </div>
    <?php
    }
    }
    add_action('thesis_hook_after_post', 'post_footer');

    I've uploaded the images to my custom folder, and I'm trying to get the Facebook Icon to show, but it's not showing up?
  • I added the code to single.php and style.css, however it does not show the icons - could you help me with this?
    http://www.naturalcuresexposed.com
  • Since you're not using the Thesis theme, it will be hard to accurately troubleshoot this particular problem. My #1 suggestion would be to first double check that you placed all code in the correct place, particularly the php.
  • This is great!
  • Thank you, thank you, thank you! i've been looking for this
blog comments powered by Disqus

Previous post:

Next post: