Saturday, January 12, 2013

Using popular share links

Nowadays almost every application needs connection with some kind of social network. The most common task is to publish something on the user's wall. So today I will show how easy you can share your content with Facebook, Twitter, Google+, Tumblr and VK users.

First let's discuss Twitter and Tumblr. To share something on Twitter from your site all you need is just to add link in the following format:
<a href="http://twitter.com/?status=javadevtips.blogspot.com - Ideas, solutions and tips for Java developer http://javadevtips.blogspot.com" target="_blank">Twitter</a>
For Tumblr:
<a href="http://www.tumblr.com/share/photo?source=http%3A%2F%2Fupload.wikimedia.org%2Fwikipedia%2Fcommons%2Fthumb%2F3%2F31%2FBlogger.svg%2F256px-Blogger.svg.png&caption=javadevtips.blogspot.com - ideas, solutions and tips for Java developer" target="_blank">Tumblr</a>     
Now let's make it for Facebook. But it won't be that straightforward as with previous ones. Facebook uses Open Graph and we need to provide the link with our page that has right ol meta tags. Here are the meta tags that you'll need:
<meta property="og:url" content="http://javadevtips.blogspot.com"/>
<meta property="og:title" content="Java Dev Tips - ideas, solutions and tips"/>
<meta property="og:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvXlXbR9AGzfqKWM01TWPNuvGEhTXDOxNlSkb_u_5c1vYhYUJ92dERMkXmLQXQXecsqR-3lgK0udiaB8npunewoV6d3LJMWF2Jvk4T37XIfpZoPEKZDfLtCbIkmer_r0GtICn4JMUBJeUA/s220/243d5e0.jpg"/>
<meta property="og:site_name" content="Java Dev Tips"/>
<meta property="og:description" content="Java Dev Tips - ideas, solutions and tips for Java developer"/>
And we are ready to put the link:
<a href="http://www.facebook.com/sharer.php?u=http://javadevtips.blogspot.com" target="_blank">FB</a>
The same OG meta tags will work for Google+, so here is it's link:
<a href="https://plus.google.com/share?url=http://javadevtips.blogspot.com" target="_blank">Google+</a>
As for VK, it will work with OG meta tags if usual meta tags will not be provided:
<meta name="description" content="Java Dev Tips - ideas, solutions and tips for Java developer" />
And VK link:
<a href="http://vkontakte.ru/share.php?url=http://javadevtips.blogspot.com" target="_blank">VK</a>
Example:

FB | Google+ | VK | Twitter | Tumblr

If you cannot share on Facebook or your shared content is outdated try this solution.

Facebook caches your page and so your updates are not refreshed on FB. You should use Open Graph Debugger to fix it:
  1. Go to http://developers.facebook.com/tools/debug
  2. Enter your URL that has the issue
  3. Press Debug button

OG Debugger also provides information how your URL will be parsed by Open Graph engine. 

Read how to share on different social networks