How to setup simple social sharing links
This is one of those super-boring posts about doing boring stuff. I wrote it mainly to share it with every new developer that has to do the same thing. Takes a lot to explain, so I hope this will save me some time going forward.
You see, 80% of the web applications I'm in charge of nowadays are sales tools. 100% of these projects include links to share the page in different social outlets (Facebook, Twitter, LinkedIn, and Google+). We work in about 3 - 5 of these tools weekly, so that's a lot of doing and a lot of people involved.We have to setup these links over and over again, and if you google how to do it, you'll find 200 different posts, each one explaining a different method. And some of them are outdated or incomplete. Sometimes you find everything about Facebook, but then you have to chase the same thing for LinkedIn. Or Twitter. Every new developer working on this gets confused, or worse, implements the wrong thing.
So this is my attempt to solve this problem for us. I'm planning to share this post with everyone working on these applications today and in the future.
Social sharing links
What we do is to include links to share a particular page. These links are usually icons (each social network's logo) that you can click to get some sort of pre-populated message ready to post.There's no other integration, and we don't use the standard widgets found in the developer pages of each one of these networks. We do everything custom. (At the time of this writing, I'm doing this on my blog; I have it setup for Twitter, Facebook, LinkedIn, Google+, and Tumblr.)
<a href="https://twitter.com/share?text=I+really+like+this+blog
&url=http%3A%2F%2Fblog.svpino.com">Share in Twitter</a>
There are several properties you can specify, and you can find all of them in the official documentation, but we usually use a combination of the following:- url: URL of the page to share. Defaults to the current page's URL if not specified.
- text: Text that will be used to populate the share dialog. Defaults to the current page's title if not specified.
- via: Screen name of the user to attribute the Tweet to.
- hashtags: Comma separated list of hashtags appended to tweet text.
url and text is encoded. I use url-encode-decode.com to do this.<a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Fblog.svpino.com">
Share in Facebook</a>
(Some time ago there was a lot of controversy because Facebook deprecated the sharer.php method. After some time, it came back and although I haven't been able to find it in the official documentation, it's still working fine for us.)Facebook uses the Open Graph protocol to get all the information needed to share a page, that's why you don't see any of that content been provided as part of the link. You need to specify this information using meta tags in the
<head> section of your page. Here is an example:<head>
<meta property="og:site_name" content="svpino.com"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="svpino.com"/>
<meta property="og:url" content="http://blog.svpino.com"/>
<meta name="og:description" content="Santiago's personal blog" />
...
</head>
The process works this way:- You ask Facebook to share a link (using the
uparameter, or the current page's URL by default. - Facebook opens the link on their servers, scraps the page looking for the Open Graph information (the one you specified using meta tags), and caches the page (this caching is important. More about it later.)
- Using the information from the Open Graph protocol, Facebook populates the share dialog and presents it to the user.
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fblog.svpino.com">
Share in LinkedIn</a>
All the information has to be specified using the Open Graph meta tags, and LinkedIn will also cache our pages for a week (Actually "for about a week", says their documentation.)If you haven't guessed it yet, there's an important thing to keep in mind: because both Facebook and LinkedIn use the same Open Graph meta tags to specify the sharing details of a page, we can't have different content for these networks.
Google+
Google+ follows the same principle than Facebook and LinkedIn do. Here is our sample link:<a href="https://plus.google.com/share?url=http%3A%2F%2Fblog.svpino.com">
Share in Google+</a>
Their documentation explains how the content for the share dialog is selected from the page. The good news here is that Google+ also uses the Open Graph protocol, although that's second on their list. The preferred way is using theSchema.org microdata (which is what I'm currently using on this blog.)Remember that if you use the Open Graph protocol for Google+ together with Facebook and LinkedIn, it means that the content to share will be the same for all three networks. If you want different content for Google+, you can use the Schema.org microdata instead.
A little bit about the Open Graph Protocol
Here is the full specification for more details.Using the Open Graph protocol we can specify a lot of information about our page, but we usually use a combination of the following:
og:site_name: If your object is part of a larger web site, the name which should be displayed for the overall site.og:type: The type of the content. See the Open Graph documentation for the list of valid types.og:title: The title of your page. This title is displayed in the share dialog.og:url: URL of the page to share. Defaults to the current page's URL if not specified.og:description: The description of your page. This is the content that will be populated in the share dialog.og:image: An image URL to accompany your post. If you don't specify one, Facebook will automatically select one of the images in your page.
A little bit about the Schema.org microdata
Here is the full specification for more details.The Schema.org microdata is a little more detailed and complicated than the Open Graph protocol, but here is a simple example containing all the properties we usually use:
<body itemscope itemtype="http://schema.org/WebPage">
<h1 itemprop="name">svpino.com</h1>
<img itemprop="image" src="{image-url}" />
<p itemprop="description">Santiago's personal blog</p>
...
</body>
Note that these parameters are not specified using meta tags, but rather as part of the regular markup of the page when applicable.The caching problem workaround
As I mentioned before, once one of the network scraps our page and stores it in cache, it will be there for a long time, so we won't be able to modify the content of the page and see the changes right away.Sometimes this is not OK because we need changes to be reflected immediately (think about last-minute changes before a deadline), so we want to be careful and never use the actual link of our page to share it's content. Instead, we can use a throw-away short link to share our page, and if we change the content, we can change the short link to bypass the cache.
So, instead of sharing
http://blog.svpino.com, we'd sharehttp://goo.gl/DlEutt which points to the same location but it's very easy to change. If modified, the social networks will have to parse our page again and our changes will be reflected.What about the rest of the networks?
There's plenty more social networks out there that support sharing content to, but they are outside of the scope of this post. I tried to focus only on the 4 major ones that I'm currently using at work. However, my blog supports sharing to Tumblr, so as a bonus, here is the link I'm using:<a href="http://www.tumblr.com/share/link?url=http%3A%2F%2Fblog.svpino.com
&name=I+really+like+this+blog
&description=This+is+a+very+cool+blog+with+lots+of+content">
Share in Tumblr</a>
Hope this helps.
Không có nhận xét nào:
Đăng nhận xét