Socialize Me: How to add Facebook Like, Twitter, and Google +1 Buttons to IBM Connections

Thursday, June 9, 2011

How to add Facebook Like, Twitter, and Google +1 Buttons to IBM Connections

Last week I shared instructions on how to add the Google +1 button to Blogger. When I tweeted about it, I noticed that I had never shared instructions on how to add the Facebook Like, Twitter and Google +1 buttons to IBM Connections.

Once you follow the instructions below, you'll see the Twitter, Google, and Facebook buttons show up in the header as shown below. Of course, there are other places to put it in; this is just where I placed them. And once you do this, the users will have a very easy way to share a blog, wiki, discussion topic, etc with their favorite social network.

Here are the instructions on how to get started:

If you haven't yet, copy footer.jsp to the customization directory. For example, copy <WAS_PROFILE_ROOT>/installedApps</cellName>/Activities.ear/oawebui.war/nav/templates/footer.jsp to <IC_INSTALL_ROOT>/data/shared/customization/common/nav/templates
If you haven't yet, copy header.jsp to the customization directory. For example, copy <WAS_PROFILE_ROOT>/installedApps</cellName>/Activities.ear/oawebui.war/nav/templates/header.jsp to <IC_INSTALL_ROOT>/data/shared/customization/common/nav/templates
Switch to the <IC_INSTALL_ROOT>/data/shared/customization/common/nav/templates directory
Open header.jsp with your favorite text editor

At the very end of the file, look for the last </div>. Just before that, add the following code:

<div style="float: right;">
 <div style="float: left; clear: none; padding: 5px; padding-left: 5.5px; padding-right: 5.5px;">
  <a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="lbenitez">Tweet</a>
 </div>
 <div style="float: left; clear: none; padding: 5px; padding-left: 5.5px; padding-right: 5.5px;">
  <g:plusone></g:plusone>
 </div>
 <div style="float: left; clear: none; padding: 5px; padding-left: 5.5px; padding-right: 5.5px;">
  <iframe src="http://www.facebook.com/plugins/like.php?app_id=166725596724792&amp;href=
<%=request.getRequestURL()%>&amp;send=false&amp;layout=button_count&amp;width=75
&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21"
 scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:75px; height:21px;" allowTransparency="true"></iframe>
 </div>
</div>

Save and close the file
Open footer.jsp with your favorite text editor (Note: this is the same place where you would add the Google Analytics code or Coremetrics or any other web analytics tool you are using)

Scroll to the very bottom of the file and add the following lines:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Save and close the file

Enjoy!

Note: The Twitter button doesn't work over when using SSL (https) as mentioned in Twitter's FAQ. Therefore, if you have configured Connections to work over SSL you may want to get rid of the Twitter code and just leave the Facebook and Google buttons.

Note 2: The Facebook and Google buttons require that the URL that's being shared is accessible externally. Therefore, this code won't work in an internal version of Connections; only for those accessible externally.