Installing Shareaholic on Blogger / Blogspot

Follow

IN THIS ARTICLE

Summary

The following tutorial will step you through how-to install Shareaholic on Blogger.

Blogspot

We wanted this document to be comprehensive, providing with you with copy/paste code that you can paste right into your Blogger templates. To save you time, this document covers every case we could think of, which is why it is so long, most installations are straightforward and can be completed within 15 minutes!


Install Shareaholic Setup Code (Shareaholic.js)

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

  1. Log into your Blogger.com account
  2. Click Template in the lower left-hand column
  3. Click the Edit HTML button
  4. Use CTRL-F or Command-F and search for the following within the template:
     /head>
  5. Click the line above the </head> tag, hit Enter to create a new line and paste your Shareaholic Setup Code. As a reference, your site's Shareaholic setup code can be found in the Installation tab of your site's Settings on Shareaholic.com, and it looks something like the following (the Site ID in the code will be unique to your site):



  6. Click Save Template

Alternatively, you can also follow these steps:

  1. Within Blogger, click Layout from the left-hand side menu.
  2. Click on any of the Add a Gadget links within the layout.
  3. Choose the HTML/Javascript gadget from the list and type "Shareaholic" for the title.
  4. Paste in the Shareaholic setup code from the Shareaholic.com dashboard into the Content section.
  5. Click Save.

Install Shareaholic Meta Tags

If you would like, you can provide Shareaholic with more information about your content. This is done via Shareaholic Content Meta Tags and used by Shareaholic apps such as Content Analytics, Related Posts, Share Buttons, etc. You can learn more about them here.

  1. Log into your Blogger.com account
  2. Click Template in the lower left-hand column
  3. Click the Edit HTML button
  4. Use CTRL-F or Command-F and search for the following within the template:
     /head
  5. Click the line above the </head> tag, hit Enter to create a new line and paste:
    <!-- Shareaholic Content Tags -->
    <meta expr:content='data:blog.title' name='shareaholic:site_name'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <b:if cond='data:blog.postImageUrl'>
        <meta expr:content='data:blog.postImageUrl' name='shareaholic:image'/>
      </b:if>
    </b:if>
    <b:if cond='data:blog.canonicalUrl'>
      <meta expr:content='data:blog.canonicalUrl' name='shareaholic:url'/>
    </b:if>
    <b:if cond='data:blog.pageType'>
      <meta expr:content='data:blog.pageType' name='shareaholic:keywords'/>
    </b:if>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <meta content='private' name='shareaholic:article_visibility'/>
    </b:if>
    <!-- Shareaholic Content Tags End -->
  6. Next, use CTRL-F or Command-F and search for the second occurrence of the following within the template:
     class='post-header-line-1'
  7. Click the line above it, hit Enter to create a new line and paste:
    <!-- Shareaholic Content Tags -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>	
     <meta expr:content='data:post.timestampISO8601' name='shareaholic:article_published_time' />
     <meta expr:content='data:post.lastUpdatedISO8601' name='shareaholic:article_modified_time' />
     <b:if cond='data:post.author'>
       <meta expr:content='data:post.author' name='shareaholic:article_author_name'/>
     </b:if>
     <b:if cond='data:post.labels'>
       <b:loop values='data:post.labels' var='label'>
        <meta expr:content='data:label.name' name='shareaholic:keywords'/>
       </b:loop>
     </b:if>
    </b:if>
    <!-- Shareaholic Content Tags End -->
    

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 app should be displayed. In-Page Share Buttons, In-Page Related Content and In-Page Follow Buttons are examples of Shareaholic In-Page apps.

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.

A) First, create a new In-Page App instance (for example - Share Buttons, Follow Buttons, Related Content) in your Shareaholic dashboard:

  1. Login to your Shareaholic account and select your site from the My Sites drop-down at the top of the page.
  2. On your 'Apps' dashboard, under 'Social Sharing', you'll find the Share Buttons section. Similarly, you'll find the Related Content and Follow Buttons sections. Click New In-Page App.

    share-add_new.png

    RC-add_new.png

  3. Give a name to this new app location. Choose a name which makes sense for you. Something like 'Post Above Content' would be a good name.
  4. Edit the look and feel of the app and click Save.
  5. In the same window, Click on the Code tab. This is where you'll find the HTML code for your app, which you'll insert into your Blogger template:



    You can also quickly get to the code using this shortcut:




  6. Copy this code to your clipboard.

B) Add the Shareaholic In-Page App code to your Blogger template:

