scriptygoddess

29 Aug, 2002

Clippings: bookmarks in your site

Posted by: Lynda In: How to's

I came across this awesome article that shows how to add some javascript to your site that will allow users to "clip" or bookmark particular entries at your site for easy reference later on. If you want to have a look, I've implimented this in most sections of my site.

This obviously would be most useful for news sites or article sites. But I think it's a nice tool to have. One warning is that it seems to crash Opera browsers (so far, it's nice to all others I've tested) but I'll let you know the php workaround I've dug up for that.

If you'd like to impliment such a thing on your site, I'd suggest you first read the article, then download the clippings.js from the download page. I will detail below how to impliment this in Moveable Type, Greymatter and pMachine along with making sure Opera browsers don't call it up at all. It can be used with ANY content management system that deals out unique IDs and in fact, if you want to make up your own unique ID, you don't even need a CMS.

Getting Started

For all users, first you'll want to download and customize clippings.js. This can be done by clicking on Download at this page and then click on "Scaricate il clippings.js originale" Once you open the file, everything is pretty well documented, however there are some examples of what to customize on this page.

Next, you'll want to call clippings.js in any page you want to use the script. This can be done simply with the following code:

<script language="javascript" type="text/javascript" src="http://www.yoursite.com/pathto/clippings.js"></script>

If you want to do like I did and make sure this file doesn't come up for Opera users, you can use this instead (this uses PHP – there's likely a javascript version of this, but I don't know it):

<?php
if (strstr($_SERVER["HTTP_USER_AGENT"], "Opera")) {
//
} else {
?>
<script language="javascript" type="text/javascript" src="http://www.yoursite.com/pathto/clippings.js"></script>
<?php
}
?>

Next, you'll want to prep the pages you'll be adding this functionality to with the following code. You can surround this code with your own CSS or HTML to make it fit your design, however I don't suggest you change it much:

<div id="demo">
<div id="clippingsMenu">
<div id="clippingsContainer"></div>

<div id="clippingControls">
<div id="clippingsCounter"></div>
<a href="javascript:eventClearReadClippings()" class="mI">Delete read stories</a><br/>
<a href="javascript:eventClearAllClippings()" class="mI">Delete all stories</a><br/><br/>
</div>
</div>
</div>

Again, if you'd like, you can surround it with the above PHP to prevent Opera browsers from displaying it at all (that goes for anything else added to your templates as well)

Moveable Type Users

Once your site is prepped, you can add the "Clip to favorites" link or icon to your entries. Simply add the following inside your MTEntries tags (in index templates) or anywhere in your individual archive template:

<a id="clp<$MTEntryID$>" style="cursor: pointer; cursor: hand;">Clip to Favorites</a>
<script type="text/javascript">allClippings[allClippings.length] = new Clipping(<$MTEntryID$>,"<$MTEntryTitle$>","<$MTEntryLink$>");</script>

Greymatter Users

Once your site is prepped, you can add the "Clip to favorites" link or icon to your entries. Simply add the following inside your Index Entry templates or Entry Page templates:

<a id="clp{{entrynumber}}" style="cursor: pointer; cursor: hand;">Clip to Favorites</a>
<script type="text/javascript">allClippings[allClippings.length] = new Clipping({{entrynumber}},"{{entrysubject}}","{{pagelink}}");</script>

pMachine Users

Once your site is prepped, you can add the "clip to favorites" link or icon to your entries. As usual, this involves a little bit of editing first, as Rick has not yet made available a way to get JUST the entry ID, however I'm almost certain he'll make this available in a future release. So what we want to do is edit the script so we can call up the entry IDs in our templates. It's a terribly simple thing to do, however I'll point you to Rick's hack to do this. He uses the variable %%id%%, so it is likely future versions of pMachine will already have this variable in the weblog_fns.php file and you won't need to re-edit this file with each upgrade (but be sure to check to see if %%id%% has been added in future upgrades, if not, you'll need to edit your weblog_fns.php file upon upgrading)

After you've added %%id%% (I would suggest adding it after each instance of %%entry_id%% – there will be two of them. This is so you can use it in both your multiple entry templates as well as your single entry templates) you're good to roll. You can add the following to either your mutiple entry or single entry templates:

<a id="clp%%id%%" style="cursor: pointer; cursor: hand;">Clip to Favorites</a>
<script type="text/javascript">allClippings[allClippings.length] = new Clipping(%%id%%,"%%title%%","%%comments_url%%");</script>

Anything else?
If you have any questions, please make sure to reread the article linked above. It does a great job of explaining how to impliment this. If you still can't get things to work, leave a comment and I'll do my best to give you a hand. :)

5 Responses to "Clippings: bookmarks in your site"

1 | Scott

August 29th, 2002 at 3:35 am

Avatar

Thanks!
This is so sweet, and was so easy to implment.

/Scott

2 | Jake

August 29th, 2002 at 4:18 am

Avatar

Yeah, it's made by http://www.smokinggun.com/ , But i've never seen it implemented this way. Thats a different twist on it.

3 | Steve

October 5th, 2002 at 4:20 pm

Avatar

Great when you get it working – Thanks!

Two tips – don't have the $MTEntryID$ set to PAD i.e. you want the archive numbers to have leading zero's – it won't work.

Don't put hyperlink driven headlines in your topics/headline box when posting stories. It won't work.

I had both things in my template and it took 5 hours to deduce this was where I was going wrong 😉
Steve

4 | jim

May 7th, 2004 at 6:29 am

Avatar

I'm trying to implement the following code for 'clipping', but not havimg much luck. Nothing happens when I click on the link to add the entry to my hotlist. Any help will be greatly appreciated.
—-
[EDITED] – JIM – Can you post the code on your server and just include a link to it?? Thx
—-

5 | jim

May 7th, 2004 at 8:05 am

Avatar

http://www.Wow! Thank you so much for getting back to me so fast. Here is the link to a text file.

http://www.advancinginsights.com/testblog-1/index.txt

Featured Sponsors

Genesis Framework for WordPress

Advertise Here


  • Scott: Just moved changed the site URL as WP's installed in a subfolder. Cookie clearance worked for me. Thanks!
  • Stephen Lareau: Hi great blog thanks. Just thought I would add that it helps to put target = like this:1-800-555-1212 and
  • Cord Blomquist: Jennifer, you may want to check out tp2wp.com, a new service my company just launched that converts TypePad and Movable Type export files into WordPre

About


Advertisements