Skip to content

Instantly share code, notes, and snippets.

@jbmoelker
Last active December 17, 2015 14:18
Show Gist options
  • Save jbmoelker/5622933 to your computer and use it in GitHub Desktop.
Save jbmoelker/5622933 to your computer and use it in GitHub Desktop.
Instead of using javascript heavy widgets to provide an option to share a webpage via social media, consider using static links (urls) instead. These will work regardless of whether the user has javascript is enabled. They improve the load speed of your page and are less of a hit on the battery of your users' devices.This gist contains static ur…
<?php
/**
* @example
*
* $url = 'http://www.example.com/a-specific-page';
* $options = array(
* 'title' => 'A specific page',
* 'text' => 'short descriptive summary of the page',
* 'source' => 'Example.com',
* );
* $share = new idLabsStaticSocialShare($url, $options);
*
* echo $share->getLink('facebook');
* echo $share->getLink('twitter');
*/
class idLabsStaticSocialShare
{
protected $patterns = Array(
"facebook" => "https://www.facebook.com/sharer/sharer.php?u={url}",
"googleplus" => "https://plusone.google.com/_/+1/confirm?url={url}",
"hyves" => "http://www.hyves-share.nl/button/respect/?hc_hint=1&url={url}",
"linkedin" => "http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&summary={text}&source={source}",
"pinterest" => "http://pinterest.com/pin/create/button/?url={url}",
"twitter" => "http://twitter.com/intent/tweet?url={url}&text={text}",
);
protected $defaults = Array(
"title" => "",
"text" => "",
"source" => "",
);
protected $settings = Array();
/**
* @param String $url
* @param Array $options
*/
public function __construct($url, $options = Array())
{
$this->url = $url;
$this->settings = array_merge($this->defaults, $options);
$this->settings['url'] = $url;
}
/**
* @param String $medium
* @return String
*/
public function getUrl($medium)
{
$pattern = $this->patterns[$medium];
$encodedSettings = array();
foreach($this->settings as $name => $value){
$encodedSettings['{'.$name.'}'] = urlencode($value);
}
return strtr($pattern, $encodedSettings);
}
/**
*
* @param String $medium
* @param String $label
* @return String
*/
public function getLink($medium, $label = "")
{
$url = $this->getUrl($medium);
return sprintf('<a class="%s" href="%s" target="_blank" >%s</a>', $medium, $url, $label);
}
}

Static Social Share Patterns

Instead of using javascript heavy widgets to provide an option to share a webpage via social media, consider using static links (urls) instead. These will work regardless of whether the user has javascript is enabled. They improve the load speed of your page and are less of a hit on the battery of your users' devices.

Example

To add a "Facebook like button" on a page you can simply use an anchor tag:

<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fgoogle.com"
   target="_blank">
	Like on Facebook
</a>

This particular example would share http://google.com. Notice this string is url encoded in the href value.

Patterns

While not all of them are properly documented, all popular social media will offer a way to share/like/pin/tweet using a static url rather than a javascript widget.

Parameters

Each will allow you to at least share a url and possibly additional info. Let's say we have the following options:

{url}		Web address of the page you wish to share 
			(typically the page the link is on)
{title}		Title of the page you're sharing
{text}		Descriptive and maybe catchy summary of the page you're sharing 
			(note Twitter 140 character maximum)
{source}	Name of the site from which you are sharing the page

Each social medium has its own pattern in which these parameters can be used:

Facebook (undocumented)

https://www.facebook.com/sharer/sharer.php?u={url}&t={text}

or use alternative by Nicolas Alpi

Google+

https://plusone.google.com/_/+1/confirm?url={url}

Hyves (popular in The Netherlands)

http://www.hyves-share.nl/button/respect/?hc_hint=1&url={url}

LinkedIn

http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}&summary={text}&source={source}

Pinterest

http://pinterest.com/pin/create/button/?url={url}

Tuenti

http://www.tuenti.com/share?url={url}

Twitter

http://twitter.com/intent/tweet?url={url}&text={text}

To use one or more of the patterns, simply replace the parameters in the patterns. Do remember to url encode each parameter.

Additional data?

If you want social media to use more information from your page, but you can't pass it on using parameters in the static url, consider adding Open Graph data to your pages, which is scraped by most of the social media when a user shares your page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment