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

Read more...

Whitespaces collapse in Richfaces

It's well known that by default sequence of whitespaces in HTML will collapse to a single whitespace. To fix it it's sufficient to set CSS white-space Property:

white-space:pre-wrap;

But what to do when you use Richafaces (Ajax4jsf) and have set this CSS property correctly but nevertheless whitespaces keep collapsing?

According to RichFaces Developer Guide:

RichFaces uses a filter for a correction of code received on an Ajax request. In case of a "regular" JSF request a browser makes correction independently. In case of Ajax request in order to prevent layout destruction it's needed to use a filter, because a received code could differ from a code validated by a browser and a browser doesn't make any corrections.

Thus Richfaces parser do correct our HTML code, but the parser does not know anything about our CSS and thus here is the cause of the issue.

In Richfaces there are 2 types of parsers:

1. Tidy is the default parser. It is similar to usual browser parsing. It's the slowest one from Richfaces parsers. On my opinion it should be used only with complicated markup
2. Neko is less stricted and so it works faster

So to fix our issue it would be sufficient to change our parser from default (Tidy) to Neko. We should add according filter in web.xml:

<context-param>
   <param-name>org.ajax4jsf.xmlparser.ORDER</param-name>
   <param-value>NEKO</param-value>
</context-param>
<context-param>
   <param-name>org.ajax4jsf.xmlparser.NEKO</param-name>
    <param-value>.*\..*</param-value>
</context-param>

If necessary you can configure filters flexibly for different pages (example)

Read more...