Custom Share button for Facebook

Sometimes we need to change look of standard elements to make them fit well in site design. In this pots we’ll show you how to make a custom Share button with counter for Facebook and integrate it as a shortcode for WordPress.

Getting statistic for URL via Graph API

Thanks to Facebook Graph API we can get statistic for URL. I.E.: by adding following URL in your browser:

http://graph.facebook.com/http://olegnax.com

You’ll get response with amount of times this link was shared.

{
   "id": "http://olegnax.com",
   "shares": 1
}

Next we need to process the query results using PHP function.

Counter function for WordPress

Add to your functions.php, which is located at the root folder of your theme (or create it, in case it doesn’t exist), following function:

<?php
function customFShare() {
	$like_results = file_get_contents('http://graph.facebook.com/'. get_permalink());
	$like_array = json_decode($like_results, true);
	$like_count =  $like_array['shares'];
	return ($like_count ) ? $like_count : "0";
}
?>

At the third line we form a URL for a query using get_permalink() function, which returns URL of the current post.
Then, at the fourth line, we transform the results into array. At the line number 5, we assign shares value to variable and then, at line number 6, checking the condition of shares content and return 0 if it’s empty.

WordPress shortcode

Add following lines to your functions.php for shortcode:

<?php
function customFShareShortcode( $atts, $content = null ) {
	extract(shortcode_atts(array(
       'type' => ''
    ), $atts));
	return "<a href='http://www.facebook.com/sharer/sharer.php?u=". get_permalink() ."' rel='nofollow' class='".$type."'><strong>Share</strong> <span>". customFShare() ."</span></a>";
}
add_shortcode('customshare', 'customFShareShortcode');
?>

Because we have two Facebook Share button designs in our example, we have to add type parameter for shortcode, which is then output as a class reference. This way we can make different designs for the button.

No we only need to add shortcode [customshare type=shareTxt] or [customshare type=shareCircle] at the editor and you will get the text link of Share button with counter.

Custom Share button design for Facebook

Create customshare.css and add following styles for your buttons:

a.shareCircle, a.shareTxt {
	text-decoration:none;
	display:block;
}
a.shareCircle {
	width:146px;
	height:146px;
	background:url(shareCircle.png) no-repeat 0 0;
}
a.shareTxt {
	width:125px;
	height:75px;
	background:url(shareTxt.png) no-repeat 0 0;
}
a.shareCircle strong, a.shareTxt strong {
	display:none
}
a.shareCircle span, a.shareTxt span {
	font:12px/12px Arial, Helvetica, sans-serif;
	padding:6px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	min-width:14px;
	display:inline-block;
	text-align:center;
	position:absolute;
}
a.shareCircle span {
	margin:12px 0 0 107px;
	background:#000;
	color:#fff
}
a.shareTxt span {
	margin:1px 0 0 98px;
	background:#fe33a5;
	color:#fff
}
a.shareCircle:hover, a.shareTxt:hover {
	background-position:0 100%
}
a.shareCircle:hover span {
	background:#fff;
	color:#2b2b2b;
}
a.shareTxt:hover span {
	background:#000;
	color:#fff;
}

In our example we save customshare.css in customshare folder at the root of current theme (/wp-content/themes/yourcurrenttheme/customshare/).

Now add the styles in our theme for this, add the following code in your functions.php:

<?php
function customFShareCSS() {
	if(!is_admin()){
		wp_enqueue_style( 'customshare',   get_template_directory_uri() . '/customshare/customshare.css','','1', 'all');
	}
}

add_action('wp_print_styles', 'customFShareCSS');
?>

This way style will be added for all front-end pages. You can add you Conditional Tags, to determine on which pages to display these styles.

Custom Facebook Share button examples:

You can download the sources for free from the link below and add those buttons to your WordPress by extracting file at the root of your current theme.
Note: don’t forget to move all the code from functions.php to your existing functions.php.

Sources also contain layered PSD with the custom Facebook Share button from the examples.

Don’t be shy to share this post if you found it useful.
Thank you.