Pages

Tuesday, September 11, 2007

Adding 'dogear this' button to your webpages

Product development has made integration of Dogear with existing web applications even easier!!! Currently, you can add a 'dogear this' button to existing web pages by simply copying the bookmarlet code. The bookmarklet code is presented here:

var h='https://greenhouse.lotus.com/dogear';
var d=document;
var b=d.body;
var e=encodeURIComponent;
var t=setTimeout;
var dw;
(function() {
if(b){ a
var p=d.createElement('script');
p.charset='UTF-8';
p.src=h+'/tools/blet.js';
b.appendChild(p);
}
t("var u=d.getElementById('dogear_postUrl');
if(u){
u=u.href;
}
else
{
u=h+'/post?url='+e(location.href)+'&title='+e(d.title);
}
dw=open(u+'&ver=0.9','dogear','toolbars=no,width=670,height=650');
if(!(dw==null||typeof(dw)=='undefined')){
dw.focus()}",250)
} )()

Long, huh? Well, it's not that bad considering they give you the code and it's just a matter of copy-paste into all your webpages. If you are interested, this developerWorks article explains more on how to use the above code.

As of today, however, we have an even EASIER way to do this. And all it takes is two lines of code!! -- I promise, let's check it out.. First, add this line to your HTML's HEAD element:

<script type="text/javascript" src="http://greenhouse.lotus.com/dogear/tools/doglink.js"></script>

Then, add this line to the <BODY> element of your web page (right now it's a DIV but you could make it a button if you wanted to...):

<a href="#" style="text-decoration:none;" onclick="DogLink.post_to_dogear(location.href, document.title, '', '');return false;"><IMG height=16 src="http://server.com/dogear/misc/favicon.gif" width=16 border=0>Bookmark this!</A>

Note: Updated 27/Apr/2009 to fix code as per comments

That's it!! Nifty, eh? This will be available to customers in the 1.0.2 release.

2 comments:

  1. When I follow these instructions it does not work for me. When I click on the "dogear this" text I get a new window with the dogear globe icon and a javascript error. When I click on the dogear icon nothing obviously happens.
    I believe your code should say:
    [a href="#" style="text-decoration:none;" onclick="DogLink.post_to_dogear(location.href, document.title, '', '');return false;">Bookmark this![/A>
    or
    [a href="#" style="text-decoration:none;" onclick="DogLink.post_to_dogear(location.href, document.title, 'tag1', 'Description of page');return false;">[IMG height=16 src="http://server.com/dogear/misc/favicon.gif" width=16 border=0>Bookmark this![/A>

    or even just:
    [script type="text/javascript">DogLink.makePost(location.href,document.title,'tag1 tag2','Description of this bookmark for the dialogue etc');[/script>

    ReplyDelete
  2. Brett.. oops you are right.. Thanks for catching this!!! .. makePost() should generate the code for me. So you can use makePost() to generate the HTML for you.. or simply use post_to_dogear if you want to put in your own code. I've updated the blog post appropriately.

    ReplyDelete

Anonymous comments are not encouraged. I reserve the right to delete anonymous comments.