IN THIS ARTICLE
The following tutorial will help you install Shareaholic on Adobe AEM (Adobe Experience Manager):
Welcome to this comprehensive guide on setting up a Shareaholic profile for your website.
Together, we will walk through each step, making the process a breeze. We'll dive into creating a brand new website profile on Shareaholic. We'll provide clear instructions, ensuring you have a seamless experience throughout the setup.
Once the profile is ready, we'll guide you in copying the configuration code into your AEM project, enabling you to harness the full potential of Shareaholic's features.
Finally, we'll conduct a thorough validation to make sure Shareaholic's functionalities are successfully enabled on your website. You'll have access to exciting features like social media integration and content sharing, enhancing your website's reach and engagement.
So, without further ado, let's embark on this journey together and set up Shareaholic for your website, elevating your online presence to new heights!
When this demonstration was created, we used the latest Adobe WKND Project (3.1.0)
Install Shareaholic Setup Code (Shareaholic.js)
- Sign in to your Shareaholic account.
Let's create a new Site Profile. Click on Add Website / Profile:
Enter your domain here, and click on “Continue to next step”. In this example, we are using a development environment, so we are using localhost:4502, but here, you should place your production website domain into this input field.
- Next, select Adobe AEM, and click "continue to next step".
- Copy and paste the code snippet below into the <HEAD> section of every webpage.
To do this, have a developer open up the project's source-code to paste in the code that you have just copied. As a developer, head into the basepage cq:component, and paste the code within the <head> tag. Now rebuild the code in-local or deploy your code into production.
In this example, we edited https://github.com/adobe/aem-guides-wknd/tree/main/ui.apps/src/main/content/jcr_root/apps/wknd/components/page/head.html. head.html file did not exist and thus we copied the file from AEM WCM Core Components v3.
Congratulations! You have completed the installation of Shareaholic.js
- Once the Shareaholic.js code snippet has been installed, configure the experiences listed under Apps that you'd like enabled on your AEM website.
Once the Shareaholic.js code snippet has been installed, enable the "Floated Share Buttons" experience from your Shareaholic dashboard.
When enabled, you will see social share buttons floating on the side of the screen. Refresh your website, and you should be able to see this experience.
Have a play with the buttons, click on the buttons, and see what this feature offers. Here, clicking on the "link icon", we get this beautiful modal popup with a share link and the QR code:
The “Floated Share Buttons” feature should be enabled for all pages by default. If you wish to only allow specific pages to show the “Floated Share Buttons” experience, take a look at this guide, where it will guide you on how to configure this feature in your Shareaholic dashboard. You can also configure when the buttons should display and hide, such as scroll depth, idle time or exit intent.
- When the code is deployed to production and the website is publicly accessible, you can verify the ownership of your website, by clicking on this Verify button. Once site ownership is verified, features such as analytics will unlock. If you are testing this installation locally on your machine, then you may complete this step later.
How-to install an In-page Shareaholic App
Shareaholic In-page Apps are special apps that let you place them exactly where you want in your website layout or template at the location where the feature should be displayed. In-Page Share Buttons, In-Page Related Content and In-Page Follow Buttons are examples of Shareaholic In-Page apps.
Enabling an In-page App on your AEM website requires a small code block to be installed into your web pages where you want the feature to appear. Shareaholic's dashboard will provide you with the In-page code snippet to install in your AEM environment.
One of the many features of Shareholic's toolkit is the In-page Related Content App. This app enables your web pages to show related pages or products on your website with ease.
In this guide, we will step through what you need to do to enable the Related Content In-page App. We will configure a new Related Content In-page App, copy the code snippet, and insert it into any of your AEM web pages.
- Login to your Shareaholic account and select the Site Profile you are working on from your Sites Dashboard.
- In the Apps section, click New In-Page App for the In-page app you want to add. In our example, we will be installing the Related Content In-page App. Click on “New in-page App” to create a new installable instance of this app. If you already have an instance enabled, follow the blue arrow, and then click on “settings”.
In the next screen, configure Layout settings. After you're done, click on “Next Step” to continue.
Configuration Description Name This is the configuration name of this In-page Related Content instance. It is used for your own organization. Headline The headline title to display at the top of the Related Content instance. example: "You may also like" Theme Choose from various layouts and designs for displaying Related Content. Max Posts Limit of how many posts will be visible when rendered on the page.
In the next section, you will see an user interface with quite a few options - Targeting Rules, Content Pool, Algorithm, etc. To keep this tutorial simple, we will directly click on the “Code” tab to access the code snippet.
Next, click on “copy” to copy the code snippet. This is the code snippet that you need to place in your AEM web pages where you want this experience to appear.
To place custom HTML code in any section of our AEM webpage, we recommend the out-of-the-box solution that AEM provides - Embed Component.
If your AEM website does not have support for the “Embed Component”, we recommend requesting this component to be “allowed” in templates, so you can drag and drop this component on the page. This is highly recommended for inserting custom HTML code into your web pages.
- As a content producer, head to any web page that is editable. Assuming that you have the “Embed” Component enabled, now let’s continue; if not, please contact your developers to enable this component. In the Components library, use the filter and search for “embed”.
- You should be able to find the embed component as a search result.
- Drag and drop this component into the page.
Configure the “Embed” Component
Once you have dragged the “Embed” Component into the page, you will need to configure it.
- Double-click on the “Embed” component's placeholder. The Embed UI dialog modal will appear.
- Click on the HTML option.
- Paste the In-page code snippet that was copied earlier.
- Once the code snippet is pasted into the input field, save.
- Now publish the page.
Review and Tweak
Now visit the web page that you have added the “Embed” Component to, and review the Related Content In-page App; it works! By default if there were no customizations made, the rendering of the Related Content In-page App should render as expected. Tip: Tweak and configure the Related Content In-page App to enhance the user experience.
- You have now successfully installed the Related Content In-page App.