We begin by adding the tweet button anywhere you wanted the button to appear in the page. 



<pre class="brush: xml">
&lt;a href="http://twitter.com/share" 
 class="twitter-share-button"
 data-count="horizontal"
 data-url="https://kahimyang.com/kauswagan/Storm.xhtml"
 data-via="kahimyang" >Tweet&lt;/a>

</pre>



This is the standand Twitter share button. Please change anchor attributes above to desired values. A follow button should look like below. Line 2 is the 

Twitter account to follow.



<pre class="brush: js">
&lt;a href="https://twitter.com/kahimyang" 
 class="twitter-follow-button" 
 data-show-count="false">Follow @kahimyang&lt;/a>

</pre>


<h4>
Twitter API
</h4>


Twitter recommends that widget.js be loaded asynchronously using following snippet. Please note that loading asynchronously will still work even if you don

't intend to use callbacks.



<pre class="brush:js">
&lt;script type="text/javascript" charset="utf-8">
 window.twttr = (function (d,s,id) {
 var t, js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
 js.src="//platform.twitter.com/widgets.js"; 
 fjs.parentNode.insertBefore(js, fjs);
 return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
 }(document, "script", "twitter-wjs"));
&lt;/script>
</pre>



Bind our tweet/follow event as shown below. 



<pre class="brush: js">
&lt;script type="text/javascript" charset="utf-8">
 twttr.ready(function (twttr) {
 twttr.events.bind('tweet', function(event) {
 tweet_notify ({tweet_url:'https://kahimyang.com/kauswagan/Storm.xhtml'});

 });
 });
&lt/script>
</pre>




Please note that we used "tweet" in line 3 of the above snippet for share buttons. For follow buttons, use "follow" instead of 

"tweet". tweet_notify in line 4 above is our callback function, parameters of which is passed to PrimeFaces as request name and value. You may want to change or add parameters to fit your needs.



<h4>
PrimeFaces
</h4>


Bind our callback function to PrimeFaces' p:remoteCommand using the callback function as attribute name for p:remoteCommand. 

p:remoteCommand receives the call to tweet_notify and then invoke its actionListener.



<pre class="brush: xml">
&lt;p:remoteCommand name="tweet_notify" process="@this"
 actionListener="#{stormBean.handleTwEvent}" />

</pre>


<h4>
Backing Bean
</h4>


And finally the actionListener of the backing bean method of p:remoteCommand. The example below retrieves the parameter tweet_url passed from 

our JavaScript callback function.



<pre class="brush: java">
public void handleTwEvent(ActionEvent ev) {
 HttpServletRequest request = 
 (HttpServletRequest) FacesContext.getCurrentInstance().
 getExternalContext().getRequest();

 String twurl = request.getParameter("tweet_url");
 // do more
}
</pre>


<h4>
Our Code
</h4>


Below is the entire notification code section of a page as used in one of our Twitter share buttons.



<pre class="brush: xml">
&lt;script type="text/javascript" charset="utf-8">
 window.twttr = (function (d,s,id) {
 var t, js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
 js.src="//platform.twitter.com/widgets.js"; 
 fjs.parentNode.insertBefore(js, fjs);
 return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
 }(document, "script", "twitter-wjs"));


 twttr.ready(function (twttr) {
 twttr.events.bind('tweet', function(event) {
 notify_them ({tweet_url:'https://kahimyang.com/kauswagan/Storm.xhtml'});
 });
 });
&lt;/script>

&lt;a href="http://twitter.com/share" class="twitter-share-button"
 data-count="horizontal"
 data-url="https://kahimyang.com/kauswagan/Storm.xhtml"
 data-via="kahimyang" >Tweet&lt;/a>

&lt;p:remoteCommand name="notify_them" process="@this"
 actionListener="#{stormBean.handleTwEvent}" />
</pre>




That's it. Good luck.

How to add tweet callback notification with Twitter Javascript Events in PrimeFaces pages