Article summary

Summary
This article has been updated from the Twitter 1.0 API which has been deprecated to use Twitter widget code. This article discusses how to obtain Twitter widget code and how to use it within an Adobe Experience Manager component.
Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
JavaScript, JQuery, CSS
Tested On Adobe Experience Manager 5.5, 5.6

Introduction

You can create a custom Adobe Experience Manager data feed component that retrieves external data and displays the data within a web page. For example, an Experience Manager component can retrieve data from an RSS feed to let your users view current forum data. Likewise, an Experience Manager component can retrieve data from a social site like Twitter to keep your users updated with the latest social data, as shown here.

Intro

This development article walks you through how to build a custom Experience Manager twitter feed component and add it to the Experience Manager sidekick.

sidekick

Once added to the sidekick, an author can drag and drop it onto an Experience Manager page during design time. You create a Twitter feed component by integrating the Twitter API into Experience Manager(shown in this development article).

Note:

This development article discusses how to integrate the Twitter API to create a component that displays Twitter feed data. You can integrate with other third party APIs such as Google Maps. For information, see Integrating custom Experience Manager widgets with third-party libraries.

Create an Experience Manager application folder structure

Your first step is to create an application folder structure that contains templates, components, and pages by using CRXDE Lite.

CQAppSetup

This list describes each application folder:

  • Application name: Contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: Contains components that your application uses.
  • page: Contains page components. A page component is a script such as a JSP file.
  • global: Contains global components that your application uses (common may be a substitute for global).
  • templates: Contains templates that you can base page components on.
  • src: Contains source code that comprises an OSGi component (this example does not use an OSGi component).
  • install: Contains a compiled OSGi bundles container.

To create an Experience Manager application folder structure:

  1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu). 
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter twitterFeed
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.

Create a template

You can create a template by using CRXDE Lite. A template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateTwitter. 
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter twitterFeed/components/page/templateTwitter.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create a Render component based on the template

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as an Experience Manager developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite (if you are using AEM 5.6, click Tools from the left menu).

3. Right-click /apps/twitterFeed/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateTwitter
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateTwitter.jsp located at: /apps/twitterFeed/components/page/templateTwitter/templateTwitter.jsp.

8. Enter the following JSP code. 

<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<html>
<head>
<title>AEM Twitter Feed Page</title>
</head>
<body>
<h2>This page displays twitter feeds</h2>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

This line of code:

<cq:include path="par" resourceType="foundation/components/parsys" />

enables the use of the Experience Manager paragraph system. An author is able to drag and drop components from the sidekick to the web page. Later in this development article, you drag and drop the Twitter feed component onto a page based on this render component. 

This line of code:

<cq:include script="/libs/wcm/core/components/init/init.jsp"/>

displays the sidekick in the page during design time. 

Get the Twitter widget code to use in your AEM application

To successfully embed an Experience Manager widget that displays Twitter data into your AEM application, first you must get the Twitter widget code from Twitter. The Twitter widget code is simply JavaScript code that you can embed into an Experience Manage component. The following JavaScript code represents Twitter widget code.  

<a class="twitter-timeline" href="https://twitter.com/smac2020" data-widget-id="359395392489652226">Tweets by @smac2020</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 

To get Twitter widget code, perform these steps:

  1. Go to www.twitter.com and login to the account on which to base your component.
  2. Go to your settings page.
  3. Go to "Widgets" on the left hand side.
  4. Click the "Create New" button.  
  5. Feel free to check "exclude replies" if you do not want replies in results.
  6. Click the "Create widget" button.
  7. On the right hand side, notice that there is a Preview of your twitter component. Next notice that there is JavaScript code under the Preview section (see the illustration following these steps).
  8. Copy the JavaScript code. This will be copied into a component later in this development article.

Note:

Replace the Twitter widget code located in this article with your own Twitter widget code.

The following illustration shows the Twitter widget panel and the JavaScript code that you need to copy and paste into an Experience Manager component.
 

Widget

Create a site that contains a page that displays Twitter data

The final task is to create an Experience Manager site that lets an author drag the Twitter feed component onto a page during design time, as shown in the following illustration.

 

Twitter2

Create the Twitter feed component

Earlier in this article, you created the render page component on which an author can drag and drop the Twitter feed component. In this section, you create the Twitter component and add it to the sidekick. To create the Twitter feed component, perform these tasks:

1. Right-click /apps/twitterFeed/component, then select New, Component.

2. Enter the following values:

  • Label: Twitter
  • Title: Twitter
  • Description: Twitter Component
  • Super Resource Type: foundation/components/parbase
  • Group: General (this adds the Twitter feed component to the General category in the sidekick)
  • Allowed Parents: */*parsys
3. Open the Twitter.jsp located at: /apps/twitterFeed/components/page/Twitter/Twitter.jsp.

4. Enter the following JSP code. Notice that Twitter widget JavaScript code is included in this component (the Twitter widget code is located right after the body tag).  Replace this code with the Twitter widget code that you obtained from Twitter.  
<%@include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="twittersample" />
<!DOCTYPE html>
    <html>
        <head>
            <title>AEM Twitter Feed Widget</title>
        </head>
<body>
 
   <a class="twitter-timeline" href="https://twitter.com/smac2020" data-widget-id="359395392489652226">Tweets by @smac2020</a>
   <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
 
</body>
</html>

5. Right-click the Twitter component and select New, Dialog. The
Dialog wizard creates the initial structure for the component dialog box.

6. Define the following properties on the items parent of the tab1 node.
Add this property that defines the widget reference:

  • Name: xtype
  • Type: String
  • Value: = cqinclude

Add the property that defines the path to the reference:

  • Name: path
  • Type: String
  • Value: /libs/foundation/components/image/dialog/items.infinity.json

Note:

Delete the tab1 node. 

Test the Twitter component

Create a site that contains a page that is based on the templateTwitter (the template created earlier in this development article). You will be able to drag and drop the Twitter component from the sidekick to the page.

 

Widget2

Create a web page that lets you test the Twitter component:

  1. Go to the welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Websites. (If you are using AEM 5.6, click Tools from the menu on the left.)
  3. From the left hand pane, select Websites.
  4. Select New Page.
  5. Specify the title of the page in the Title field.
  6. Specify the name of the page in the Name field.
  7. Select templateTwitter from the template list that appears. This value represents the template that is created in this development article. If you do not see it, then repeat the steps in this development article. For example, if you made a typing mistake when entering in path information, the template will not show up in the New Page dialog box.
  8. Open the new page that you created by double-clicking it in the right pane. The new page opens in a web browser. You will see the sidekick and the Twitter component under the General category. You can drag and drop the Twitter feed component onto the page. 

Note:

If the sidekick is empty, you can populate it by clicking the Design button located at the bottom of the sidekick. Next click the Edit button that appears and select General from the list of categories that appear. To view the full sidekick with the General category, click the down arrow icon that appears on the sidekick. 

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy