typo icon

Notable social bookmarking/networking for Typo

Posted in , Sat, 02 Sep 2006 17:20:00 GMT

Benjamin Gorlick asked for WP-Notable-style social bookmarking/networking links on the #typo IRC channel so I put one together in the form of a single view (template file). WP-Notable, by Cal Evans, displays a row of icons with links to social bookmarking/networking sites under your blog article allowing for easy posting tovarious social bookmarking sites.

All the icons used here are from the WP-Notable plugin and look like the following:

notable icon bar

Without further ado, here are the 4 steps (optional 5th step) to get this on your Typo blog:

Step 1: Copy the _article_notable_v4.1.1.rhtml or _article_notable_v4.0.0.rhtml partial include file to your Typo install's app/views/articles/ directory and rename it _article_notable.rhtml.

I've put the code for this all in a single template file to keep the modification in a single place since I have a growing number of mods. There is an array of information for each site. Right now it will create this array each time it is included which may be several times on the homepage. This could be put into the config file or a helper so it gets instantiated only once but I left it in the template since it means updating fewer files and the HTML pages are cached so I don't think it's a big deal. It's also possible to create a notable_link method to generate each link instead of having it created in the template.

Step 2: Install the icons by extracting the png files from typo_notable.tgz into your /images/notable directory. This directory is ferenced in the _article_notable.rhtml file so edit that file if you wish to change the icon locations. The tarball also includes the rhtml file just for completeness.

Step 3: Add the following to index.rhtml file under the "Read more..." article_link line. This file is either in app/views/articles/ or your theme directory.

<%= render :partial=>"article_notable",:locals=>{:article=>article} %>

Step 4: Edit the read.rhtml file and add the following line under the where the article body is rendered. In Typo 4.1.1, place this line under the <%= html(@article) %> line and in Typo 4.0.0, place this line under the <%= @article.full_html %> line. The read.rhtml file is either in app/views/articles/ or your theme directory.

<%= render :partial=>"article_notable",:locals=>{:article=>@article} %>

Step 5: If you want to style the notable icons, there are some CSS classes used typo_notable_line,typo_notable and typo_notable_icon. These are easy to spot in the _article_notable.rhtml file.

So far I've only tested del.icio.us and digg and the links work since that's where I have accounts. Please let me know if any of the links don't work (or work) for you. Enjoy!

Update: Thanks to Benjamin Gorlick for comments to these instructions.

del.icio.us:Notable social bookmarking/networking for Typo digg:Notable social bookmarking/networking for Typo reddit:Notable social bookmarking/networking for Typo spurl:Notable social bookmarking/networking for Typo wists:Notable social bookmarking/networking for Typo simpy:Notable social bookmarking/networking for Typo newsvine:Notable social bookmarking/networking for Typo blinklist:Notable social bookmarking/networking for Typo furl:Notable social bookmarking/networking for Typo fark:Notable social bookmarking/networking for Typo blogmarks:Notable social bookmarking/networking for Typo Y!:Notable social bookmarking/networking for Typo smarking:Notable social bookmarking/networking for Typo magnolia:Notable social bookmarking/networking for Typo segnalo:Notable social bookmarking/networking for Typo



  1. Benjamin Rails Blog said 1 day later:

    You’re missing the step about downloading the images into /images/notables/

  2. John Wang said 1 day later:

    Thanks for catching that. I created a tarball and an extra step on installing the images.

  3. Mike Mondragon said about 1 month later:

    I whipped up an article on how to get WP-Notable bookmarks into the Scribbish theme and its derived from your article. Still needs some work. Thanks for posting this up.

  4. ccboy109@gmail.com said 5 months later:

    If I change themes´╝îI have to redo there five steps.

  5. e9reen said 7 months later:

    This thing doesnt work in latest typo 4.1 version. there is no <%= @article.full_html %> line in the read.rhtml file and placing the recommended code in that file breaks the pages altogether, no articles show zippp.

  6. John Wang said 7 months later:

    This was originally written for Typo 4.0.0 and a number of things changed with 4.1. The article has been updated and tested with 4.1.1. Let me know if you have any other issues.

(leave url/email »)

   Comment Markup Help Preview comment