How-to install a Shareaholic In-page 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 app should be displayed.

• In-page Share Buttons
• In-page Follow Buttons
• In-page Related Content / Recommendations
• In-page Share Count Display

If you have not already signed up for Shareaholic, go through the Getting Started with Shareaholic Guide before following the instructions below.

To install a Shareaholic In-page App:

1. Login to your Shareaholic account and select a Site Profile from your Sites Dashboard
2. Next, in the Apps section, Click New In-Page App for the In-page app you want to add.
   

   

3. Give the In-page App a name, like "Homepage" or "Sidebar" to easily distinguish each of your In-page Apps. This name is only used for your own organization, so choose a name which makes sense to you. For example, both "Top of Page Share Buttons" or "Top" would be fine In-Page App names:
   
4. Customize the look and feel of the in-page app and click Save.
   
   Read more about customizing the Related Content In-page App and the Share Button In-page App.
5. Click on the Code tab at the top of the In-page App window. Each In-page App has its own HTML code snippet that loads the app where you position it on a page or in your template.
   
   Copy and paste the code snippet into your website layout or template. As a reference, an In-Page app snippet would look something like this:
   
   

   TIP For instructions on how to install the Shareaholic In-app HTML code snippet on various platforms, check our growing list of setup guides. If needed, you can also customize parameters passed into your In-page apps, such as title and URL, details here.

6. Congratulations! You're all done.
   
   

Optionally use JavaScript to insert In-Page App HTML code snippet:

Suppose you need to insert an In-Page app into a pre-existing section and do not have access to edit the template itself but can add JavaScript. In that case, you can use JavaScript to insert the HTML code snippet needed to render the Shareaholic experience.

For example, to add the following dynamically:

<div class="shareaholic-canvas" data-app="share_buttons" data-app-id="1234567890"></div>

Add the following JavaScript:

<script>
document.addEventListener('DOMContentLoaded', function () {
  var shr_buttons = document.createElement('div');
  shr_buttons.className = "shareaholic-canvas";
  shr_buttons.setAttribute("data-app", "share_buttons");
  shr_buttons.setAttribute("data-app-id", "1234567890");
  
  // The following looks for the DOM element with class "share-widget" and clears its contents
  // and then appends the HTML code snippet.
  document.getElementsByClassName('share-widget')[0].innerHTML = "";  // Clear 
  document.getElementsByClassName('share-widget')[0].appendChild(shr_buttons);  // Append
})
</script>