Creating Custom Share Buttons in WordPress

I have had the usual share buttons from various social networking sites such as Twitter and Facebook on my posts for a while. I never really thought about customizing them until a client of mine requested it. So after a while of trying different techniques, I landed on one I thought was highly convenient.

First, get or create your images. They can be any size and any color (just be sure people can tell whether it’s Facebook or Twitter). I am currently using share buttons within a sprite I made. This image includes icons as well and I will be using this again to write about adding those. Download

Now for the code:

Create a new PHP file. I called mine simply “share.php” but it can be whatever you wish. I put mine within a folder called “includes”.

To add your own images, you have a few options.
-First, simply make a new sprite and change the background position accordingly.
-Second, if you don’t like sprites, just replace the background image (and remove the background position).
-Last, you can just insert the image between the “a” tags.

To include the buttons into your theme, add this line into single.php, or page.php, or index.php, or a custom page/template file:



		
		
			
			
XHTML
			
			<div id="share">
   <?php include(TEMPLATEPATH . '/includes/share.php'); //change path to wherever you place the share.php ?>
</div>
			
				
					
				
					1
2
3
				
						<div id="share">
   <?php include(TEMPLATEPATH . '/includes/share.php'); //change path to wherever you place the share.php ?>
</div>

Here is the entire code together:



		
		
			
			
XHTML
			
			<nav id="share-wrap">
	<ul id="share">	
		<li><!--Twitter-->
			<a onClick="MyWindow=window.open('http://twitter.com/home?status=Currently Reading <?php the_title(); ?> (<?php the_permalink(); ?>)','MyWindow','width=600,height=400'); return false;" title="Share on Twitter" target="_blank" id="twitter-share"></a>
		</li>
		<li><!--Facebook-->
			<a href="http://www.facebook.com/share.php?u=<url>" onClick="window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('<?php the_permalink() ?>')+’&amp;title=’+encodeURIComponent('<?php the_title() ?>'),'sharer', 'toolbar=no,width=550,height=550'); return false;" title="Share on Facebook" target="_blank" id="fbook-share"></a>
		</li>
		<li><!--LinkedIn-->
			<a onClick="MyWindow=window.open('http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=<?php echo get_option('home'); ?>','MyWindow','width=600,height=400'); return false;" title="Share on LinkedIn" target="_blank" id="linkedin-share"></a>
		</li>
        <li><!--Pinterest-->
			<a onClick="MyWindow=window.open('http://pinterest.com/pin/create/button/','MyWindow','width=600,height=400'); return false;" class="pin-it-button" count-layout="none" target="_blank" id="pinterest-share"></a>
		</li>
		<li><!--Delicious-->
			<a onClick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent('<?php the_permalink() ?>')+’&amp;title=’+encodeURIComponent('<?php the_title() ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;" href="http://delicious.com/save" title="Share on Delicious" target="_blank" id="delicious-share"></a>
		</li>
		<li><!--StumbleUpon-->
			<a onClick="MyWindow=window.open('http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','MyWindow','width=600,height=400'); return false;" title="Share on StumbleUpon" target="_blank" id="stumbleupon-share"></a>
		</li>
		<li><!--Digg-->
			<a onClick="MyWindow=window.open('http://www.digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','MyWindow','width=600,height=400'); return false;" title="Share on Digg" target="_blank" id="digg-share"></a>
		</li>
		<li><!--Reddit-->
			<a onClick="MyWindow=window.open('http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','MyWindow','width=600,height=400'); return false;" title="Share on reddit" target="_blank" id="reddit-share"></a>
		</li>
		<li><!--Tumblr-->
			<a href="http://www.tumblr.com/share?v=3&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share on Tumblr" target="_blank" id="tumblr-share"></a>
		</li>
	</ul>
</nav>
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
				
						<nav id="share-wrap">
    <ul id="share">    
        <li><!--Twitter-->
            <a onClick="MyWindow=window.open('http://twitter.com/home?status=Currently Reading <?php the_title(); ?> (<?php the_permalink(); ?>)','MyWindow','width=600,height=400'); return false;" title="Share on Twitter" target="_blank" id="twitter-share"></a>
        </li>
        <li><!--Facebook-->
            <a href="http://www.facebook.com/share.php?u=<url>" onClick="window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent('<?php the_permalink() ?>')+’&amp;title=’+encodeURIComponent('<?php the_title() ?>'),'sharer', 'toolbar=no,width=550,height=550'); return false;" title="Share on Facebook" target="_blank" id="fbook-share"></a>
        </li>
        <li><!--LinkedIn-->
            <a onClick="MyWindow=window.open('http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&source=<?php echo get_option('home'); ?>','MyWindow','width=600,height=400'); return false;" title="Share on LinkedIn" target="_blank" id="linkedin-share"></a>
        </li>
        <li><!--Pinterest-->
            <a onClick="MyWindow=window.open('http://pinterest.com/pin/create/button/','MyWindow','width=600,height=400'); return false;" class="pin-it-button" count-layout="none" target="_blank" id="pinterest-share"></a>
        </li>
        <li><!--Delicious-->
            <a onClick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url='+encodeURIComponent('<?php the_permalink() ?>')+’&amp;title=’+encodeURIComponent('<?php the_title() ?>'),'delicious', 'toolbar=no,width=550,height=550'); return false;" href="http://delicious.com/save" title="Share on Delicious" target="_blank" id="delicious-share"></a>
        </li>
        <li><!--StumbleUpon-->
            <a onClick="MyWindow=window.open('http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','MyWindow','width=600,height=400'); return false;" title="Share on StumbleUpon" target="_blank" id="stumbleupon-share"></a>
        </li>
        <li><!--Digg-->
            <a onClick="MyWindow=window.open('http://www.digg.com/submit?phase=2&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','MyWindow','width=600,height=400'); return false;" title="Share on Digg" target="_blank" id="digg-share"></a>
        </li>
        <li><!--Reddit-->
            <a onClick="MyWindow=window.open('http://www.reddit.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>','MyWindow','width=600,height=400'); return false;" title="Share on reddit" target="_blank" id="reddit-share"></a>
        </li>
        <li><!--Tumblr-->
            <a href="http://www.tumblr.com/share?v=3&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" title="Share on Tumblr" target="_blank" id="tumblr-share"></a>
        </li>
    </ul>
</nav>

And the CSS…



		
		
			
			
CSS
			
			/*--SHARE BUTTONS--*/
#share-wrap {
	margin: 0 auto;
}
#share {
	text-align: center;
	margin: 0 auto;
	width: 78%;
	overflow: hidden;
}
#share > li a {
	position: relative;
	display: block;
	width: 83px;
	height: 23px;
	margin: 5px;
}
#delicious-share, #digg-share, #fbook-share, #linkedin-share, #pinterest-share, #reddit-share, #stumbleupon-share, #tumblr-share, #twitter-share {
	background: url('/images/social-sprite.png') no-repeat;
}
#delicious-share {
	background-position: -5px -183px;
}
   #delicious-share:hover {
	   background-position: -5px -206px;
   }
