Introduction: Tumblr: Customized Minimalist Theme With Addthis, Adsense, and Disquss Support
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.
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
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:
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.
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:
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:
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
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!
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