In a recent exercise to put a Social Sharing toolbar on the Jive Community, I constructed some code that I felt would be useful to Community Managers and UI Designers alike, so thought I'd share.

 

Problem:

Needed to include a Social Sharing toolbar in the Community, but wanted to do this with for only "public facing content".

 

Solution:

Leverage Jive Themes, FreeMarker, and System Properties.

 

Step 1 : Determine if content is Public

Because Jive supports a number of containers, some of which are not public, it is difficult to just drop in a Social Share Toolbar blindly.  What happens if someone is in a restricted area, and they accidentally share out the file or the location?  Needless to say this would be sad.   So let's look at some FTL code you can use in Jive 5 to determine if the impression someone is viewing is "Public":

 

<#-- DETERMINES IF IMPRESSION IS PUBLIC AND RELEVANT FOR SHARING/SEARCH -->
<#assign metaPublicContent = (page.getProperty("meta.public")!"false")?matches("true") />
<#if (!metaPublicContent && ((!edit??) || (document?? && !document.documentBeingEdited)))>
    <#if (container??)>
        <#if (container.objectType == JiveConstants.COMMUNITY)>
            <#if (container.ID == 1 && pageURL?? && pageURL == "/welcome")>
                <#assign metaPublicContent=true />
            <#elseif (container.ID > 1)>
                <#assign metaPublicContent=JiveContainerPermHelper.isOpenContainer(container) />
            </#if>
        <#elseif ((container.objectType == JiveConstants.SYSTEM_CONTAINER) || (container.objectType == JiveConstants.USER_CONTAINER))> <#-- PERSONAL & SYSTEM BLOG -->
            <#assign metaPublicContent=true />
        <#else>
            <#assign metaPublicContent=JiveContainerPermHelper.isOpenContainer(container) />
        </#if>
    <#elseif (targetUser??)> <#-- USER PROFILE -->
        <#assign metaPublicContent=true />
    </#if>
</#if>
<meta name="public" content="${metaPublicContent?string}">



 

In the above, code here are some talking points:

  • Line #2  - It checks for a property (that I defined, can be anything) to see if the page has already been defined as public.  If not, the it defaults to false.
    • Note: To set this, simply add a <meta name="public" content="true" /> tag in HEAD section of the FTL you want to explicitly mark as public.
  • Line #3 - Short circuits the condition checks if override is true, or if it determines we are on n Create/Edit page
  • Line #6 - Normally, we want to ignore the Root container for pages like Actions, Activity, and Communications.  But we do want this on the Home Page!
  • Line #11 - Because blogs are Containers, but are "special" they need to broken out evaluated for System/Personal blogs when they are not bound to a Space/Group/Project
  • Line #14 - Catch all evaluation that uses the EntitlementProvider to check ANONYMOUS access to the container.  This works for Space, Social Groups (Open + Members Only), and Projects.
  • Line #16 - (optional) allow for User Profiles to be Shared, makes sense.
  • Line #20 - Having done all this calculation, it would be shame if we didn't do something with it.  We already have a server-side marker we can use, so how about create a client-side one.  So I simply put the value into a META tag for easy lookup in JavaScript.  Another side benefit, is that if you are using a search crawler...this META tag can be used as a marker (in most platforms) to treat this content differently in the index than other content indexed on the site.  Very useful information!

 

So we've figured out how to determine if content is public, now ...

 

Step 2 : Find a FreeMarker Template to house the code

If you've ever had a conversation with me about running a successful Jive platform,

Rule #1:  Minimize the number of FreeMarker templates you customize in themes.

While easy, they can add up really fast and become a nasty overhead when trying to upgrade.  That being said, I want to emphasize the word minimize, not eliminate.

My philosophy: If you have to do something you dont like, you might as well get the most value possible in return.

 

As such, to make this solution, possible I owned two different FTLs:

  • /template/decorator/default/header-meta.ftl
  • /template/decorator/default/template.ftl.

 

Owning these templates is usually a good thing, because they are relatively straight forward, which means that they tend to be easier to merge.  Also,  you get a lot of mileage out of the /template/decorator/default/*.ftl because they are included on almost every page, which gives you lots of reach with minimal ownership.

 

Instructions: By taking the code in from Step 1, I simply pasted it to the end of header-meta.ftl and saved.  Step 2,  Done!

 

Step 3 : Adding the Social Share Bar

In order to make the Social Share Bar work (in this case, we used ShareThis), we needed to put code with-in both the <HEAD> and <BODY> tags.  To do this, we leveraged the template.ftl (referenced above).  What's nice about this FTL, is that it is the glue that brings everything together.  As such, when we can see the call that includes the header-meta.ftl near the very top, which also means that the metaPublicContent variable we set (server-side FTL) is accessible now in this template.  So that means we simply add some small customizations to it, like this:

<#if (metaPublicContent?? && metaPublicContent)>

    ${JiveGlobals.getJiveProperty('socialShare.head.close.snippet')!''}

</#if>

</head>

and

<#if (metaPublicContent?? && metaPublicContent)>

    ${JiveGlobals.getJiveProperty('socialShare.body.close.snippet')!''}

</#if>

</body>


Note: I used the </head> and </body> tags as points of reference in the template.ftl.  Lines 1-4 are the customizations.


Step 4 : Add Social Share HTML Snippets to System Properties

Final step, which is simple.  Use the System Property editor in the Admin Console, and define some HTML for socialShare.head.close.snippet and socialShare.body.close.snippet.

 

That's it!  Your snippets should now be showing up on your page, and you can tweak the actual HTML at any time through the System Property interface.

 

I hope this article has been helpful and informative! =) You can use this "pattern" to add more than just Social Share functionality.  Any HTML Snippet that you want to exist across the site for public content (or all content) can be instrumented using a similar pattern.  I would urge you to make a separate property per use-case, just to be safe.  Let me know what you think, and if you have a solution you'd like to share ... let me know and I can give you access rights to blog here!