How to (Easily) Create Custom Share Links for Facebook, Twitter, Google Plus, LinkedIn, and Pinterest

Social network sharing links these days are pretty advanced creatures. Most use JavaScript or iframes, or a combination of both. What's great about them is that the buttons can now provide live updating of how many times your content has been shared.

Create Custom Share Links for Facebook, Twitter, Google Plus, LinkedIn, and Pinterest

However, there are a lot of situations in which those two methods aren't advisable -- or even possible. Case in point: advocacy emails. Designing and developing emails can be the bane of any designer who wants to do anything more interesting than a featureless single-column message. Varying CSS & HTML render engines behind every email client (Outlook is particularly horrible), spam filter considerations, mobile email, image display preferences: the list goes on and on. JavaScript and iframes are both big no-nos in email design, however that's where share buttons are these days. Thankfully there are several options, none of which are the most straightforward things in the world.

Facebook

If I want to create a share link for Facebook that works everywhere and has everything I want contained in one URL, I can use Facebook's "sharer.php" functionality. (Facebook says it's officially "deprecated," but there's no sign of them stopping this implementation anytime soon.) So let's say I want to share this link: http://www.otlcampaign.org/blog/2013/02/04/inconvenient-truth-education-reform I can simply add "http://www.facebook.com/sharer/sharer.php?" before the link, and voila!

Create Custom Share Links for Facebook, Twitter, and Google Plus

Thankfully Facebook was able to properly pull a relevant title, blurb, and image from the page to display. However, given that we want to maximize the number of clicks, what if we wanted to customize things? We can! However, it gets much more complicated. Let's say I wanted the title to be The Inconvenient Truth of Education "Reform"!, and have the blurb be Recent events have revealed how market-driven education policies, deceivingly labeled as "reform," are revealing their truly destructive effects on the streets and in the corridors of government:, and have the thumbnail image be this one:

Create Custom Share Links for Facebook, Twitter, and Google Plus

Looks perfect, but the URL looks like this monstrosity:

http://www.facebook.com/sharer/sharer.php?s=100&p[url]=http://www.otlcampaign.org/blog/2013/02/04/inconvenient-truth-education-reform&p[images][0]=http://www.otlcampaign.org/sites/default/files/journey-for-justice-mlk-memorial.jpg&p[title]=The+Inconvenient+Truth+of+Education+'Reform'!&p[summary]=Recent+events+have+revealed+how+market-driven+education+policies,+deceivingly+labeled+as+%22reform,%22+are+revealing+their+truly+destructive+effects+on+the+streets+and+in+the+corridors+of+government:

Yuck. Who wants to replace all those spaces and punctuation marks with HTML code?

Twitter

Twitter's single-URL method of sharing is a bit more straightforward, simply because there are fewer things to worry about: it's just a message and a link (and maybe a twitter user reference or two). So if I want a link to produce this:

Create Custom Share Links for Facebook, Twitter, and Google Plus

I need a link that looks like this:

http://twitter.com/intent/tweet?text=The+Inconvenient+Truth+of+Education+%22Reform%22%3A+http%3A%2F%2Fbit.ly%2F12nPcP2+%28via+%40otlcampaign%29

Still pretty rough.

Solution?

Thankfully, all the code-wrangling needed can be automated thanks to our old pal Javascript. To that end, I've set up an easy tool for creating these share links: Share Link Generator.

I've also included Google+, which unfortunately doesn't allow for any customization to the extent that Facebook does. All you have to do is fill in the fields and click a button. Hope you enjoy!

UPDATE: Manjunath brings up a good point in the comments about mobile sharing: for god knows what reason, Facebook's mobile sharer.php (on m.facebook.com) doesn't use the same parameters. For the mobile Facebook sharer.php, the markup is much simpler, and we can only pick the URL and the title. Like so: http://m.facebook.com/sharer.php?u=<the url you want>&t=<the title you want> If you want to force mobile browsers to use the regular Facebook sharer.php, you can simply add "&m2w" (w/out quotes) to the end of the regular Facebook share link. I haven't extensively tested that yet, so YMMV.
UPDATE 2, 2/2/2014: Facebook has changed its API, so without a special key you can't customize the share links. Boo. However, I've added Pinterest "Pin It" links!
UPDATE 11/26/2013: By popular request, I've added LinkedIn sharing, and users shouldn't run into any problems using & or # in their text now!

Comments

Thanks for the Share-Link Generator! It is awesome!
Hi Patrick, Just a quick thank you for creating the Share Link Generator. It's a great piece of code which helps simplify a very important task. I use it regularly. Thanks again! Boyd.
The application is great but i get an error message from facebook telling me i cannot post the link... any ideas ?
It could be a few things. First off, make sure the URL you paste in begins with "http://". Sometimes Facebook flags certain sites for spam, so to be sure it's not the site itself, try pasting in a different URL while keeping all the other fields the same, and see what happens. Good luck!
Great work! Anyway to allow a larger thumbnail (154x154 px)?