Add Social Media Buttons without JavaScript

These days, pretty much every website that you visit has social media sharing buttons up at the top of each page. Publishers want to make it as easy as possible for you to like their page on Facebook, share it with your followers on Twitter, and pin it for the world to see on Pinterest. And, even though Google+ might not be as big as the others yet, it is growing quickly and weighs heavily on search results, so it should be included too. This is all well and good, except for the fact that each one of these social media platforms provides their own JavaScript snippet for their button, creating a flea-market-like appearance up at the top of your page. Even worse, you open your site up to potential security breeches and performance issues by calling scripts from multiple external sites on each page. What's one to do?

This article provides a solution. With the function provided below, you can easily add social media sharing icons (or text links) to the tops of your pages, all populated on the server side. (An example can be found at the top and bottom of this article – we add use this function on all of our own code articles.) Your users will be able to share your content easily, and will enjoy the nice, clean look of the icons as opposed to the typical hodgepodge of buttons.

Installing these icons on your site is simple. Simply copy and paste this function:

<?php

function social_links($args) {
	if (!is_array($args)) { return false; }
	if (substr($args['url'],0,4) != 'http') { return false; }
	if (!is_array($args['platforms'])) { return false; }

	$title = $args['title'];
	if (!$title) { $title = '(Untitled)'; }
	
	//this function currently handles the following 4 social media platforms:
	$platforms = array(
	  'facebook'=>'Facebook'
	 ,'twitter'=>'Twitter'
	 ,'pinterest'=>'Pinterest'
	 ,'google-plus'=>'Google+'
	);

	$urls = array();
	
	//Facebook
	if (in_array('facebook',$args['platforms'])) {
		//Facebook
		$urls['facebook'] = 'https://www.facebook.com/sharer/sharer.php?u='.urlencode($args['url']);
	}

	//Twitter
	if (in_array('twitter',$args['platforms'])) {
		//shorten the title if necessary so this fits under Twitter's 140 character cap
		$url_chars = 23; //shortened by t.co
		if ($args['twitter_username']) { $via_chars = strlen(' via @'.$args['twitter_username']); } else { $via_chars = 0; }
		$max_chars = 140 - $url_chars - $via_chars;
		$text = $title;
		if (strlen($text) > $max_chars) { $text = substr($text,0,($max_chars-3)).'...'; }
		$urls['twitter'] = 'https://twitter.com/intent/tweet?text='.urlencode($text).'&url='.urlencode($args['url']);
		if ($args['twitter_username']) { $urls['twitter'] .= '&via='.urlencode($args['twitter_username']); }
	}

	//Pinterest
	if ((in_array('pinterest',$args['platforms'])) && ($args['media_url'])) {
		$urls['pinterest'] = 'http://pinterest.com/pin/create/button/?url='.urlencode($args['url']).'&media='.urlencode($args['media_url']).'&description='.urlencode($title); 
	}

	//Google+
	if (in_array('google-plus',$args['platforms'])) {
		$urls['google-plus'] = 'https://plus.google.com/share?url='.urlencode($args['url']).'&hl=en-US'; //the language is set to US English here
	}

	if (in_array($args['image_size'],array(16,24,32))) { $image_size = $args['image_size']; } else { $image_size = false; }
	if ($args['image_path']) { $path = $args['image_path']; } else { $path = './'; }

	$links = array();
	foreach ($args['platforms'] as $key) {
		if (array_key_exists($key,$platforms)) {
			if ($image_size) {
				$src = $path.$image_size.'px/'.$key.'.png';
				$alt = 'Share this on '.$platforms[$key];
				$caption = '<img src="'.$src.'" alt="'.$alt.'" title="'.$alt.'" style="width:'.$image_size.'px;height:'.$image_size.'px;border:0;" />';
			} else {
				$caption = $platforms[$key];
			}
			$url = $urls[$key];
			$links[] = '<a href="'.$url.'" onclick="javascript:window.open(this.href,\'\', \'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600\');return false;">'.$caption.'</a>';
		}
	}

	if (array_key_exists('separator',$args)) { $separator = $args['separator']; } else { $separator = ' '; }
	return implode($separator,$links);
}

?>

…and then set up your arguments array:

$args = array(
  'image_size' => 16 //can be 16, 24, 32, or false
 ,'image_path'  => '../images/inkplant/social/' //path where the social icons are stored
 ,'separator'  => ' ' //what to separate links with
 ,'url' => 'https://inkplant.com/code/social-media-share-buttons' //canonical URL of the page you are sharing
 ,'title' => 'Add Social Media Share Buttons to Your Site without JavaScript'
 ,'media_url' => 'https://inkplant.com/images/inkplant/code.png' //image to be used for pinning on Pinterest
 ,'twitter_username' => 'inkplant' //populates the via @username part of your share tweets
 ,'platforms' => array('facebook','twitter','google-plus','pinterest') //which icons/links to include and in what order
);

Finally, place the icons wherever you'd like them to appear on your page. Below are a few examples:

'echo <p>'.social_links($args).'</p>'
$args = array(
  'image_size' => 32
 ,'image_path'  => '../images/inkplant/social/'
 ,'separator'  => ' . '
 ,'url' => 'https://inkplant.com/code/social-media-share-buttons'
 ,'title' => 'Social Media Share Icons'
 ,'twitter_username' => 'inkplant'
 ,'platforms' => array('facebook','google-plus','twitter')
);
echo '<p>'.social_links($args).'</p>'

If you don't want the images, you can use text links instead:

$args = array(
  'image_size' => false
 ,'separator'  => '<br />'
 ,'url' => 'https://inkplant.com/code/social-media-share-buttons'
 ,'title' => 'Social Media Share Icons'
 ,'media_url' => 'https://inkplant.com/images/inkplant/code.png'
 ,'twitter_username' => 'inkplant'
 ,'platforms' => array('pinterest','google-plus','facebook','twitter')
);
echo '<p>'.social_links($args).'</p>'

Pinterest
Google+
Facebook
Twitter

Currently this function only supports the four main social media platforms – Facebook, Twitter, Google+, and Pinterest – but you can easily modify it to add more. The icons are courtesy of IconDock and they have several more available. If you do decide to add in more social platforms, please share your code for everyone in the comments below.

Oh, and make sure to share this article on social. Sharing is just a click away…


Comments

Loading…

This post was first published on August 11th, 2013 and last updated on April 4th, 2015 by Robert James Reese in the following categories: Facebook, Google+, PHP, Pinterest, and Twitter. Before using any of the code or other content in this post, you must read and agree to our terms of use.