AEM ShareThis Component Tutorial

AEM, Tutorial

The purpose of this tutorial is to create an AEM Component that uses the ShareThis plugin that will allow users to share your content easily. For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

ShareThis is a tool that makes it easy to share your content across many social media websites. ShareThis also allows you to track when your content is shared. This is all accomplished by using their simple to use plugin. You can find more information here:

http://www.sharethis.com/

In order to follow along with this tutorial, you will need an account with ShareThis. The reason you need an account is because they will assign you a publisher id, which you will need in order to use their plugin. If you do not have an account, click on the link above and then sign up for their site. Registering is free and only takes a few seconds.

Now that you have an account with ShareThis, we can get started.

  1. Once you have your local instance of AEM running, navigate to crxde lite. In your project folder, go to the “components” folder, right click and choose “Create Component”. An example is posted below:

Just keep clicking "Next" until the component is created.

2. Open the JSP file that was just created for your component and replace the content with the following code:


3. Next, right click on the component you just created, and choose "Create Dialog". An example is posted below:

4. Navigate to the "tab1" node under the dialog you just created. Right click on the node and choose "Create Node". Enter the following information:
  • Name: items
  • Type: cq:WidgetCollection

5. On the "items" node that you just created, right click and choose "Create Node". Enter the following information:
  • Name: pubID
  • Type: cq:Widget

6. Your dialog node for the component should look similar to this:


7. On the "pubID" node that you created, add the following properties:


8. Now you just need a template to add this component to. If you already have a page that you can add components to, you can skip these next few steps and go to step 13. 

9. In your project folder go to your "components" folder, right click on it and choose "Create Component". An example is posted below:


You can keep clicking next until you have the option to create the component.

10. Open up the "empty.jsp" file that was created and replace all the code inside with the following code:


11. In your project folder, create a "templates" folder if one does not already exist. Right click on this folder and choose "Create Template". An example is posted below:


You will want to update the "Resource Type:" field with the path to the "empty" component you just created. Click next and in the "Allowed Paths" option, add "/content(/.*)?". Then keep clicking next until you have an option to create a template. 

12. Next go to the websites console and choose the option to create a page. Make sure to choose the "Empty Template" from the template options.

13. Now, open the web page and add the ShareThis component to the page. You can do this by switching over to the Classic UI, and then selecting design mode from the sidekick. Next, click on edit the design of your paragraph system, and check the box next to the "Share This Component". Then switch back to edit mode, and add the component to your page.

Now click on the component to go into the dialog and enter your developer ID. Once the page is refreshed, the component will display the ShareThis buttons.

Summary: This tutorial showed you how to create a component that uses the ShareThis plugin, how to add a custom dialog to the component for the publisher ID, and how to add this component to a page.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: GitHub AEM Component