Custom Social Sharing Buttons
There comes a time in every web developer’s life when he has to put social sharing buttons on a page. You’ve seen these, because they are on every site on the web; Facebook, Twitter, Pinterest, and Google + varieties being the most common. Every social network provides their own take on these buttons, and they are evil. Also, you’ll frequently have a site design that doesn’t make use of the stock button styles. This post documents how to create our own custom sharing buttons for the major social networks.
Here’s the design from a recent project:
The intent here is for the icons to link to the posting page of the specified social network and pre-fill the form with the desired message. Easy enough, right? Well, not always. Each social network uses a unique link format – many of those formats changing over time. So, read on for the current way to create each of these links.
A couple of notes before we get to the good stuff:
- Since we’re working with URLs here, our pre-filled text and page URLs will need to be URL encoded. I’d recommend you find a good online tool or Sublime Text package to do this for you.
- This doesn’t work like Facebook’s “Like” button, and it won’t add fans to your page. It also won’t have the impact on search that the default Google “+1” button does.
Like its API, Twitter has changed the pattern of its share links a few times. Currently, it’s best to use the web intents format. Note: I do not make use of the widgets.js file as discussed on that page.
There are several types of web intents, but the tweet intent is the most applicable here. There are several variables in that documentation that may be very helpful for different situations.
A “Tweet This” link would be formatted something like:
<a href="http://twitter.com/intent/tweet?url={url_encoded_url}&text={url_encoded_text}&hashtags={url_encoded_hashtags}">Tweet This</a>So, there are variables added to the URL that determine what populates the status box on twitter. In my example we have:
url={url_encoded_url}text={url_encoded_text}hashtags={url_encoded_hashtags}Do not put the curly brackets in your final link, and make sure you URL encode those values. Also, none of these variables are required, so only use the ones you need.
The html for a working example would be:
<a href="http://twitter.com/intent/tweet?url=http%3A//guerillalabs.co/blog/social-sharing.html&text=I%20love%20Guerilla%20Labs%21&hashtags=AwesomeWebDesign">Tweet This</a>And it would render like this: Tweet This.
You’ll see a couple of other twitter link formats out there, http://twitter.com/share and http://twitter.com/?status=. I’d recommend you stick with the web intents format as it provides a lot more control.
Tumblr
Because Tumblr has multiple post types, there are several ways to format your sharing link. Usually, we want people to share our pages as a “Link” post type, so I’ll focus on that pattern. Here’s the example:
<a href="http://www.tumblr.com/share/link?url={url_encoded_url}&name={url_encoded_post_title}&description={url_encoded_post_text}">Share on Tumblr</a>Once again, there are a few variables at your disposal.
url={url_encoded_url}name={url_encoded_post_title}description={url_encoded_post_text}As before, do not put the curly brackets in your final link, and URL encode the values.
Here’s a working example:
<a href="http://www.tumblr.com/share/link?url=http%3A%2F%2Fguerillalabs.co/blog/social-sharing.html&name=I%20love%20Guerilla%20Labs%21&description=Guerilla%20Labs%20does%20amazing%20work%20and%20you%20should%20check%20them%20out.">Share on Tumblr</a>Which will become: Share on Tumblr.
Reddit uses this format:
<a href="http://www.reddit.com/submit?url={url_encoded_url}&title={url_encoded_title}">Share on Reddit</a>Change {url_encoded_url} and {url_encoded_title} to fit your needs. A final link would be formatted like:
<a href="http://www.reddit.com/submit?url=http%3A%2F%2Fguerillalabs.co/blog/social-sharing.html&title=I%20Love%20Guerilla%20Labs%21">Share on Reddit</a>And it will look like, Share on Reddit, on your page.
For LinkedIn, you’ll need this:
<a href="http://www.linkedin.com/shareArticle?mini=true&url={url_encoded_url}&title={url_encoded_title}">Share on LinkedIn</a>Change {url_encoded_url} and {url_encoded_title} to fit your needs. A final link would be formatted like:
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fguerillalabs.co/blog/social-sharing.html&title=I%20Love%20Guerilla%20Labs%21">Share on LinkedIn</a>And it will look like, Share on LinkedIn, on your page.
There are a couple of other parameters you can use for LinkedIn share links – source and summary – which you can read about in their documentation.
Since Pinterest requires an image to share, these links are slightly more involved. You can get a lot more information about the specific requirements, like recommended image dimensions, from their developer site. You can go very deep with what is possible on Pinterest, but a simple sharing link looks like:
<a href="http://www.pinterest.com/pin/create/button/?url={url_encoded_url}&media={url_encoded_image_url}&description={url_encoded_description}">Pin It</a>You have {url_encoded_url} and {url_encoded_description}, which should be self explanatory if you read the rest of this post, but {url_encoded_image_url} is new. Simply put in the URL of the image you’d like to share.
Here’s a working example:
<a href="http://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fguerillalabs.co/blog/social-sharing.html&media=http%3A%2F%2Fguerillalabs.co%2Fimg%2Fposts%2Fsocial-sharing%2Fshare-design.png&description=Guerilla%20Labs%27%20Social%20Sharing%20Buttons">Pin It</a>You’ll end up with this on your page: Pin It.
Facebook and Google +
Facebook and Google have to be difficult. There is no way to designate the content of the share in the URL for these networks. But, they have provided methods of extracting this information from the page, which is a lot more powerful in many ways, but comes with a more prolonged development effort.
Facebook uses Open Graph tags to determine the content of the share. You can read a lot more about The Open Graph Protocol from the website.
Google can use several methods to determine the content of the share (read more about it in their documentation). One of those methods is Open Graph tags, so let’s just kill two birds with one stone by putting the appropriate tags for both Facebook and Google + on our site.
The Open Graph tags go in the <head> element of your page. These are the tags that I recommend:
<meta property="og:title" content="{title}">
<meta property="og:image" content="{image_url}">
<meta property="og:description" content="{description}">
<meta property="og:site_name" content="{site_name}">If you’ve followed along this far, you’ll be able to make sense of the content= portion of each of those four tags. Note that this is the one scenario where we do not need to use URL encoding (because these values are on our page and not in a URL).
Once that is in place, the actual share links are pretty simple. For Facebook:
<a href="https://www.facebook.com/sharer/sharer.php?u={url_encoded_url}">Share on Facebook</a>And for Google:
<a href="https://plus.google.com/share?url={url_encoded_url}">Share on Google +</a>I do not have Open Graph tags on this site, but let’s go ahead and see how real versions of these links would render on the site: Share on Facebook or Share on Google +.
While not a social network, email is still one of the most popular social communication tools around. Here how you’d create a link that kicks off an email containing your message:
<a href="mailto:?Subject={url_encoded_subject}&body={url_encoded_message}">Mail This</a>Tailor {url_encoded_subject} and {url_encoded_message} to fit your needs. A final link would be formatted like:
<a href="mailto:?Subject=I%20love%20Guerilla%20Labs&body=Guerilla%20Labs%20does%20amazing%20work%21%20You%20should%20check%20them%20out.%20http%3A%2F%2Fguerillalabs.co">Mail This</a>And it would render like: Mail This.
A big caveat here is that this will work on iPhones, iPads, other mobile devices, and desktop computers using a native email application, but it will not work for people who use the web interface of email providers, like Gmail.
The Next Level
There are a few more things you can do here, each of which I will leave as an exercise for the reader.
- Opening the links in a new window/tab with
target="_blank" - Using JavaScript to automatically grab the current page URL and insert it into your social sharing links without needing to customize them for each page.