Installing Shareaholic on Tumblr

Follow

The following tutorial will help you install Shareaholic on Tumblr:

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

1. Sign in to your Tumblr Dashboard.

2. Click Edit Appearance under your Tumblr in the Accounts menu.


tumblr-menu-edit-appearance.png

3. Click the Edit Theme button to bring up the Tumblr theme editor.

4. Click the Edit HTML in the Theme section of the left menu




5. Find the following line: </head>


 6. Place your cursor at the start of this line and press enter to create an empty new line directly above this </head> tag.

7. Paste your Setup Code into the empty line above the </head> tag.

tumblr-paste-setup-code.png

As reference, your Shareaholic Setup Code can be found in the Settings > Installation tab of your Shareaholic Site Dashboard, and it will look something like this:

tumblr-setup-code.png

8. Press the Update Preview button at the top right of the Theme Editor.

9. Click the blue Save button to apply this code to your site.

10. Congrats! Shareaholic should now load on your site! 

balloons.gif

Install the apps on posts and pages

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.

All Tumblr themes are structured differently, so use the instructions below as an example guide to help you in understanding how to position apps in a Tumblr theme. Where you ultimately position your apps is dependent upon your personal preferences as well as the layout of your theme. 

All changes in the below sections are made from the Theme Editor, which can be found by going to Edit Appearance > Edit Theme > Edit HTML, as described in steps 1-4 above.

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 add apps to Text post types

1. From your Theme Editor, use the Search function (ctrl+f or cmd+f) to find the line {Body} in the template. 

tumblr-text-body.png

Depending on your theme, there may be several matches for the {Body} tag. Make sure you select the one that is surrounded by <div class='body-text">

To add apps above your content:

   1. Place your cursor immediately before the {Body} line and press enter to create a new line above.

   2. Paste in your app's HTML code snippet into this empty line:

tumblr-app-above-post.png

To add apps below your content:

1. Place your cursor immediately after the {Body} line and press enter to create a new line below.

2. Paste in your app's HTML code snippet into this empty line below the {Body}:

tumblr-app-below-content.png

3. Click Update Preview. Don't worry if you don't see your apps quite yet!

4. Click Save to apply your changes. You should now be able to see your apps on your Tumblr! 

 

How to add apps to your Quote, Photo, Link & Video posts 

Add apps above your content (Quotes, Photos, Videos, Links):

1. In your Theme Editor, locate the content post type you want to add your Shareaholic Apps to. For example, {block:Link} for Link posts, or {block:Photo} for Photo posts.

2. Once you've found the desired content type block, look for the line div class="post-content" or (<figure class="post-content" for Photos)

tumblr-post-content.png

3. Place your cursor at the end of this line and press enter to create an empty below.

4. Paste in your app's HTML code into this empty line.

tumblr-app-above-post-content.png 

To add apps below your content (Quotes)

1. In your theme editor, locate the code listed for the post type you're looking to add your apps to:

     Quotes: {/block:Source}

     Photos/Videos: {/block:Caption}

     Links: {/block:Description}

2. Place your cursor at the end of this line and press Enter to create a new line below the code.

3. Paste in your app's HTML code into this empty line. 

4. Press Update Preview. Don't worry if you don't see your apps loading yet!

5. Press Save to apply your changes.

 

 

Was this article helpful?