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:
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:
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