How to create your own wordpress social buttons withouth the use of plugins

X

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

In this post we will find how to add your very own wordpress social buttons without the use of any plugin. After this you will learn how to embed them in any wordpress post or sidebar. The functionality is that you download or create your very own buttons in Photoshop or gimp and I will teach you how to insert them in your theme.

This is one of the basic theme customization hacks, but it`s also a valuable one. Think of it like this, you could use any social plugin to embed the buttons in your wordpress blog. The fact is that not every plugin works or looks right in your blog depending on your blog installation and theme. So let`s get right to the point and learn how to embed the buttons.

First off, create or get the buttons

There are plenty of resources out there to help you manage, create and even download your social buttons. If you like to Photoshop your buttons then this article might help you out to create the perfect social button.

If you are the lazy tipe then you can download the social icon sets. Here is a place where you can download some nice ready made icon sets.

Now we need to code our buttons

First off, create a images folder inside your theme folder so it would look like this /public_html/wp-content/themes/images/ (presuming you have your blog installed on the root of your web space).

Next step is to copy your desired social buttons to the images folder inside your theme file. When you are ready with the images head over and create a blank html file to code our buttons. Start by pasting in these chunks of code:

For Twitter

<a href="http://twitter.com/home/?status=<?php the_title(); ?> : <?php the_permalink(); ?>" title="Tweet this!"><img src="<?php bloginfo('template_directory'); ?>/images/twitter.png" alt="Tweet this!" /></a>

For Stumbleupon

<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="StumbleUpon."><img src="<?php bloginfo('template_directory'); ?>/images/stumbleupon.png" alt="StumbleUpon" /></a>

For Reedit

<a href="http://www.reddit.com/submit?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Vote on Reddit."><img src="<?php bloginfo('template_directory'); ?>/images/reddit.png" alt="Reddit" /></a>

For Digg

<a href="http://digg.com/submit?phase=2&amp;amp;url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Digg this!"><img src="<?php bloginfo('template_directory'); ?>/images/digg.png" alt="Digg This!" /></a>

For delicious

<a href="http://del.icio.us/post?url=<?php the_permalink(); ?>&amp;amp;title=<?php the_title(); ?>" title="Bookmark on Delicious."><img src="<?php bloginfo('template_directory'); ?>/images/delicious.png" alt="Bookmark on Delicious" /></a>

For Facebook

<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;amp;t=<?php the_title(); ?>" title="Share on Facebook."><img src="<?php bloginfo('template_directory'); ?>/images/facebook.png" alt="Share on Facebook" id="sharethis-last" /></a>

Note that the

<?php bloginfo('template_directory'); ?>

tag is used to call up your theme folder without having you to type it normally. The /images/button-name.png is the location of your button image inside your theme.

Now your code is done (if you specified the buttons correctly) and ready to go inside your theme. The next thing to do is to paste the code inside your theme at a location desired by you.

I often paste the buttons code after my posts has ended (after the wordpress loop ends). Like in the image below:

You can make the same thing by opening up single.php inside your theme file and right after

<?php the_content(__('Read more &raquo;')); ?>

and the closing div paste in your button code.

And TADA, home-made social wordpress plugin that show up at the end of your every post so that users can spread the word about your articles.

You may be interested in these also:

• How to make your very own CAPTCHA
• How to set up SEO metadata inside Wordpress without the use of a plugin
• How can you make a social bookmarking website for free