IMPROVING PAGE SPEED BY USING STATIC SHARING LINKS

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.

Facebook

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? &amp;link=`1` &amp;id=`&#91;&#91;*id&#93;&#93;`]]" target="_blank">

Google Plus

Same idea here.

<a href="https://plus.google.com/share?url=URL" target="_blank">

MODX:

<a href="https://plus.google.com/share?url=[[sharelink? &amp;link='1' &amp;id='&#91;&#91;*id&#93;&#93;']]" target="_blank">

Twitter

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? &amp;twitter='1' &amp;id='&#91;&#91;*id&#93;&#93;' &amp;pagetitle='&#91;&#91;*longtitle&#93;&#93;']]" target="_blank">

Pinterest

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? &amp;link='1' &amp;id='&#91;&#91;*id&#93;&#93;']]&media=[[urlencode? &amp;url='&#91;&#91;++site_url&#93;&#93;IMAGE']]&description=[[urlencode? &amp;url='&#91;&#91;*longtitle&#93;&#93;']]" target="_blank">

MODX Snippet

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);

WINCHESTER

LONDON

SEND US A MESSAGE

WINCHESTER

10 Charlecote Mews
Winchester
Hampshire, SO23 8SR

01962 659123
[email protected]

LONDON

86-90 Paul Street
London
EC2A 4NE

0203 507 1842
[email protected]