Replacing social sharing buttons with javascript-less alternatives

Social sharing widgets slow down page loading

For every public facing site there comes the moment where its content has to be shared in social media. We all know the dreaded “Like” or “Tweet” buttons on many sites or blogs. They not only compete for the reader’s attention but also for screen real estate and bandwith. Loading a few social buttons in their default configuration can easily result in 1MB extra traffic per page because, not surprisingly, most of the HTTP responses are not cacheable (which would defeat the purpose of web analytics and user behaviour tracking).
In my personal experience, mobile internet isn’t nearly as fast or robust (yet) when slightly off the hotspots as its operators would us have believe, so this extra payload adds not only to the data package price but also on page load times [1]. Many social website operators are aware of the problem and offer editions of their libraries which load the sharing widget’s resources in a way that does not impede with page rendering, but the widgets will still appear blank until all resources have finished loading.

Social sharing widgets without javascript

For my work on our current pet project http://animasci.com we dug through the dungeon and came up with solutions that do not require any javascript or external graphical resources (which were not in the main sprite anyway). The approach we took was to dig through the dungeon and look for HTTP endpoints which allow direct sharing of pages – and surprisingly, there are some! These URLs are usually hidden as legacy resources or offered for “security concerned” environments. When the user clicks on the link, it will open the respective sharing dialogue hosted at the target social website, thus it requires hardly any work on our side other than rendering the correct link.

Facebook

Facebook documents [3] its sharing facility rather well – it’s the “URL” tab in the configurator (“get code” button). It requires that one has created a facebook application and allows the submission of a title, two descriptions, the url and a preview image.

Google Plus

Even easier to use than Facebook, Google+ offers a single link which requires only the URL of the page to share and doesn’t require you to register or create an app. Google bots will then crawl the page and generate a preview:

https://plus.google.com/share?url=URL_TO_SHARE.

Twitter

Twitter is also not hard to do and also does not require an app:

Previews require Twitter Cards [5] which at the moment of this writing are somwhat buggy when fetching preview images.

Linkedin

The reign of the simple continues with Linkedin:

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

&source=

Pinterest

http://pinterest.com/pin/create/button/?url=&description=&media=

Reddit

Reddit requires a big window – if you are opening a new window with javascript you might need a workaround because it does not fit into the standard 600×600:

http://www.reddit.com/submit?url=&title=

Tumblr

No surprises for sharing photos:

http://www.tumblr.com/share/photo?source=&caption=&click_thru=

Weibo

Hard to find because of the language barrier, but easily executed:

http://service.weibo.com/share/share.php?url=&appkey=&title=&pic=&ralateUid=&language=zh_cn

Don’t let the appkey and ralateUid fool you, they are required, empty parameters.

Renren

http://share.renren.com/share/buttonshare.do?link=&title=

 

General Considerations

At least Facebook, Twitter and Google Plus can generate the web preview (snippets) from page metadata [4]. Even though you have to URL-encode every parameter, many social websites will not work well with special characters in titles.

Resources

[1] Loading scripts without blocking
[2] CSS image sprites
[3] Facebook Like Button
[4] Snippets
[5] Twitter cards

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s