How to add social bookmarks to jReviews by Intown Web Design

Home

How to Add Social Bookmarks to jReviews Templates

There are two main ways to add social bookmark submit buttons to jReviews templates and both are fairly straight forward:

Use Joomla Social Bookmarking Plugins
Add the code to your jReviews template

1. Joomla Social Bookmarking Plugins
I have personally installed and configured two of the popular social bookmarking plugins Social Bookmarking Buttons Plugin and SocioTag . Both are good and had their pros and cons. Personally I did not want the extra code and links on my page. I am not exactly sure of all of the code the plugins add. My pages are already complex and I try to keep them as simple as possible. Finally I could not get the button placement exactly where I wanted it.

2. Add the Social Bookmark code to the jReviews template
Each social bookmarking system has its own special code to submit the link and information in the correct way. The easier it is for a visitor to add you page the more likely they are to add it. I decided to figure out the code for the most popular social bookmark system. Then I could add this to the jReviews template system. It was a little extra work but now I can add just the links I want, have complete control over the look and placement, and not worry about any unneeded code or links.

Adding the Social Bookmarks

Decide where you want the bookmarks placed. I wanted the bookmark links at the top of the page. So I have reworked my editor header or the authorreviewheader.html file in the jReviews template. One requirement of using this file is you have to have an editor review. If you do not use editor reviews then you coluld modify the user review header file. I have designed my site so that every review item gets an editor review.

View the Ceiva 7inch digital photo frame content page to see how the social bookmarks will display.

Code to add Digg Script

This bookmark was pretty easy to add digg has done all of the work for you by creating a script:

Digg has plenty of ways to modify this and they can all be found on the Integrate Digg Page

Code to add Del.icio.us Bookmark

The del.icio.us code was also pretty easy to add.

The Del.icio.us page Save buttons are clearly explained. The only modification made was to the link text. It was changed from "Save This Page" to a shinny Del.ico.us button.

Most people who are familiar with social bookmarks know this logo.

See how the code calls the the Del.icio.us button image:
<img src="{TEMPLATE}/custom_images/delicious25px.jpg">

The {TEMPLATE} is the jReviews template location. If I ever use this jReviews template on another site I do not have to update the location of the image. As long as I have a directory named custom_images in my active jReviews template directory with a file called delicious25px.jpg, the link will display properly

Code to add StumbleUpon Submit Button

StumbleUpon required the most work to get the correct form for the submit link:

Here is an example of the required link:

<a href="http://www.stumbleupon.com/submit?url= http://www.yoursite.com/article.php&title=The+Article+Title"> <img border=0 src=""**LINK TO stumbleit.gif**"" alt="StumbleUpon Toolbar"> Stumble It!</a>

The link can be broken into 4 parts:

<a href="http://www.stumbleupon.com/submit?url= this section is pretty easy
http://www.yoursite.com/article.php For this section we need a way to call out the url of the page
&title=The+Article+Title"> For this section we need a way to call out the page title.
<img border=0 src=""**LINK TO stumbleit.gif**"" alt="StumbleUpon Toolbar"> Stumble It!</a> this section is also pretty easy and only needs to be modified with the correct image location and link text.

Here is the solution that I developed:

I again used some of the jReviews template variables to accomplish the task.

{CONTENTURL} echos the URL of the current page
{TITLE} echoes the title of the page
{TEMPLATE} like in the Del.icio.us echoes the path of the jReview template.

Note depending if you are use a SEF component or not you will get different results for the {CONTENTURL} I had issues with openSEF but since the project is dead I switched to sh404SEF and have not had any issues. Not sure what happens with the core Joomla SEF mod.

Wrapping It Up

Once I had all of the correct links added to my editor header, it was time for some <div> and css action to place and format the links. This is up to you on how you want them to display. You can see all of this code in action at Digital Picture Frame Reviews