Add Social Media Share Links to Your Website
I finally gave in and put social share links on this website at the bottom of each article. I've had them for authoring articles on the back-end for awhile, but decided it was time for users to have the ability. If the Internet were a football locker room, this website is one step closer to being a jock.
I began looking at the loads of CSS and JavaScript those services want you to put on your website and was immediately put off by it. I spend a lot of time optimizing this site, and adding just the recommended JavaScript for each of the services added more DOM load time and download data than the actual content of the site itself in many cases. That seems a little backward to me. In addition, inserting some of that JavaScript gives those services far too much control and the ability to eavesdrop or even control what's displayed on my blog.
I started to discover that all of the services had a simple URL with query string parameters to initiate sharing. This doesn't allow the services to directly track visitors to this website, of course, until they click on the link to share. Also, this allows me to have complete control of what's rendered and how - even if it is just some simple images with some fancy CSS effects.
To do this there are just a couple variables, some of which are not used by all of the services.
| Variable | Description |
|---|---|
| TITLE | Article title |
| USERNAME | Applicable service username |
| URL | Full URL to the article |
| SUMMARY | A summary description of the article |
| IMAGEURL | A URL to an image for the article |
These are going into a query string, so their values must be safe for that purpose and this usually requires encoding. For example, in PHP you can use the rawurlencode() function on each of the values.
Here are the URLs I've managed to come up with. Some of them are not using all of the available variables, but they seem to work just fine.
https://twitter.com/intent/tweet/?text=TITLE&url=URL&via=USERNAME
https://www.facebook.com/sharer/sharer.php?u=URL
Google Plus
https://plus.google.com/share?url=URL
https://www.linkedin.com/shareArticle?mini=true&url=URL&title=TITLE&source=URL&summary=SUMMARY
https://www.reddit.com/submit/?url=URL&title=TITLE
Hacker News
https://news.ycombinator.com/submitlink?u=URL&t=TITLE
https://pinterest.com/pin/create/button/?url=URL&description=SUMMARY&media=IMAGEURL
Voilà, you've got some live share buttons. Not too flashy, not too plain, just right.