SexyBookmarks for CakePHP with Mootools

Apr 11th, 22:11

Recognize the beautiful bookmark tool on this bottom of article? That is SexyBookmarks! we can get it on http://www.sexybookmarks.net for free. It's quite straight forward to use on wordpress as they provide it in a wordpress plugin. Some another platforms are also guided on "platforms" section on sexybookmarks website, but for CakePHP here is my way to accomplish it.

 

My method is so simple, this bookmark tool will be included on the pages as a cakePHP element. I'm a big fan of mootools JavaScript framework so I'll take the advantage from it, as I also used it for the another tasks for this personal site.

 

First step is go to http://www.sexybookmarks.net to download the package, it's OK to donwload as a wordpress plugin, we just need the CSS and images, they are :

 

  • style.css (to avoid naming confusion, I renamed this file to sexystyle.css)
  • sexy-trans.png
  • and sexy-sprite.png

 

  1. Create a folder "images" under app/webroot/ and placed those pngs inside it and put sexystyle.css inside app/webroot/css. 
  2. Get this sexybookmarks.ctp and put inside app/view/elements/ 
  3. Create a js file on app/webroot/js/ named it as sexy-bookmarks-moo.js

 

This js controlled the variables send to the sharer and handle the opening animation. 

 

Show Plain Text
  1. window.addEvent('domready', function() {
  2.    
  3.     var sexyBaseHeight=$$('.sexy-bookmarks').getStyle('height');
  4.     var sexyFullHeight=$$('.sexy-bookmarks ul.socials').getStyle('height');
  5.  
  6.     var url = encodeURIComponent(window.location.href), desc = ''; 
  7.        
  8.         //catch first paragraph in content div as description text.
  9.         //change it as your div name may different.  
  10.     var desc = $$("#content p")[0].get('html');
  11.     var title = document.title;
  12.    
  13.     $$('div.sexy-bookmarks').addEvent('mouseover', function(){
  14.         this.tween('height',sexyFullHeight);
  15.  
  16.     });
  17.     $$('div.sexy-bookmarks').addEvent('mouseout', function(){
  18.         this.tween('height',sexyBaseHeight);
  19.     });
  20.    
  21.     $$('.sexy-bookmarks a.external').addEvent('click',function() {
  22.         this.set("target", "_blank");
  23.        
  24.        
  25.     switch(this.getParent().get('class')) {
  26.         case 'sexy-twittley':
  27.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url + '&desc=' + desc + '&pcat=Internet&tags=');
  28.             break;
  29.         case 'sexy-digg':
  30.             this.set('href',this.get('href')+'?phase=2&title=' + title + '&url=' + url + '&desc=' + desc);
  31.             break;
  32.         case 'sexy-twitter':
  33.             this.set('href',this.get('href')+'?status=' + title + '+-+' + url);
  34.             break;
  35.         case 'sexy-scriptstyle':
  36.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url);
  37.             break;
  38.         case 'sexy-reddit':
  39.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url);
  40.             break;
  41.         case 'sexy-delicious':
  42.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url);
  43.             break;
  44.         case 'sexy-stumbleupon':
  45.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url);
  46.             break;
  47.         case 'sexy-mixx':
  48.             this.set('href',this.get('href')+'?title=' + title + '&page_url=' + url + '&desc=' + desc);
  49.             break;
  50.         case 'sexy-technorati':
  51.             this.set('href',this.get('href')+'?add=' + url);
  52.             break;
  53.         case 'sexy-bthislist':
  54.             this.set('href',this.get('href')+'?Action=Bthis/addblink.php&Title=' + title + '&Url=' + url);
  55.             break;
  56.         case 'sexy-diigo':
  57.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url + '&desc=' + desc);
  58.             break;
  59.         case 'sexy-yahoobuzz':
  60.             this.set('href',this.get('href')+'?submitHeadline=' + title + '&submitUrl=' + url + '&submitSummary=' + desc + '&submitCategory=science&submitAssetType=text');
  61.             break;
  62.         case 'sexy-myspace':
  63.             this.set('href',this.get('href')+'?t=' + title + '&u=' + url);
  64.             break;
  65.         case 'sexy-facebook':
  66.             this.set('href',this.get('href')+'?t=' + title + '&u=' + url);
  67.             break;
  68.         case 'sexy-designfloat':
  69.             this.set('href',this.get('href')+'?title=' + title + '&url=' + url);
  70.             break;
  71.         case 'sexy-devmarks':
  72.             this.set('href',this.get('href')+'?posttitle=' + title + '&posturl=' + url + '&posttext=' + desc);
  73.             break;
  74.         case 'sexy-newsvine':
  75.             this.set('href',this.get('href')+'?h=' + title + '&u=' + url);
  76.             break;
  77.         case 'sexy-google':
  78.             this.set('href',this.get('href')+'?op=add&title=' + title + '&bkmk=' + url);
  79.             break;
  80.     }  
  81.    
  82.     });
  83. });
  84.  

 

Don't forget to include mootools core library before $scripts_for_layout; on our template layout. Get into the desired section you want to display sexybookmakrs and load the element using this snippet:

 

 

Show Plain Text
  1. echo $this->element('sexybookmarks');

 

See the result.... so Sexy!

Add your comment

CAPTCHA
reload code