Introduction: Tumblr: Customized Minimalist Theme With Addthis, Adsense, and Disquss Support

By Punk Love Designs
About: Summer 2012, I moved out of NYC with one goal: find a way to get paid to hike. Since then I’ve been developing my nature inspired ink work, working on my master naturalist certification, and huffing it up and…

NOTE: Species Identification Contest 2

Can you identify this here critter? Found October 9th in Heritage Park in Blacksburg, Virginia. Specimen was found in a single, isolated patch on a short hillside, under deep brush, and about 10 yards from a Cattail marsh. First correct identification commented on the punklovedesigns facebook wall with means of identification wins the code for three months of Instructables Pro Service.

Winner will be chosen from available answers on Sunday 13th. Every time I get a bonus code for a featured tutorial I'll give it away here with another contest to try readers' Taxonomy skills.

Cheers!
James


A little while ago, I joined tumblr as a way of drawing attention to my graphic design and fine art work. I quickly fell in love with the beautifully simple The Minimalist Theme designed by The Minimalist, but found myself craving a more interactive theme for feedback, social media integration, and search engine optimization. One thing must be clear, the The Minimalist Theme accomplishes exactly what it sets out to do- create a refreshingly crisp, clean, and to the point means of hosting your content. It stands apart from any social media & Chinese sex pill clogged web 2.0 dinosaur, and any degree of change to it will detract from this. As such, all of the means in which I tweaked the code were done very great care to not ruin the overall design aesthetic.

Downloadable code is available here.

Step 1: Step 1: Gaining Google AdSense for Front Page Posts

Firstly, not only for subject pertinence, but also for smoother flow it was immediately clear that the front page should be held as holy. The only change made to it was incorporating an unobtrusive 468x15 Google AdSense text add slot into the footer of each post for passive ad revenues. Google AdSense is a platform that places context sensitive, pay per click ads into your page. It allows a range from the bright, flashy, and distracting, to the smaller and subtle, and has the grace to allow editing of text, border, & link colors to match the tune of your page when you create an ad. A tutorial for such may be found here. After registering and tweaking your ad, a code is generated which may be pasted at will into your source. In the linked example, this code may be found from lines 675 to 686:

image

Following creation of your ad, you will need to go into your public page html via the customize sidebar. Simply add the code you generate over this block of text with your own personal ad_client and ad_slot and upon refresh and AdSense account activation your ads will appear. Please note that Google will wait 2-3 days to review your site and activate your ads, during which time a blank space will appear below each post.

Step 2: Step 2: Dropping Disqus Into Permalinked Posts

Looking to set up comments for friends, family, and the massed hordes of the internet? Disqus is the way to go. Advantages are a smooth interface, instancing per page, one stop moderation, and social media connectivity via facebook, twitter, etc. One of the oddities of the theme I’ve discovered is that, while it appears to have Disqus code in place, registering a Disqus id in the editor has no apparent effect. I spent a good while looking for a way to reactivate the feature when I found that Andrew Fulton of GitHub had already accomplished such here with a simple 2 line insertion. Not looking to reinvent the wheel, I used Andrew’s code as seen on lines 710-711:

image

For this to work, you will have to have signed up for Disqus and registered your Disqus id in the left pane of the tumblr customization window.

Step 3: Step 3: Addthis Augmentation of Permalinked Posts

Addthis is a platform enabling the addition of social media buttons to your website, allowing immediate sharing to countless platforms without finicking about with individual accounts. Even nicer, with a little setup, it will easily recognize which of your content is already out there, helping promote your page with a collection of likes, tweets, and what have you. This one is slightly more complicated, with the official tutorial here. As with the Adsense and Disqus, Addthis activation will require registering with Addthis. The registration process is straightforward.

First, a quick call to the Addthis javascript on line 462 under the scripts section:

image

The option to overlay Addthis tags on images was too tempting, per the official tutorial, I found the theme’s image loading line and made a slight modification for addthis support as seen in the highlighted section of line 590:

image

With this Addthis code in place, hovering over an image will bring up a menu to like, share, print, email, etc the current page URL. It’s not a perfect solution, it works fine on permalink pages, but on the page scroll it links to the main page, rather than the segment of interest. This could be remedied by per post customization and code insertion at a later date.

Finally, the last remaining task is to add the Addthis social media buttons to the permalink page. The code was inserted directly over the Disqus html with a break added, placing the code nicely between the image, Google ads, and discussion. The process was simple and followed the tutorial closely. You will need to insert your own Addthis id in line 706 as noted:

image

The layout and presence of each button can be customized in code as seen above in the class and services_overlay sections.

Step 4: Step 4: Timely Tweaks & Future Work

As I was looking for a nicely categorized and divided links list (top of page here), it’s worth knowing that you can sneak a little html into the section titles, namely the <br> command. This was a frustrating endeavor, as multiple times pages moved out of position seemingly at random, even changing names to “PAGE” occasionally. Ultimately I was forced to set each page exactly as desired, then go through each linked page one at a time top to bottom and resave it. Also be sure to use all lower case in page names, as deviating from naming convention will really throw a spanner in the works.

In the future, I’d like to find a way to include page navigation in the search page. I use search links as a convenient means of categorizing my site by my tech, nature, ink, and graffiti work. Unfortunately the search window lacks a navigation page, only showing as many posts as chosen on the customization page. I might try enabling infinite scrolling for search page only.

Thanks for your time, and keep up the blogging!

James Schlitt

Punk Love Designs

Like to see more of my work? Check my site at punklovedesigns.com. I specialize in pen and ink illustration and terrible photography of rare and interesting species, along with the occasional tech hack. I follow the biochemists' mantra structure= function, such that a wrench = a hammer if you swing it right.

Step 5: References

1. “The Minimalist Theme”. http://www.tumblr.com/theme/12051. Retrieved 2012-12-13

2. Technologyguru77. “How To Set Up a Google Adsense Account and Recieve Payment From Google”. http://www.youtube.com/watch?v=Y_w9GT8oTSU. Retrieved 2012-12-13

3. Fulton, Andrew. “Tumblr’s minimalist theme WITH a disqus block”. https://gist.github.com/1471922. Retrieved 2012-12-13

4. “Share Pages Using Photos”. http://www.addthis.com/labs/photo-sharing#.UMvu7ndcnIU. Retrieved 2012-12-13

5. “Installation Overview”. http://support.addthis.com/customer/portal/articles/381218-installation-overview#.UMv2M3dcnIV. Retrieved 2012-12-13