Liferay social bookmarks

It seems very common to connect with social networks in our websites. Liferay provides a tag to connect with facebook, twitter and plusone. It's very convenient to just use one tag.

The interesting thing to make the tag work is we have to use friendly url, otherwise, it doesn't work.

<portlet:renderURL var="socialBookmarkURL">
	<portlet:param name="myaction" value="fullText" />
 	<portlet:param name="friendlyUrl" value="${channelArticle.friendlyUrl}" />
</portlet:renderURL>

<liferay-ui:social-bookmarks displayStyle="horizontal" url="<%= socialBookmarkURL.toString() %>"
   title="<%= socialBookmarkURL.toString() %>" target="_blank"/>

This is how it looks:

If you want to change the order of three, you can specify the types of them.

  <liferay-ui:social-bookmarks types="facebook,twitter,plusone" displayStyle="horizontal" url="<%= socialBookmarkURL.toString() %>"
   title="<%= socialBookmarkURL.toString() %>" target="_blank"/>

You also can extend the social bookmarks by adding to portal-ext.properties file. The limitation of the way is there's no icon for the social network.

social.bookmark.types=blinklist,delicious,digg,furl,newsvine,reddit,technorati

social.bookmark.post.url[blinklist]=http://blinklist.com/index.php?Action=Blink/addblink.php&url=${liferay:social-bookmark:url}&Title=${liferay:social-bookmark:title}
social.bookmark.post.url[delicious]=http://del.icio.us/post?url=${liferay:social-bookmark:url}&title=${liferay:social-bookmark:title}
social.bookmark.post.url[digg]=http://digg.com/submit?phase=2&url=${liferay:social-bookmark:url}
social.bookmark.post.url[furl]=http://furl.net/storeIt.jsp?u=${liferay:social-bookmark:url}&t=${liferay:social-bookmark:title}
social.bookmark.post.url[newsvine]=http://www.newsvine.com/_tools/seed&save?u=${liferay:social-bookmark:url}&h=${liferay:social-bookmark:title}
social.bookmark.post.url[reddit]=http://reddit.com/submit?url=${liferay:social-bookmark:url}&title=${liferay:social-bookmark:title}

If you put those in your portal-ext.properties file, it also show those networks without icons. The order is the order you listed.

The other way of doing that is to write a hook to add any social networks you like, you could also upload your icon.

For example, now I'd like to add Pinit social book mark by using hook.

Step 1: Create a hook named "social-bookmarks-hook"

Step 2: Create folders under WEB-INF, the structure is WEB-INF/html/taglib/ui/social_bookmark. This is because we need to override the Liferay default setting. If you read source code, you can find twitter.jsp, facebook.jsp, plusone.jsp under the same folder.

Step 3: Create pinit.jsp page under the social_bookmark folder.

<%@ include file="/html/taglib/ui/social_bookmark/init.jsp" %>

<a target="_blank" href="http://pinterest.com/pin/create/button/?url=<%= url %>&description=<%= HtmlUtil.escapeAttribute(title) %>">
	<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png">
</a>

If In your jsp, you need to use icon which you specified, you can create a icons folder under social_bookmark like WEB-INF/html/taglib/ui/social_bookmark/icons, then put any pics you want to use inside the folder.

Step 4: Update liferay-hook.html

<hook>
	<portal-properties>portal.properties</portal-properties>
	<custom-jsp-dir>/WEB-INF/</custom-jsp-dir>
</hook>

Step5: Create portal.properties file under docroot/WEB_INF/src folder. The order will be the list order of "social.bookmark.types" property.

social.bookmark.types=facebook,pinit,plusone,twitter
social.bookmark.jsp[pinit]=/html/taglib/ui/social_bookmark/pinit.jsp

One thing is strange to me is that when I undeploy the hook, the portal.properties isn't removed. Need more test on that!