Google +1 and Wicket Ajax Components

I wanted to incorporate the google +1 buttons for submitted links on a social bookmarking website I was building, which uses Wicket. Adding +1 buttons was easy.

The html tag:

<g:plusone wicket:id="plusone"></g:plusone>

Adding a dynamic href attribute to the tag was made simple using the AttributeModifier class:

Label plusone = new Label("plusone");
plusone.add(new AttributeModifier("href", true, new Model(submittedLink.getUrl())));
.

The rendered html tag, as sent to the browser will be:

<g:plusone wicket:id="plusone" href="http://www.exampleurl.com"></g:plusone>

with it's final form as a <div> tag with lot's of content.

However, the +1 buttons does not show after Wicket's Ajax calls, for example when clicking on a AjaxFallbackLink to refresh the section containing the button. I am guessing that the <g:plusone> tag is rendered to the final button form only initially when the page is first requested/loaded.

You can however fire up the JavaScript to manually render the tag using gapi.plusone.go(). Thus, overriding the Wicket Ajax component's onAjaxEvent will do the trick.

@Override
protected void onAjaxEvent(AjaxRequestTarget target) {
   target.appendJavascript("gapi.plusone.go()");
   super.onAjaxEvent(target);
}