Skip to content

Instantly share code, notes, and snippets.

@smhmic

smhmic/ - USAGE.php

Last active March 14, 2016 13:15
Show Gist options
  • Save smhmic/4a97af7ecfe87b55d2a8 to your computer and use it in GitHub Desktop.
Save smhmic/4a97af7ecfe87b55d2a8 to your computer and use it in GitHub Desktop.
Download ZIP
HTML-only social share buttons generator w/ utm auto-tagging and bitly shortening
Raw
- USAGE.php
<?php
seer_html_social_share_links( array(
'url' => THE URL TO SHARE, // The URL to share
'text' => '', // Default share text
'image' => IMAGE URL, // URL of the image for the share
//'text_before' => '', // The text to show before the buttons
//'text_after' => '', // The text to show after the buttons
'class' => '', // HTML wrapper class(es)
'_use_the_post' => false, // If true, uses Wordpress functions to populate default options
//'shorten' => false, // Whether or not to use bit.ly to shorten URL
'utm' => array( // UTM tagging parameters
//'source' => '',
//'medium' => 'social',
'campaign' => 'people+asset',
'term' => FOR PEOPLE-SPECIFIC SHARE BUTTONS, SET TO PERSON NAME,
//'content' => '',
),
//'networks_exclude' => array('pinterest'), // Social networks not to provide buttons for
) );
Raw
lib.php
<?php
/* returns the shortened url */
function get_bitly_short_url($url,$login,$appkey,$format='txt') {
$connectURL = 'http://api.bit.ly/v3/shorten?login='.$login.'&apiKey='.$appkey.'&uri='.urlencode($url).'&format='.$format;
return curl_get_result($connectURL);
}
/* returns expanded url */
function get_bitly_long_url($url,$login,$appkey,$format='txt') {
$connectURL = 'http://api.bit.ly/v3/expand?login='.$login.'&apiKey='.$appkey.'&shortUrl='.urlencode($url).'&format='.$format;
return curl_get_result($connectURL);
}
/* returns the response body for a url */
function curl_get_result($url) {
$ch = curl_init();
$timeout = 5;
curl_setopt($ch,CURLOPT_URL,$url);
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}
/* wrapper for get_bitly_short_url(), with caching and leveraging constants:
define('BITLY_USERNAME','');
define('BITLY_API_KEY','');
define('BITLY_CUSTOM_DOMAIN','');
*/
function seer_get_short_url($url) {
$cached = get_option('seer_shorturls'); // Wordpress-specific
$cached = $cached ? $cached : array();
if( empty( $cached[$url] ) ){
$shorturl = get_bitly_short_url($url,BITLY_USERNAME,BITLY_API_KEY);
if( $shorturl && stripos($shorturl,BITLY_CUSTOM_DOMAIN) ){
$cached[$url] = trim($shorturl);
update_option('seer_shorturls', $cached, true ); // Wordpress-specific
}else{
$shorturl = '';
}
}else{
$shorturl = $cached[$url];
}
return $shorturl;
}
function seer_html_social_share_links__tag_url( $network, $opts, $default_campaign = '' ){
if( empty($opts->url) ) return;
if( false === @$opts->utm ) return;
if( true === @$opts->utm_tagged ) return;
switch( $network ){
case 'twitter': $network = 'twitter.com'; break;
case 'facebook': $network = 'facebook.com'; break;
case 'google-plus': $network = 'plus.google.com'; break;
case 'pinterest': $network = 'pinterest.com'; break;
case 'linkedin': $network = 'linkedin.com'; break;
case 'buffer':
// Don't tag for buffer
$network = '';
break;
default:
//TODO: throw error
continue;
}
$req = array(
'source' => $network,
'medium' => 'social',
'campaign' => $default_campaign,
//'term' => '',
//'content' => '',
);
foreach( $req as $k => $default ){
$opts->utm->$k = trim( empty($opts->utm->$k) ? $default : $opts->utm->$k );
if( empty($opts->utm->$k))
return;
}
$opts->orig_url = empty($opts->orig_url) ? $opts->url : $opts->orig_url;
$opts->utm_tagged = true;
preg_match( '|^([^#]+)(#.*)$|', $opts->url, $matches );
if( !empty($matches[2]) ){
$opts->url = $matches[1];
$hash = $matches[2];
}
$glue = strpos($opts->url,'?') ? '&' : '?';
foreach( $opts->utm as $k => $v ){
if( $v ){
$v = strtolower( str_replace(array(' ','&'),array('+','%26'), trim( trim( strip_tags( $v ) ), ':' ) ) );
$opts->url .= $glue."utm_$k=$v";
$glue = '&';
}
}
if( !empty($hash)){
$opts->url .= $hash;
}
}
function seer_html_social_share_links__shorten_url( $opts ){
if( empty($opts->url) ) return;
if( false === @$opts->shorten ) return;
if( true === @$opts->shortened ) return;
$short_url = seer_get_short_url($opts->url);
if( $short_url && 0 === stripos($short_url,'http') ){
$opts->orig_url = empty($opts->orig_url) ? $opts->url : $opts->orig_url;
$opts->url = $short_url;
$opts->shortened = true;
}
}
/**
$opts = (object)array(
'url' => get_the_permalink().'#',
'utm'=>(object)array(
'source' => '',
'medium' => '',
'campaign' => '',
'term' => '',
'content' => '',
)
);
*/
function seer_html_social_share_links__tag_and_shorten_url( $network, &$opts, $default_campaign = '' ){
if( empty($opts->url) ) return;
if( ! empty($opts->{"url_$network"}) ){
$url_bak = $opts->url;
$opts->url = $opts->{"url_$network"};
}else{
#pfx_dump($opts);
$opts->url = empty($opts->orig_url) ? $opts->url : $opts->orig_url;
}
$opts->shortened = null;
$opts->utm_tagged = null;
seer_html_social_share_links__tag_url( $network, $opts, $default_campaign );
#pfx_dump($opts);
seer_html_social_share_links__shorten_url( $opts );
#pfx_dump($opts);
$r = $opts->url;
if( !empty($url_bak) ){
$opts->url = $url_bak;
}
return $r;
}
function seer_html_social_share_links( $opts = array() ){
if( is_string( $opts )) {
$opts = array( 'text' => $opts );
}
$opts = (object)$opts;
if( ! isset( $opts->_use_the_post ) ){
$opts->_use_the_post = true;
}
if( empty( $opts->url ) ){
if( $opts->_use_the_post ){
$opts->url = get_the_permalink();
}
}elseif( substr($opts->url, 0 , 1 ) == '#' ) {
$opts->url = get_the_permalink().$opts->url;
}
if( empty( $opts->text ) && $opts->_use_the_post ){
$opts->text = get_the_title();
}
if( empty( $opts->image ) ){
$opts->image = '';
if( $opts->_use_the_post ){
if( function_exists('get_hero_img') ){
$__img=get_hero_img();
if( $__img && !empty($__img['url']) ){
$opts->image = $__img['url'];
}
}
}
}
if( empty( $opts->networks ) ){
$opts->networks = array(
'facebook',
'twitter',
'google-plus',
'pinterest',
'linkedin',
'buffer'
);
}
if( !empty($opts->networks_exclude)){
$opts->networks = array_diff($opts->networks,$opts->networks_exclude);
}
#$opts->url = esc_attr( urlencode($opts->url));
#$opts->text = esc_attr( urlencode($opts->text));
if( empty($opts->text) ) $opts->text = null;
if( !isset( $opts->shorten ) ){
$opts->shorten = true;
}
if( false !== @$opts->utm ){
$opts->utm = empty($opts->utm) ? (object)array(
'source' => '',
'medium' => '',
'campaign' => '',
'term' => '',
'content' => '',
) : (object)$opts->utm;
if( empty($opts->utm->medium))
$opts->utm->medium = 'social';
if( empty($opts->utm->term)){
$opts->utm->term = array();
if( strpos($opts->url,'#')){
$opts->utm->term[] = 'contextual';
}
if( !empty($opts->text_before)){
$opts->utm->term[] = $opts->text_before;
}
elseif( !empty($opts->text_after)){
$opts->utm->term[] = $opts->text_after;
}
$opts->utm->term = join('+',$opts->utm->term);
}
if( empty($opts->utm->content)){
if( !empty($opts->text)){
$opts->utm->content = $opts->text;
}
}
}
ob_start();
foreach( $opts->networks as $network ){
$_href = '';
$_href_params = (object)array();
$extra_attr = '';
switch( $network ){
case 'twitter':
$network = 'twitter';
$_href = 'http://www.twitter.com/intent/tweet';
if( $opts->url ) $_href_params->url = seer_html_social_share_links__tag_and_shorten_url( $network, $opts ); //A fully-qualified URL with a HTTP or HTTPS scheme, URL-encoded. The provided URL will be shortened with Twitter’s t.co to the number of characters specified by short_url_length.
if( $opts->text ) $_href_params->text = $opts->text; //Pre-populated UTF-8 and URL-encoded Tweet text. The passed text will appear pre-selected for a Twitter user to delete or edit before posting. The length of your passed Tweet text should not exceed 140 characters when combined with any passed hashtags, via, or url parameters. Passed Tweet text which causes the Tweet to exceed 140 characters in length will require additional editing by a Twitter user before he or she can successfully post.
$_href_params->via = 'SeerInteractive'; //A Twitter username to associate with the Tweet, such as your site’s Twitter account. The provided username will be appended to the end of the Tweet with the text “via @username”. A logged-out Twitter user will be encouraged to sign-in or join Twitter to engage with the via account’s Tweets. The account may be suggested as an account to follow after the user posts a Tweet
//$_href_params->hashtags = ''; //Allow easy discovery of Tweets by topic by including a comma-separated list of hashtag values without the preceding # character.
//$_href_params->related = ''; //Suggest additional Twitter usernames related to the Tweet as comma-separated values. Twitter may suggest these accounts to follow after the user posts his or her Tweet. You may provide a brief description of how the account relates to the Tweet with a URL-encoded comma and text after the username
//$_href_params->in-reply-to = ''; //The Tweet ID of a parent Tweet in a conversation, such as the initial Tweet from your site or author account.
break;
case 'facebook':
$network = 'facebook';
$_href = 'http://www.facebook.com/sharer/sharer.php';
if( $opts->url ) $_href_params->u = seer_html_social_share_links__tag_and_shorten_url( $network, $opts );
//TODO
//if( $opts->text ) $_href_params->text = $opts->text;
break;
case 'google-plus':
$network = 'google-plus';
//https://developers.google.com/+/web/share/#sharelink
$_href = 'https://plus.google.com/share';
if( $opts->url ) $_href_params->url = seer_html_social_share_links__tag_and_shorten_url( $network, $opts );
//TODO if( $opts->text ) $_href_params->text = $opts->text;
break;
case 'pinterest':
if( $opts->image )
$_href_params->media = $opts->image;//image url
else
continue; // no point posting to pinterest with no image, right?
$network = 'pinterest';
$_href = 'https://pinterest.com/pin/create/button/';//TODO: or https://pinterest.com/pin/create/bookmarklet/
if( $opts->url ) $_href_params->url = seer_html_social_share_links__tag_and_shorten_url( $network, $opts );
if( $opts->text ) $_href_params->description = $opts->text;
//TODO
// TODO prevent pinit.js from making this into pinit button
//$extra_attr .= ' data-pin-no-hover="true" nopin="nopin"';
//$extra_attr .= ' data-href="'.esc_attr($_href.'?'.http_build_query( $_href_params ) ).'"';
//$_href = 'data';
break;
case 'linkedin':
$network = 'linkedin';
$_href = 'https://www.linkedin.com/shareArticle';
if( $opts->url ) $_href_params->url = seer_html_social_share_links__tag_and_shorten_url( $network, $opts );
$_href_params->mini = 'true'; //A required argument who's value must always be: true
//TODO
$_href_params->source = 'Seer Interactive';
if( $opts->text ) $_href_params->title = $opts->text;
//if( $opts->text ) $_href_params->summary = $opts->text;
break;
case 'buffer':
$network = 'buffer';
$_href = 'http://bufferapp.com/add/';
if( $opts->url ) $_href_params->url = seer_html_social_share_links__tag_and_shorten_url( $network, $opts );
if( $opts->text ) $_href_params->text = $opts->text;
//TODO
//https://github.com/bufferapp/sharejs
//preferred-login //Preferred service to share to or login from
//partner-source // Partner name.
//partner-placement //Partner specified identifier (ie. mini)
$_href_params->via = 'SeerInteractive'; // Via (twitter screen_name)
break;
default:
//TODO: throw error
continue;
}
// moved to main.js
//$onclick = "window.open(this.href,'_blank','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=760px,height=570px'); if('cancelable' in event && event.cancelable)event.preventDefault();else event.returnValue = false;return event";
$onclick = '';
echo '<a class="sharelink fa fa-'.$network.'" href="'.(esc_attr( $_href.'?'.http_build_query( $_href_params ) )).'" target="_blank"'.($onclick?' onclick="'.esc_attr( $onclick ).'"':'').($extra_attr?' '.trim($extra_attr):'').'></a>';
}
$sharelinks = ob_get_clean();
ob_start();
?>
<aside class="sharelinks<?= empty($opts->class) ?'':' '.$opts->class ?>" data-url="<?=esc_attr($opts->url)?>" data-text="<?=esc_attr($opts->text)?>">
<?php if( !empty($opts->text_before) ){ ?>
<span class="sharelinks-text"><?= $opts->text_before ?></span>
<?php } ?>
<?= $sharelinks ?>
<?php if( !empty($opts->text_after) ){ ?>
<span class="sharelinks-text"><?= $opts->text_after ?></span>
<?php } ?>
</aside>
<?php
return ob_get_clean();
}
Raw
style.scss
@mixin retina() {
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 1.5/1), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
@content;
}
}
.sharelink {
width: 40px;
height: 40px;
display: block;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAADwCAYAAABykyYvAAATFElEQVR4Ae2bB3QVZfrGhy41dAgklIRQQ29KW5SqAjaK7AoioOuuqyK46K6oFBHdlaW50sHQiyIs0ptISaVISe8kNwU25abX5/8+X5jDPdmwssm9N3PO/z7nvCeXuTPf/Oat3ySqDZ66ziRmNqiZCAgjm0ZSAwOaHYAOQMMDDvntevR98Wv0mLDKmsY1uXZFAAm3DgMm/RMDJ3+DUa9ttqZxTa7Ne5QfkE/Jha4FxiMrJ9+axjW5Nu9RfsDu41di7KytsJG4Nu9RfkDmCsPBJy6viouhrs/MzkO2xTo8xrV5j0oBTLqXiQUrT+Klt3di5P2cm/CHbVyr8gHNmbkYO3srnPotQpdnVqDrsyvgPPRzybc14kkDAK7ZfhmNByzGsFc2oPcLaxRkh1FfYdCUtcg0ggenzd8Hj9HLFdzTr3+LM94R8L8Zh4Bb8SgsKqpcwKKiYrzw1g54jlsJ5yGfY+1uX1jIGEUyckbJjZs98Rn2HbtpDMBsNmApgLupWQK4CT2fW4XWQ5dh3R5fvTkjIyuvcgD5PVvI41O+US2F1w56eR2eeHkthk/bqNbgxHjz0x8qB5CtY8DEf8J1+BfMPcKpjcCw35VsNLo9uxIN+izEvC+PVBZgnoR0NZoPWgqPMcsFcC2GCuBvpM30kuOs6Cqd/8pwVw5gQWERjv0cgoOnA/H9yVt4cvpG5bmOAvvBV8dx9HyIFMsNxCWmGaOKx8zcokLd9PEl2H/8lrHajOWN2Qc3fxfgAHQAGhaQE4fn2X3LP3rmZrl2FVpIX9x+6BoepvFverHa7fvSdC81ix4scxZb2vVAk5o4fV5cY9/XzrJncdmvnf0n8rXTzi/uHHmE442HyiwmhK1e3B2/m3EA0hyAQyauMYvBoGbWBk3bZBaDQc2see6MMIvBoGbWuh4wmcVgUDNr3fbGmMVgUDMUoAPQAegAdAB2fYRzuu+LQcfd0Wj6bSTqbApHXbEWXpHosicGPeQ7j13RcNsZDU9rAuo3bbw1kj/57zLOI0AsWm2LVECvnEnE0qspWHIlBS+cSEATubbmhnC47ojCiMPxfFiadQA7yFMPOXgH873voqVXFNrKTeiN0g/RelsU3OXck3eyUFprbqZh8skEXE7MkXXuocEWmbVWApSnj8Dsn5JAbQhMR52NEcojngKl36SThLCR3PRYLOEerqTsAvWg/b+/w4exDqCT3PidS8nQdTQmS3ms2vowOEtIO0nYGdYJx0x4FG0NToebwHnstg6gJHwEpp5OgKVSc4uwVPJr4IE7qiC0fwRh4knTI8CZ0UzOb7czig9pHcDOe6LRULx4oozw5RYW45Tk3EL/fyvP/JqYy06bI/Qctg4gk/+54ybsCjMjI78I5VWx2FP/imOlW7cPsuLmXr4LKq+oGOVVcnahCmu7HXruWbHN0Ivh6fmogCQVstHkWxYV17Vyo2YhDJfwBCTnoqCcTvzA5x5qbwyHpy1GXRcx9jlOhrS8/z0PeU1X6ZVtGV5bALKS2Zw3B5lRHn0sVa57zyaAXLi9DHmX7VH4PjID/4suynhrtDWCk8P6gFyQQ507EBZLY7mR9nUohh+Kw7V7ufg1RZsL4C7XNveK1BuzdQG5Teq1Pxajf4xH3+9i1efJpxKwUWZyQlYh/pu8xXPMO+6C9MZsbUBur8Ri8JlsnWIzCvAoSpWC+FzObyGVz+rnNsxyTauHmEOdW6zpssfbF5GBkNQ8ZFn0mnxp3vdyCtU261MpBs7nupsimLMCZ/sdNbdVDDWHPCuRyS4QsRh3zISXTiRwfCkvOXup71UhqevsveXXC4aArgLRUoCY/K22qU2sSgdPx0uT1c0B6AB0ADoAYWQjoImkBjWTFvHsEyYxs0FNAcLIppHUwIBmB6AD0AH4/w9w3CCEjx2AsKd6Iuw3nv9pw7vr51lew/Np/GwjwPGDET6mP4L7tkHIEx6ImjyqxCaOKLFJIxH7+iTc+dM0OXcIIp4e+ODaZx5H5IvDafxsfcDICUMQOqwrQga4wfTxHGRd8UFBkglUcWEhirKzUJieisxL55C6b5uCCB/dl9cqb4cMdEd2gA+Nn3nMaoAMCcMmgN2Q8fNpUObjhxAz80Wk7t4CSyUumY/gHs6IIABDqQP2b4+88BAaP1sXkKEKkbCmH94PKvPiGdx2r4/g3q643b4O7q79CrryE00IG9GL3lM/Qwd1FI91wO0ODZB9zZ/Gz+oYvwsf1YfpUDFAhjZ66tgHXlr2EYI8myNCwq48O7QL8mOjoCv2jSkI7tcOMdMnIP79NxD37muImfGC7kF+Vsfi572O6N8+LZB9KwbIkJg+mQNdSX/7BEE9WuohFNgWSN3rBV1x78zArVbVkLprM35NyauXIbiXi3UB03/8DkFdmqpCIGSgfE7Zth66oqeNk2Jyt58HS4e4OD9PbvI8Aj2cJJfcVNvJDboBKtP7PCud8PbKQb1I2iLth93QVZh6D3feni751xUpOzaAyo+LKWlHgzvr4bdTFbPNPNkDYYSRvCrKNOuc8jkDVJbfRYSP7E3vEVK/1j59UG/UHFP0JCcG8yjzwhnoSlz6F9xsot1/oMH6dXaaJJajbkRv6X8uuP6YhsgXfoOiDOVN+ZkO01/fZvFwHOqQ9pnF+gwmGEMdO3sSktcsQ4rXOiErhKWSly9CcB9XeslOuxnltV4qt5K+WIC8qDBQBXeTkPHTSaTs3KTGn6Xi578pkG3oKdsDsoJZdan7vKArafliepIe5URRbYb9LDc0EFR+TAQnDFuI7QG5rbojk0FX0hcfcf4yl/QwcmMgzbqJKh4UFoCKfnkswoZ1sz1gcE9n3Nu46n6DzqfneOP/3IzebzFF6WklgFNG2weQYUxe9TmUiovZnLmTkaLpp5/D/qeOxb03C1RBookPwuO2B6QXoqaMga78hDhWseRlOwR1k/zr3pIjizNXjUAqYdH7LBJ7vZMMQohsnRI+nYvi3Fzoygm6qUaf+dhBFCQnQtfdf/6N+0QWl30AmV8sBt6UuxNWc67MU136DE47uBsxsycqz4WP7sf2ZBdAHZImoewkRdNKTZPI54byRUn9ZL7xeKhUvH5+Zbx26t6U5O9DKL5i8if7nb43dLy4V5Y5AB2AMLIZ/88Q2kdHTWJmg5oChKGNpAYGNDsAHYAVNgfggmPQPjwCbd4h69qHP3LtCgJyAS703iHUX3zSqqbNFcgPFGT5Aek5wn12Lhzm3AKr2opLUagyV3myAoCyQN1FJ2Er1dM9WV5A5kqDJaeQnV8Iaysrr1DWFsB5FQRkvjAklvJPMOPI7URURFyTa1sdcNu1eGhvfQ9t5h68vOcaioqLjQX4/I4r0J7fAu213dD+fBj5hUXGArxmSkfnL86ivsCt9481XohLy3CAV8WDX50Oxcozodh5PR5UdGo2Fp4IwcLDt/Vj+MY7GmPWe2P8Zl9+th/g3y9EQntpK7TntqDjP86DOhqSDO13O6FN8kKTZacxaddVaJO9So79fj+06bvw6oGb9gHcFHAH2p+kiv/wHUZv9QN1Purfcu6/oP3lSEnjffsARsl3XVdfUJNIm38Y2uv7cCr8XuUC0gh4MDARVGFRMXqu+hnauz9Am7UXfzx0q3IB2R87rPwZllp0Ngza7L3Q3tyPV/Zdr3xATwmrpZb+FKG8R8BZB25UPmCXUh5ceOaBBx2A1Hq/WGkd+9RNh2/yAXUu8l5JIbyxD25f/QRLLTgVCu3VXRLmPZi+/xfbA37jG6Nups3YjcHSiKkzEQL4x5INhMuXZ2GpD6WBa7/boSCn7r1me8C49Bz8KzBJLBEB8emgUrLz2azV8YsxKbBU+L+z8INszQ6J3UrKsD6g4TesdRedMPCWn6NrzkEsPBtm0JemBWJcYK5RXzsN+eJuf3MAOgBhaDP8nyH823UyiZkNagoQRjaNpAYGNDsAHYA2NQdg+87wb9sRvi3awKexs4W1gq9zu0oEdOuiwC7XboQLWg0Fc7Vbb7E+yq506QWfRi3lu5rwadIaATzfXoAB7l3pJbn5Y7gxbBRMX69D5rXrKM7L4/+6oazQnIG0c+cR/ZeP4efaQc6tpXvctoCEu1y3MS7XbyZga/EoygkLx+3xL9Gb9DohbQPIMHk3aKbyy+zjB11F2TlIWLcRoa/ORvCUVxAkFv3XT5B1OxCWCpr4W0JyHdsA+rm442LVOkg5chy60s9fQICHJ85omjICXKrlhPPy+XKdxkjy2mnxINm40rmnPGRTetG6gFzwQpXaCJ76KnRl+F/Bxep1cVZgbgx5SnmQ+ebTVIqiQzdcYgFVra3O05WwYbMeausC+rV2w6XHGiL11BlQLIQbQ0cqr4VMn4mi3FxQ6VIYvs1c4NuynQrlz/J9xFtzoCvvTjz823SEj5xjVUCfJq1UeArS0kCZL1wST1SHT3NX5CffhaVujRmvwsvrWFA3nxwDXfwvia/16M8WZF1ALsiFi+QGVPyK1cp7N0eNg6WKCwpwfcAQeDs1LwGs1xQ3nnoAWCh5eNWzL9uUrQDzSgCXr8RpAbz9zHOwVMaVq3KuM/zuT5GL1epKCsyCrqLcHFzt3o/nWBmQOdO2E/LiTaAyA65IRbP5dkSeKQG64pavUqHXC4s5GLv0C+jKDg6VfHZnali5itt6qGmQuGkrdEW8PU8AqiA7KFgPsOTfOBl/DQnHQpHCckLm1WvQlbx7H9eRQvGwfpvxbtQCfrJwblTUfW+tFoi2wlUMqiAlBT4NW6qCYhs5pyp8NiwkbWq6hL2O1fugPubYhCUX+yHp2+2yIeiJsJm/hy7OYk4S9sWfWEAjxqIgNRW6Mnz9cKlmA/i2drPtLPYWLzFMnBbJu/aitEzfbLBMBaXCtHRc7dpb9VJ/W4260kXj27wNskNC7wOkwXzZB2UpI+AqrvcdxDEpD6jgbA/IPne9/xA9/2S79YvaSIS98ZbM6mMcb8q74X94R42+SzXqE465ZxdAzlip4rnQRRi2FLYYNmfZYQtUPVzUHmMh2XXDShOYqpJr66GLnmJe0kOc24TixsHSY3YD9HPpoKrx7t79D7ZRHT25T6wojBUBq9dDyo9H9bHH0HLSGAOQTfiCjLkkrx3IvH6DRUBjOI0BSONEudKpB/xatWdo2R+N9V7MqmSl0vTG6/jNQiWaA9ABCCOb8f8M4d62nUnMbFBTgDCyaSQ1MKDZAegAtIc5ADu0a4+2rV3QrFFjZW1ateaxygckhEuLlqhZtRrq1aqNHl27KXOqWw+15JgOaldA/Yb0lKZpaOLUEC8+9zx+OHAAmZmZyo4eOYJnx4xF7Ro1UUXOcW7ajNfRbAfIxdu7tkH92nUUWEc3d8yb8x4C/P3xMJ06eRKzZ8wULzuraxrVqw+3Nm25lvUAPdq7MVQqZFXlJo/3H4A1q1YjMTERj6rQkBB8tmgxenfvoTxau3oNPfwVA+QCXKhxAycVsj27dqMY5VdOTg52bNuGsSNHoYmsqUOWG7BV8xZoLUXgzzBaWT7e3gw971F+QLaOtq1c8P7cuTh14gSsJa419905XJ9WsRDTqmmaaiVDBw3G5o0bkZaaiv9VvGbLps0YPnQYalapiuqapq9f8SpmofBJWYm0bp064+OPPsKNX37BrynwdiA+XfAxr9Gv51pck2tXvEi4UENpvKxgd2kRzs2aQ79R88ZN8Nr06Th+7FiZLWbGtOloKT1QP5/Xcg1GpKG0HK5dIQ+yZ7FIRj01Auu+WYvQ0FD4+/njwz/Ph4csrN/4sWrV8ZI0a6lQse3qcy05pn/fzsUV7783l9eqNb5evRojhz8Jl5bOcHNtU35APrGrLBIcFITSirtzB18uW4Zent11EOVlmv7vQf0HYvnf/o7YmBiU1u1bt7g+q7hiHmS+9O3Zix4oc2pkZGRg04aNqoBYSDWkAMY9/Qy+278fxUVFZTbtxQsXon+fvvQg71HhKn4wdxs0xNTJU9SsLUvHjx7DiePHUZZOlxp7TZ0aVjwHLSEZCj2v2CLGjBiJ7V7bkJ+Xh4eJG4dt33rhmdFjVGvhtTW0Ksxr61QxF3G7X3UcS2NkRA2TUNauXhN6nvXr1Rsr/7EC9+7eha7Y2Fh8tngJesns1c/j/H1SeuBoeTACcibzHhXyoKtzK2V///JLREdHgyooKMAJaSsvT5qs9n06QI8u3VSevvfOu+jcwQP6cac6dfHC+AkqLYru52SI5OGSxYv50LSKzWICnjt7FmXJz9cXs2a8pueopalr35g1G5cuXkRZOnv6DD1Jq/hupk7NWhjYrx9WLF8OU3w8SuvWzVv4RKZF9y5dlS36dCGCAoNQWklJSVi9apXastWVNdkhrFIkbLQNSjaqbNAP3ajmZGerLVVpcSR+OP8DdHR35xpq09vOtU1F94O/vtVnHh4+dOi/7qhffWWaGomqtTRspK9l25cm/WWpmkXLsXwn4efx0qz5TlK1JB9t/07ykDbE8BPE8q2Onzmf9R2z8d6L9eR3/GbBTuYAdADCyGb4P0P8H66fqhzROy66AAAAAElFTkSuQmCC');
background-repeat: no-repeat;
background-size: 40px 240px;
transition: opacity 0.2s;
@include retina {
background-image: url('data:image/png;base64,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');
}
&:hover {
opacity: 0.7;
}
&.facebook {background-position: 0px 0;}
&.twitter {background-position: 0px -40px;}
&.google-plus {background-position: 0px -80px;}
&.linkedin {background-position: 0px -120px;}
&.pinterest {background-position: 0px -160px;}
&.buffer {background-position: 0px -200px;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment