Installing Shareaholic on Blogger / Blogspot

Follow

The following tutorial will help you install Shareaholic on Blogger:

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

 

Step 1: Install Shareaholic on Blogger

In order to install Shareaholic, you'll need to paste your Shareaholic code in two places: in the head of your blog (which initializes the page with Shareaholic engines) and in the post or layout where you want the buttons to appear. These instructions will guide you through installing Shareaholic Setup Code. 

1. Paste your Shareaholic Setup Code into your Blogger site

  • Go to blogger.com and make sure you are logged in to your Blogger account
  • Click Template on the lower left hand column
  • Click the Edit HTML button
  • Use CTRL-F or Command-F and search for: “/head
  • Click the line above the </head> tag, hit Enter to create a new line and paste the Shareaholic Setup Code
  • Click Save Template

 

Step 2: Add Shareaholic to your posts

Now that you have the set-up code installed and verified your site, you can add the Shareaholic Share Buttons and Related Content to your blog. 

Share Buttons

1. Set-up the Share Buttons 

These instructions are for adding the buttons to the TOP of your posts. Instructions for adding buttons to the bottom of your posts are in More Options below.

  • Login to your Shareaholic account and select your site from the My Sites dropdown at the top of the page.
  • On the 'Apps' page, under 'Social Sharing', you'll find the Share Buttons section. Click New In-Page App.

share-add_new.png

  • Give a name to this new Share Buttons location. This is for internal purposes only, so choose a name which makes sense for you. Something like 'Share Buttons - Post Below Content' would be a good name.
  • Edit the look and feel of the app and click Save.
  • Click on the Code tab at the top of the Share Buttons window. This is where you'll find the HTML code for your Share Buttons, which you'll insert into your Blogger template.

share-code_snippet.png

  • Copy this code to your clipboard.

2. Add the Shareaholic button code to your Blogger post page

blogger-template-settings

  • Head back to blogger.com and click Template on the lower left hand column
  • Click the Edit HTML button under your Live on Blog template
  • This time, use CTRL-F or Command-F and search for "post-header" then look for the following line of code: <div class='post-header-line-1'>. Make sure you are clicking inside the HTML template before trying to search, or else you will not be able to find it. Your search bar should look like the one in the screenshot below. This line of code may appear more than once, so make sure you are putting the code in the right location!
  • Note: Depending on your site's theme, you may have multiple "post-header" located in your template. Make sure you are inserting the snippet code after the correct <div class='post-header-line-1'>, or else share buttons will not appear. The correct line should be the one furthest down the template.
blogger-install-code

 

  • Press enter to create a new line and paste the button code, which should look something like:

<div class='shareaholic-canvas' data-app='recommendations' data-app-id='(your id)'></div>

  • Note: if you're unable to see your buttons appear, make sure that there isn't another "post-header-line-1" in your template that you missed. While you should only have to place it once in the last location of the tag, there should not be any ill effects from placing the code below all the post-header-line-1 tags, so don't worry about repeating yourself!
  • Click Save Changes and you're done!

Related Content

1. Set-up Related Content

  • Login to your Shareaholic account and select your site from the My Sites dropdown at the top of the page.
  • On the 'Apps' page, under 'Content Personalization,' you'll find the Related Content section. Click the New in-page App button

RC-add_new.png

  • Give this new app location a name. These names are for internal purposes only, so make sure to pick one that will be helpful for you. Something like 'Post Below Content' would be a good name, for instance.
  • Edit the look and feel of the app and click Save.
  • In the same Related Content window, click on the Code tab at the top of the window. This is where you will find the HTML code to insert into your Blogger HTML template.

RC-code_snippet.png

  • Copy this code to your clipboard.

2. Add the Shareaholic Related Content code to your Blogger post page

  • Head back to blogger.com and click Template on the lower left hand column
  • Click the Edit HTML button under your Live on Blog template
  • Use CTRL-F or Command-F and search for "post header" then look for the following line of code: <div class='post-header-line-1'>
  • Directly beneath that line, hit enter and insert your copied Shareaholic button code, which should look something like:

<div class='shareaholic-canvas' data-app='recommendations' data-app-id='(your id)'></div>

  • Press enter to create a new empty line.
  • Paste the Shareaholic button HTML code into the empty line.
  • Be certain that the Shareaholic <div …> ends with a “/>” when you paste it in.
  • Press the Save Changes button to apply this code to your site and Related Content should appear!

Note: If your Blogger theme provides for a mobile theme, you may find this multiple times. Perform this for each instance!

More Options

Show Shareaholic buttons on the bottom of your post

  • Follow the directions for showing buttons at the top, only instead of searching for the post-header-line-1 div tag, search for Locate the code block that begins with:

    <b:if cond='data:post.hasJumpLink'>

  • Place your cursor at the end of the last line of this block, which will contain: </b:if>
  • Press Enter to create a new empty line.
  • Paste the Shareaholic button HTML code into the empty line.
  • Be certain that the Shareaholic <div …> ends with a “/>” when you paste it in.
  • Press the Save Changes button to apply this code to your site. 

Install the share buttons in different Blogger Layout locations

  • Select Layout from the menu to the left.
  • Determine where you would like the app to appear.
  • Click Add a Gadget in your desired location.
  • In the popup window, scroll down and select HTML/JavaScript.
  • Place your cursor in the Content box of the Configure HTML/JavaScript window.
  • Paste your app's HTML code into the input box.
  • Note: For Share Buttons, if you would like to specify the link to share, see this article.
  • After customizing, press the Save button.
  • Once you have finished adjusting your layout, press the Save arrangement button to apply your changes.

Note: Although Shareaholic is compatible with almost all standard Blogger themes (limited support for Dynamic Views), we cannot guarantee compatibility with custom templates. If you are concerned that your template may not be compatible, try using any of the above methods to install a Share Buttons app for testing purposes. Share Buttons should be immediately visible once the Setup Code and the app's HTML code has been applied to your blog.


Additional Resources:

Using conditional statements (for tweaking app placement)

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