tumblr-related-posts

Include related posts in your tumblr blog posts via keyword comparison

TUMBLR RELATED POSTS WIDGET

- USE THIS TO SHOW TUMBLR POSTS THAT RELATE TO POSTS YOU ARE VIEWING

30 MILLION+ USER HITS AND COUNTING!

  • Please hit the +1 button if you like what you see!

Version 6 now available!

Improvements made include: * Includes control over the padding and margins - see setup instructions below * Removes the conflict some users were having with other javascript widgets they were using * Removal of several bugs * CSS compressed to half the size - (Use minimal_v2_min.css) Scroll down to Section 2 and Section 5 for the setup changes - there aren't many.

Overview

This widget allows you to display related posts you have written within your Tumblr site theme. It makes relational posts a snap to use and encourages your users to read more and stay longer! Use just one line of javascript, added to your tumblr site template to dynamically insert related posts you have written into each post. Posts are retrieved by the script based on the tag words you have used. This will only work effectively if you've tagged your posts appropriately! Customise the look and feel quickly by changing the parameters passed - including image size, colour, text size and also exclude tags that you don't want to be searched. This is free to use and do as you like.

Have a look at it working on my site - http://domclaxton.tumblr.com

Version

Current version 6.0

Technical help

Please use this link to 'Ask a question'

How to setup

There is no need to download anything as the code is already hosted online. You just need to point to one javascript file using the methods below. Setting up is quite easy, although be careful not to mess up your template code. It is recommended that you backup your current template before proceeding by copying pasting into a notepad file and storing somewhere on your computer.

Step 1

The first step is to locate whether or not you have jquery installed on your machine. It should be located at the top part of your tumblr template within the <head> tags or at the bottom of your template between the <footer> tags - if you have them. It should look something like this: ```

If you can't see the jquery code then you need to add it. It is preferable to use the latest version of jquery. Point to it like this by copy/pasting the code here.

``` It should go between the <head> tags of your template like this

http://domclaxton.com/tumblrblog/images/tumblr_related_posts_grab3.jpg

Step 2

Version 6 only You will need to add the css link within the head of your site template (like above) Copy and paste this code ```

```

Step 3

The third step is to locate the portion of code in your template where you want the related posts to show up and copy/paste the block of code below. Include the {block:HasTags} tags as well as the javascript because these code blocks are conditional code statements that will only render the code if that particular post has any tags - this saves pointless server interaction.

Version 6 (latest version): ```

{block:HasTags}

{/block:HasTags}

```

Version 5 (archived version-not recommended to use now): ```

{block:HasTags}

{/block:HasTags}

```

For example, I have put the code in my theme like this:

http://domclaxton.com/tumblrblog/images/tumblr_related_posts_grab2.jpg

Step 4

IMPORTANT - You must make sure you point to your site.
Locate this line of code in the text that you copy/pasted from above
url=domclaxton.tumblr.com&
- and replace it with your site address.
eg url=yoursitename.tumblr.com&

Step 5 - Customisation

There are a number of options with which to customise the look and feel. Currently there is only one layout type controlled by one css file but I plan to add more in the future. You can however control the size, colour, text size and number of related posts to show - the full list is below. I also included an 'exclude tag' parameter which allows you to specify tags that you don't want the script to search for. This is useful if you have used certain tags for certain navigational links. For example, on my site a I tag all my posts with one of four special 'super' tags which I use to create pseudo-categories from.

Here is a breakdown of what each parameter does:

  • num - the number of items you would like to see displayed - recommend no more than 8.
  • len - the maximum character length of your text link titles.
  • css - the CSS file to be used for display. Pass the name of the css file eg minimal.css Currently there is only one option which I plan to update at a later date.
  • title - the title of your related posts widget.
  • type - add a specific type if you want to display only related posts of a specific type. Use any or all of the following: text, quote, audio, photo, video, link, answer.
  • size - specifies the size of the images that the script will fetch to optimise download time. Use: 75, 100 or 250
  • boxH & boxW - width and height of each related post link
  • imgsize - once you have optimised the actual size of the fetched image you use this parameter to display it. Use: S, M or L to denote small medium or large. It will dynamically re-size proportionally for you.
  • fontsize - sets the font size of the Related post link title
  • tags2exclude - specify any tags that you want the script to ignore. Separate each tag with a comma
  • relpostbackcolor - specify a hash colour for the 'Related posts' section background, (eg: #F35B2C)
  • headtextcolor - specify a hash colour for the section heading text, (eg: #999999)
  • relpostcolor - specify a hash colour for the individual Related posts link surround, (eg: #FFFFFF)
  • liketextcolor - specify a hash colour for the 'Like' text, (eg: #999999)
  • textcolor - specify the colour of the text as a hash colour, (eg: #000000) New for version 6 (tumblr_related_posts_v6_min.js)

Please note: You must include the new css - see Step 2 above * postmargin - changes the padding between each related post box (eg: 5) * widgetmargin - changes the outside margin of the widget space (eg: 25) * widgetpadding - changes the padding of the widget which holds the related posts boxes (eg: 10)

I hope you find this widget useful,

Dominic Claxton

Project Information

The project was created on Feb 14, 2012.

Labels:
Tumblr jQuery JavaScript Widget JSON AJAX Blogging Relatedposts Tags related angularjs