AEM Assets Twitter Integration
The business use case
An organization creates assets using various tools like Photoshop and then syncs/uploads them into AEM. The organization wants a user friendly way to directly post these assets on its Twitter account, from AEM Assets, and manage the status of the posted tweets via likes and impressions of the tweet. This increases the reusability of the assets (hosted in AEM) on its website as well as Twitter account.
The solution
The technical implementation of the solution for this is divided into three parts:
- Customize AEM Assets to provide a custom button that provides a dialog to enter status and relevant tags for the post to be submitted to Twitter.
- Create a custom workflow that posts the asset on Twitter after approval by an author. This workflow will be auto-triggered on post submission (as done in step 1).
- Create a custom scheduler that fetches the number of likes and impressions of all the AEM assets posted on Twitter and then saves the information in the asset metadata.
Prerequisites:
Create your Twitter app on theTwitter Developers site and make a note of your OAuth Settings that will be needed for authentication.
The following values will be required to authenticate connection to the Twitter API from AEM — consumerKey , consumerSecret, accessToken, accessTokenSecret
Reference Link : https://developer.twitter.com/en/docs/basics/apps/overview
Implementation Steps:
(Note : This article explains two types of assets — a) Images and b) Content Fragment).
For Content Fragment, create a Content Fragment Model that allows authoring of the image, text status, and tags of the Post.
Create a custom button called “ Post to Twitter” in AEM Assets that will be available on selection of an asset.
Image Assets :
How to create a “Post To Twitter” button:
[This overlay feature implementation is referenced from OOTB “Download Asset” option in AEM].
a) Overlay node :
/libs/dam/gui/content/assets/jcr:content/actions/selection to path /apps/dam/gui/content/assets/jcr:content/actions/selection
b) Create a node “ posttotwitter” at path /apps/dam/gui/content/assets/jcr:content/actions/selection/posttotwitter with following properties:
Create a dialog to be opened with the click of the “Post to Twitter” button.
Note : This dialog will be required only in for Image assets to add status text and tags for tweet. For CF , the dialog will not be opened up and Workflow will be triggered automatically i.e Step 3.
The dialog provides the following options:
a) Enter a Twitter status text
b) Select Tags / Smart Tags tagged to the asset to be posted. These tags shall be used #HashTags in Twitter status as drop down.
Creation of Dialog:
i) Create a child node named “ granite:data” at /apps/dam/gui/content/assets/jcr:content/actions/selection/posttotwitter (created in Step 1.b) with following properties.
The “href” property is used to point to the path which defines the dialog to be opened on “Post to Twitter” button click.
ii) Create a custom dialog posttwitterdialog as shown below at the path provided in the “href” property.
The sling:resourceType of the posttwitterdialog node (as shown in above image) refers to a jsp that includes dialog.jsp (refer to the code snapshot below).
The dialog comprises of :
- Textbox Field : This enables user to enter status.
- Select Field : This is populated dynamically using the datasource JSP. The datasource jsp returns the tags associated with the selected asset in dropdown allowing user to select hashtags for the status from the asset tags.
Create a workflow as shown below:
This workflow needs to be triggered programmatically on posttwitterdialog submit (call a servlet on button click and use WorkflowManager class to trigger workflow).
Once the workflow is triggered, the approver will be notified of the approval request in their inbox.
Once approved, the custom Workflow process step [“Approve Request”] code will call Twitter API or connect to twitter using twitter4j java library to post the asset as a tweet.
Sample Code To Call Twitter API using Twitter4J Lib
Once approved, the status will be updated on Twitter:
On successful posting of the asset, a tweet id (returned by Twitter API) and asset status text will be saved in the asset metadata. This tweet id can be shown in asset properties in custom Metadata Tab.
Create a custom scheduler to find all the assets in AEM (using QueryBuilder), which contains tweet Id in metadata. Now call the Twitter API to get updated metrics (Likes/Impressions) using tweet Id for all such assets and update these metrics in the asset metadata. You can find the API here: https://api.twitter.com/labs/1/tweets/metrics/private?ids=twitterid
Note : There are multiple ways in which these tweet metrics can be used. This article shows them in the asset metadata.
Tweet Metrics Saved in Asset Metadata.
Some possible extensions to the above implementation :
- In the article we talked mainly about Images/CF but this can be extended for other asset types like video.
- Provide authors a configurable way to set the scheduler frequency to get updated metrics and provide an on demand feature to get updated metrics.
- Refer to https://developer.twitter.com/en for available Twitter APIs to consume based on use case.
This article shows how easy it is to post image and content fragment assets to a social media platform like Twitter using Oauth connections from within AEM, the same approach can be used for other social platforms alike. This in turn makes AEM a social media publishing platform from where a client can post to all its social accounts from under one roof :-)
Originally published at https://blog.developer.adobe.com on July 15, 2020.
