Social component makes it simple to display any social media in a responsive way.
<p:panelGrid id="pnlSocial" columns="1" layout="grid" styleClass="ui-noborder">
	<pe:social id="socialMedia"
		style="font-size: #{socialMediaController.fontSize}px"
		onclick="console.log('share ' +this.share + ' url ' + this.url + ' at ' + e.timeStamp);"/>

<p:panelGrid columns="2" layout="grid" styleClass="ui-noborder" style="width:300px;">
   <p:outputLabel value="Show Label:" for="chkLabel" />
   <p:selectBooleanCheckbox id="chkLabel" value="#{socialMediaController.showLabel}">
       <p:ajax update="pnlSocial" process="@this"/>
   <p:outputLabel value="Show Count:" for="cboCount" />
   <p:selectOneMenu id="cboCount" value="#{socialMediaController.showCount}" required="true" style="width:100%">
       <f:selectItems value="#{socialMediaController.countOptions}" />
       <p:ajax update="pnlSocial" process="@this"/>
   <p:outputLabel value="Theme:" for="cboTheme" />
   <p:selectOneMenu id="cboTheme" value="#{socialMediaController.theme}" required="true" style="width:100%">
       <f:selectItems value="#{socialMediaController.themes}" />
       <p:ajax update="pnlSocial" process="@this"/>
   <p:outputLabel value="Font Size:" for="spnFontSize" />
   <p:spinner id="spnFontSize" value="#{socialMediaController.fontSize}" min="8" max="24" required="true">
       <p:ajax update="pnlSocial" process="@this"/>
Components and more
Use Cases
Documentation pe:social
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
widgetVar Name of the client side widget.
shares A string name of the share. Social supports following build-in shares: "email" | "twitter" | "facebook" | "googleplus" | "linkedin" | "pinterest" | "stumbleupon" | "pocket" | "whatsapp" | "viber" | "messenger" | "vkontakte" | "telegram" | "line" | "rss"
theme Theme for the CSS: "classic" | "flat" | "minima" | "plain". Default to "classic"
url A string specifying url to share. Value of window.location.href is used by default.
text A string specifying text to share. The content of meta name="description" or title (if first is missing) is used by default.
shareIn "blank" - share in the new browser tab "popup" - share in the new browser popup window "self" - share in the same browser tab.
showLabel A boolean specifying whether to show the text on the share button. Default is true.
showCount A boolean or "inside" specifying whether and how to show share count. Default is true.
emailTo TO e-mail address for the email share option.
twitterUsername A Twitter username specifying the source of a Tweet.
twitterHashtags A comma-separated list of hashtags to be appended to Tweet text.
pinterestMedia A a url of media to share on Pinterest.
style Style of the main container element. Default value is null.
styleClass Style class of the main container element. Default value is null.
onclick Javascript handler to execute for each social media share that is clicked on.
onmouseenter Javascript handler to execute for each social media share that the mouse hovers over.
onmouseleave Javascript handler to execute for each social media share that the mouse leaves.
PrimeFaces Extensions Showcase - © 2011-2019, PrimeFaces: 7.0, PrimeFaces Extensions: 7.0, JSF: mojarra 2.3.2, Server: jetty/9.4.2.v20170220, Build time: 2019-03-18 20:52