Setting different meta title,description per social network

The only way to get different title,meta responses per social media channel is to have the response set on the backend, in this case when Facebook, Pinterest and Google Plus hit the page check the user agent and display the relevant info, Twitter you can still force the text/image that’s shown, the rest rely on the open graph tags or whatever the title/description is set to. From my experience it’s impossible to set this via plugins like addthis etc.. although it may be possible through some of the API’s it’s easier to check the user agent though.

jstl example

<c:choose>
<c:when test="${fn:contains(header['User-Agent'],'Facebot') || fn:contains(header['User-Agent'],'facebookexternalhit/1.1') || fn:contains(header['User-Agent'],'facebookexternalhit/1.0')}">
<c:if test="${not empty facebookTitle}">
<c:set var="ogTitle" value="${facebookTitle}" />
</c:if>
<c:if test="${not empty facebookDesc}">
<c:set var="ogDescription" value="${facebookDesc}" />
</c:if>
<c:if test="${not empty facebookImage}">
<c:set var="ogImage" value="${facebookImage}" />
</c:if>
</c:when>
<c:when test="${fn:contains(header['User-Agent'],'pinterest/0.1 +http://pinterest.com/')}">
<c:if test="${not empty pinterestTitle}">
<c:set var="ogTitle" value="${pinterestTitle}" />
</c:if>
<c:if test="${not empty pinterestDescription}">
<c:set var="ogDescription" value="${pinterestDescription}" />
</c:if>
<c:if test="${not empty pinterestImage}">
<c:set var="ogImage" value="${pinterestImage}" />
</c:if>
</c:when>
<c:when test="${fn:contains(header['User-Agent'],'Google (+https://developers.google.com/+/web/snippet/)')}">
<c:if test="${not empty gplusTitle}">
<c:set var="ogTitle" value="${gplusTitle}" />
</c:if>
<c:if test="${not empty gplusDesc}">
<c:set var="ogDescription" value="${gplusDesc}" />
</c:if>
<c:if test="${not empty gplusImage}">
<c:set var="ogImage" value="${gplusImage}" />
</c:if>
</c:when>
<c:otherwise>
<!-- use default title value -->
</c:otherwise>
</c:choose>

PHP example

function get_meta()
{
switch (true) {
case stristr($_SERVER['HTTP_USER_AGENT'], 'Facebot') || stristr($_SERVER['HTTP_USER_AGENT'],'facebookexternalhit'):
$title = 'Facebook Title';
$description = 'Facebook Description';
break;
case stristr($_SERVER['HTTP_USER_AGENT'], 'developers.google.com'):
$title = 'Google Title';
$description = 'Google Description';
break;
case stristr($_SERVER['HTTP_USER_AGENT'], 'pinterest'):
$title = 'Pinterest Title';
$description = 'Pinterest Description';
break;
default:
$title = 'Default title';
$description = 'Default Description';
}
}

Frontend Development in CQ5

I’m new to using CQ5 in this instance version 5.5, as a frontend developer I found the software a little confusing at first, mainly in working in a VM development environment like below:

dev

 

As CQ5 is platform independent it can easily be set up on Ubuntu with Apache acting as a reverse proxy to your local content repository allowing you to preview the content through your shared folder. The above can be extended to include https and the author instance.

In short Apache passes any requests to etc/project* to your localhost e.g 8080 which is serving the shared folder and so serves up your local repo.

If you want to find out more about how the repository works in terms of folder structure etc there is some useful documentation here on Adobe’s site.

Once this is set up you can get on with developing again there’s some useful guides

Component Properties and structure

Component best practices

Developing on CQ 5.6

Widget docs

All available Xtype’s

Any starting point should be copying an existing component and playing around with the attributes and settings.

JSP is server side so there’s not really the prospect of trying out your jsp without simply adding it to your component, although I did come across http://zkfiddle.org/ which does work albeit a bit slow.

If you do get an error and your not in the component.jsp you need to undo your changes and then modify/save component.js to clear any cache.

Another niggle is the VM not shutting down properly, something I’m not aware of there being a fix, which gives you a nice blank page when you fire up the author or publisher. The only solution being copying over a new instance of your VM. I did read about the Lucene indexes getting corrupt but these take hours to re-compile so it’s not worth the time unless you where really stuck (there’s a good article here on that http://www.wemblog.com/2011/12/how-to-rebuild-index-in-cq5-wem.html) and that’s if that is indeed the error.

If you have any suggestion for the above please leave a comment.