These instructions are for adding a Shareaholic In-Page App to the TOP of your Blogger posts. Instructions for how-to add an app to the bottom of your posts are in the More Placement Options section below.

  1. Head back to blogger.com and click Template on the lower left-hand column
  2. Click the Edit HTML button under your Live on Blog template

    blogger-template-settings

  3. Use CTRL-F or Command-F and search for "post-header" then look for the following line of code:
    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!

    blogger-install-code

    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.
  4. Directly beneath that line, press enter to create a new line.
  5. Paste the app code into the empty line, which should look something like:
     <div class="shareaholic-canvas"
    data-app="share_buttons"
    data-app-id="YOUR IN-PAGE APP ID"
    expr:data-title="data:post.title"
    expr:data-link="data:post.url.canonical" />
    Be certain that the Shareaholic <div …> ends with a “/>” when you paste it in.
  6. Click Save Changes to apply this code to your and you're done!

Notes:

  • If your Blogger theme template has separate code sections for mobile and desktop, you may find this multiple times. Make sure to insert the In-App code for each case!

    If you would like to minimize code repetition, you can use Includes in your Blogger template. Includes are most useful if you have a section of code that you want to re-use in several different places. To do this, write the code content inside a b:includable, then use b:include wherever you want it to appear. For example, define the following Includable just once in your template:

    <b:includable id='shareaholic-related-posts-bottom' var='post'>
      <b:if cond='data:blog.pageType == &quot;item&quot; || data:blog.url != data:blog.homepageUrl '>
         <div class='shareaholic-canvas' data-app='recommendations' data-app-id='YOUR IN-PAGE APP ID' expr:data-link='data:post.url.canonical' expr:data-title='data:post.title'/>
      </b:if>
    </b:includable>
    

    ...and Include it in the template in as many places as you want it to appear:

    <b:include data='post' name='shareaholic-related-posts-bottom' />
    
  • If you're unable to see your app 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!

Additional In-Page App Placement Options

a. Add Shareaholic In-Page Apps to the bottom of all your Posts:

  1. Follow the directions for showing buttons at the top, only instead of searching for the post-header-line-1 <div> tag, locate the code block that begins with:
             <b:if cond='data:post.hasJumpLink'>
  2. Place your cursor at the end of the last line of this Blogger template block, which will contain: </b:if>
  3. Press Enter to create a new empty line.
  4. Paste the Shareaholic In-Page App HTML code snippet into the empty line.
  5. Be certain that the Shareaholic <div …> ends with a “/>” when you paste it in.
  6. Press the Save Changes button to apply this code to your site.

b. Add Shareaholic In-Page Apps to the bottom of your Posts BUT hide them on your homepage:

Follow the directions for adding an In-Page app as listed above, but paste the Shareaholic App HTML code snippet in the following Blogger template block instead:

<b:if cond='data:blog.pageType == &quot;item&quot; || data:blog.url != data:blog.homepageUrl'>
   ... SHAREAHOLIC IN-PAGE APP HTML CODE SNIPPET HERE....
</b:if>

c. Add Shareaholic In-Page Apps in different Blogger layout locations

  1. Select Layout from the menu to the left. 
  2. Determine where you would like the In-Page app to appear.
  3. Click Add a Gadget in your desired location.
  4. In the popup window, scroll down and select HTML/JavaScript.
  5. Place your cursor in the Content box of the Configure HTML/JavaScript window.
  6. Paste the Shareaholic In-Page App HTML code snippet into the input box. Note: For In-Page Share Buttons, if you would like to specify the link that should be shared, see this article.
  7. After customizing, press the Save button.
  8. Once you have finished adjusting your layout, press the Save Arrangement button to apply your changes.

For example, if you want to add a Shareaholic In-Page app to your Sidebar:

  1. You can add In-Page Apps in your sidebar by clicking on Layout and then clicking Add a Gadget in the sidebar area.
  2. Choose the HTML/Javascript gadget from the list and paste your code into the widget.

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 an In-Page Share Button app for testing purposes. Share Buttons should be immediately visible once the Setup Code and the In-Page app's HTML code has been applied to your blog.


Enable Shareaholic on Mobile

  1. Go back to the Template page and click the gear icon underneath Mobile
  2. Click Yes. Show mobile templates on mobile devices. Then click on the dropdown menu under Choose mobile template and select Custom.
  3. Click Save.
  4. Now Shareaholic will show on both your Blogger desktop page and the mobile site. Note: If you have separate blocks in your theme targeting mobile and desktop, make sure to include your In-page Shareaholic App code in both places.

Additional Resources

Using conditionals for tweaking template placements for meta tags and apps:
- http://monkeyraptor.johanpaul.net/2013/06/blogger-conditional-tag-bif-and-belse.html
- https://ultimatebloggerguide.blogspot.com/2016/07/blogger-conditional-tags-for-page-types.html
-
http://mystady.com/2011/05/7-blogger-page-types-analysis-code.html

Meta tags and the blogger template:
- https://gist.github.com/sverrirs/fb25fc3f93414a1025a1
- https://www.compromath.com/html-meta-tags-make-blogger-seo-friendly/

Blogger template design:
http://www.codedodle.com/2014/12/blogger-template-design-from-scratch.html

Was this article helpful?