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.
Installing Shareaholic on Weebly
- Make sure you have added your Weebly site to your Shareaholic.com account. The instructions on how to do this are in the Getting Started guide linked above.
- Login to your Weebly account
- Locate the site you want to add Shareaholic to
- Click Edit Site
- In 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.
Your Shareaholic Setup Code can be found in under the Installation tab in your Shareaholic Site Settings -
- Press the green Save button in the lower right part of the window.
- In order for these changes to take effect, you must then pPublish your site using the blue Publish button in the top menu bar.
- To make sure the installation worked correctly, visit your site and check to see if the Floated Share Buttons appear on the left-hand side of the screen (assuming you haven't disabled them in your Shareaholic settings).
- Congrats! Shareaholic should now load successfully on your website!
For information on how to configure Floated Share Button settings or enable/disable any of the default apps, please check out these articles:
- Floated Share Buttons: How to Enable/Disable
- Floated Share Buttons: How to Adjust the Positioning
- Floated Share Buttons: How to Customize Colors
- Monetization Apps and How to Configure
How-to install a Shareaholic In-page App:
Shareaholic In-page Apps, like In-Page Share Buttons and In-Page Related Content, 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 using code.
If you have not created an In-page Shareaholic App, check out the Installing an In-page Shareaholic App Guide before following the instructions below.
How-to install a Shareaholic In-page App on a specific Weebly page:
- 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.
- 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.
- From your Shareaholic.com dashboard, get the Code Snippet for the app you want to insert...
For instructions on how to set up the Share Button and Related Content, as well as where to find the Code Snippets, check out Installing an In-Page Shareaholic App.
...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 install a Shareaholic In-page App in a blog post:
If you blog on your Weebly site, you can add In-Page 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...For instructions on how to set up the Share Button and Related Content, as well as where to find the Code Snippets, check out Installing an In-Page Shareaholic App.
...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 install a Shareaholic In-page App on all blog pages:
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.
- In the file structure on the right, go to Partials > Blog > post.tpl
Please note: These 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 and we'll be happy to help you out!
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 right hand 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.