Installing Shareaholic on Weebly

Follow

This article will walk you through how to install and set up Shareaholic on your Weebly site. It covers how to install the setup code, add in-page apps to select content and posts on your site, as well as how to add in-page apps to all pages by inserting them into your template.

If you haven't already signed up for Shareaholic, check out the Getting Started with Shareaholic guide before following the below instructions. 

Adding the Setup Code to Your Site

Note: In order to include any of Shareaholic's apps or content on your site, you must follow the instructions in this section first.

Make sure you have added your Weebly site to your Shareaholic.com account. The instructions on how to do this are listed in the Getting Started guide linked above.

Then, copy the Shareaholic setup code for your Weebly site. It can be found in under the Installation tab in your Site Settings. 

html-setup_code.png

  

On your Weebly Editor, select Settings from the options on the top bar.

 

Then, select SEO from the menu on the left.

In the section that says Header Code (below Footer Code), paste your Shareaholic Setup Code.

Press the green Save button in the lower right part of the window.

In order for these changes to take effect, you must then publish your site using the blue Publish button in the top menu bar.

To make sure the installation worked correctly, you can visit your site and check to see if the Floated Share Buttons appear on the lefthand side of the screen (assuming you haven't disabled them in your Shareaholic.com settings).

For information on how to configure Floated Share Button settings or enable/disable any of the default apps, please check out these articles:

 

How to Add Apps to a Specific Page

If you wish to use one of our apps on your pages, like our Share Button app or Related Content app, you'll need to follow these steps.

Click on Build from the top bar of your Weebly editor.

Then click and hold down on the Embed Code square located in the sidebar.

Drag and drop the square onto the location of the page where you wish to have the app appear.

weebly-add-apps-build-embed-code-square-drag.png

Click inside this new box where it says 'Click to set custom HTML', and then select Edit Custom HTML from the window that pops up.

Then, from your Shareaholic.com dashboard, get the Code Snippet for the app you want to insert...

...and paste this code directly into the Embed Code box on your Weebly site.

Then click somewhere else on the page to get out of this Embed Code window.

Note: After you have pasted the code, you will not see anything on your Weebly Editor page view. This is normal.

To save your changes and see them on your site, hit the blue Publish button in the top bar.

 

How to Add Apps to a Specific Post

If you blog on your Weebly site, you can add apps to a specific blog post. The steps are largely the same as the ones listed above, but from within the Blog section of your Pages.

First, click on Pages from the top bar in your Weebly Editor.

 

Then, select Blog from the Pages sidebar on the right.

 

Click on the post you are looking to edit to open it in the post editor.  Then click and hold the Embed Code button located in the right toolbar.

Drag and drop the Embed Code square onto the desired location in the post.

Click inside this new element, where it says "Click to set Custom HTML," and then choose Edit Custom HTML from the box that appears.

 

Then, copy the code snippet for the app from your Shareaholic.com account...

...And paste it into the edit box on your Weebly page.

Note: You will not see anything after you've pasted this code into the box, nor will you ever see the Shareaholic Share Buttons on your posts in the edit view.

In order to see your changes, hit the orange Update button in the top right of the your Weebly editor window.

How to Add Apps to All Content

To have an app appear on every blog post you make, we'll need to edit your theme template. 

Open the Theme editor from the top bar in your Weebly editor.

After you've settled on which theme you'd like to use and made any adjustments, press the Edit HTML/CSS button at the bottom of the Theme options panel.

Please note: The following instructions may vary somewhat depending on which theme you are using, so if your file structure does not look exactly like the ones in the example image below, don't be overly concerned. See if you can find a template for a single blog post in a similar location. If you need assistance finding the right file or configuring Shareaholic for your template, please contact us at support@shareaholic.com and we'll be happy to help you out!

In the file structure on the right, go to Partials > Blog > post.tpl

Note: Some templates include their own share buttons. If you wish to remove these, see if you can find a line that looks something like {{social_media_shares}} and delete it. If you need help, please contact support@shareaholic.com.

To insert your app below each post, paste your code in the location seen in the image here, below the <div class="blog-content"> tag and the {{body_html}} line:

To insert the app above each post, find the <div class="blog-header"> tag and insert your code at immediately before its closing </div> tag.

Note: This will make the buttons appear below the blog title. To have them appear above the blog title, insert the code snippet immediately after the <div class="blog-header"> opening tag.

Click the blue Save button in the upper righthand corner of your editor. If you are prompted to name your template, go ahead and do so.

To see your changes appear on your site, click the orange Publish button on the main Weebly Editor.

    

 

Have more questions? Submit a request
Was this article helpful?
Powered by Zendesk