7th February 2013
With social signals being the latest buzz word in SEO, it's never been more important to make your content easy to share. The quickest solution is to use a service such as ShareThis or AddThis to generate a chunk of code to add to your site. These services are great at what they do, but they do add a considerable amount of code to do what they do. Page speed is also a major factor in Google's algorithms so adding to your page's size isn't a great idea.
The answer? Make your own links!
I'm taking the big four for this example - Twitter, Facebook, Pinterest and Google Plus. Each of these has their own page to which data can be posted to add a link to their networks. As we're passing links in a link you must make sure that any locations are URL encoded. If you're generating these buttons for static pages, you can use this tool to generate your encoded links. As we're all about MODX at Studio Republic I'll also give you a snippet that will build the links for you for any resource.
Nice and easy this one
<a href="https://www.facebook.com/sharer/sharer.php?u=URL" target="_blank">
MODX:
<a href="https://www.facebook.com/sharer/sharer.php?u=[[sharelink:tag? &link=`1` &id=`[[*id:tag]]`]]" target="_blank">
Same idea here.
<a href="https://plus.google.com/share?url=URL" target="_blank">
MODX:
<a href="https://plus.google.com/share?url=[[sharelink:tag? &link='1' &id='[[*id:tag]]']]" target="_blank">
Bit more complicated as we're building up a Tweet. The status can be anything you like but the example below gets your Twitter handle into the user's Tweet
<a href="http://twitter.com/home?status=TEXT+URL+via+TWITTERNAME" target="_blank">
MODX:
<a href="http://twitter.com/home?status=[[sharelink:tag? &twitter='1' &id='[[*id:tag]]' &pagetitle='[[*longtitle:tag]]']]" target="_blank">
Pinterest needs an image to be set explicitly, hence the image placeholder below.
<a href="http://pinterest.com/pin/create/button/?url=URL&media=IMAGE&description=TITLE" target="_blank">
MODX:
<a href="http://pinterest.com/pin/create/button/?url=[[sharelink:tag? &link='1' &id='[[*id:tag]]']]&media=[[urlencode:tag? &url='[[++site_url:tag]]IMAGE']]&description=[[urlencode:tag? &url='[[*longtitle:tag]]']]" target="_blank">
Here's the snippet I use to build and encode the links in MODX
<?php
$link=$modx->makeUrl($id,'','','http');
if (isset($twitter)){
$link=$pagetitle.' '.$link.' via %40studiorepublic';
}
return urlencode($link);
And the simple URL encoding snippet used on the Pinterest link:
<?php
return urlencode($url);