#digg-share {
	background-position: -5px -229px;
}
#digg-share:hover {
	   background-position: -5px -252px;
   }
#fbook-share {
	background-position: -5px -275px;
}
   #fbook-share:hover {
	   background-position: -5px -298px;
   }
#linkedin-share {
	background-position: -5px -321px;
}
   #linkedin-share:hover {
	   background-position: -5px -344px;
   }
#pinterest-share {
	background-position: -5px -390px;
}
   #pinterest-share:hover {
	   background-position: -5px -367px;
   }
#reddit-share {
	background-position: -95px -184px;
}
   #reddit-share:hover {
	   background-position: -95px -207px;
   }
#stumbleupon-share {
	background-position: -95px -275px;
}
   #stumbleupon-share:hover {
	   background-position: -95px -298px;
   }
#tumblr-share {
	background-position: -95px -322px;
}
   #tumblr-share:hover {
	   background-position: -95px -345px;
   }
#twitter-share {
	background-position: -95px -391px;
}
   #twitter-share:hover {
	   background-position: -95px -368px;
   }
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
				
						/*--SHARE BUTTONS--*/
#share-wrap {
    margin: 0 auto;
}
#share {
    text-align: center;
    margin: 0 auto;
    width: 78%;
    overflow: hidden;
}
#share > li a {
    position: relative;
    display: block;
    width: 83px;
    height: 23px;
    margin: 5px;
}
#delicious-share, #digg-share, #fbook-share, #linkedin-share, #pinterest-share, #reddit-share, #stumbleupon-share, #tumblr-share, #twitter-share {
    background: url('/images/social-sprite.png') no-repeat;
}
#delicious-share {
    background-position: -5px -183px;
}
   #delicious-share:hover {
       background-position: -5px -206px;
   }
#digg-share {
    background-position: -5px -229px;
}
#digg-share:hover {
       background-position: -5px -252px;
   }
#fbook-share {
    background-position: -5px -275px;
}
   #fbook-share:hover {
       background-position: -5px -298px;
   }
#linkedin-share {
    background-position: -5px -321px;
}
   #linkedin-share:hover {
       background-position: -5px -344px;
   }
#pinterest-share {
    background-position: -5px -390px;
}
   #pinterest-share:hover {
       background-position: -5px -367px;
   }
#reddit-share {
    background-position: -95px -184px;
}
   #reddit-share:hover {
       background-position: -95px -207px;
   }
#stumbleupon-share {
    background-position: -95px -275px;
}
   #stumbleupon-share:hover {
       background-position: -95px -298px;
   }
#tumblr-share {
    background-position: -95px -322px;
}
   #tumblr-share:hover {
       background-position: -95px -345px;
   }
#twitter-share {
    background-position: -95px -391px;
}
   #twitter-share:hover {
       background-position: -95px -368px;
   }

Rob Seipp – Web and Graphic Design

Website Under Construction. Check Back Soon!

Now for the code:

Here is the entire code together:

And the CSS…