Dev411 Blog

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:

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.