[UPDATE: I made another post for Chrome extensions]
[UPDATE the second: The popup with tags button now has a scrollbar. (Thank you to the anon who provided the code in the google doc.)]

This is a tutorial for adding a Pinboard sidebar and custom Pinboard buttons to Firefox. Hope it helps some people!

One thing I really liked about the old Delicious was the Firefox addon. I use sidebars a lot, and I love customized toolbars. I didn't really use the Delicious toolbar, but Firefox allows you to drag buttons that you like into other toolbars (in my case the amazing All-in-One Sidebar, see http://firefox.exxile.net/aios/index.php).

Pinboard offers only a very basic browser addon (no real toolbar and no sidebar), plus the bookmarklets that you can drag and drop anywhere you like. However, when I first got my pinboard account (back when Yahoo announced they'd shut down Delicious) I spent some time fiddling with the Pinboard bookmarklets and made them into pretty buttons. I also made a button for a Pinboard sidebar.* Now that more people are leaving Delicious for Pinboard, I figured these might be useful for other users.

This is the result:



Red box: prettified Pinboard buttons
Red button: Opens Pinboard. There are three settings: (1) open sidebar with your own bookmarks (left click), open pinboard in new tab (right click), (3) open sidebar with your network's bookmarks (double click)
Yellow button: save as "unread"
First blue button: Bookmark popup without tags
Second blue button: Bookmark popup with tags

You can drag and drop these anywhere in Firefox. They don't have to be in the sidebar, that's just my personal preference.

Green box: Pinboard sidebar
As you can see, the Pinboard mobile view that I use as a sidebar shows your bookmarks (plus descriptions and tags). Private bookmarks are in a gray box, just like on the regular site. There's a search feature (for your own bookmarks by default, with a "search all" option once you've hit return), and links for your network, recent, popular, and unread bookmarks, as well as settings and logout.

Tutorial

Disclaimer: I am not an expert on this, and I basically stole other people's custom buttons and tweaked the code until they did what I wanted. Credit goes to various posters on the custombuttons2.com forum, which is currently not working and has probably been deleted permanently.

To replicate this, you need the Firefox Custom Buttons addon (https://addons.mozilla.org/en-US/firefox/addon/custom-buttons/)

1) Install the addon and restart Firefox.
2) To create a new button, either right click on any toolbar and select "Add new Button", or, in the menu, click on View > Add new Button (for the latter, you have to enable the menu in Firefox 4).

Option 1:


Option 2:


(Sorry, all my screenshots are German, because that's my Firefox language.)

3) To create the red button (left click: open Pinboard sidebar/right click: open Pinboard in new tab/double click: open network in sidebar), enter the following info into these fields:



URL: (leave blank)
Name: Pinboard bookmarks (Or any other name for your button)
Image: Add the url of your preferred favicon or download the favicon to your harddrive and upload it here. Here are the three favicons I used: [PLEASE download, do not hotlink]
Code: (leave empty)
Help: (enter anything you like)
Initialization code: Copy the following:

/*Initialization code*/
if (typeof custombuttons.uCbuttonButes != 'function') {
alert(custombuttons.bundle.GetStringFromName('ButtonCompatabilityAlert'));
this.disable(true);
}

var link1='http://pinboard.in/';
var link2='http://m.pinboard.in/';
var link3='http://m.pinboard.in/network/';

var Msg = createMsg(this.label);

this.bottomPanel = function(url, contextmenu) {
var panelID = 'bottom-panel';
var gPanel = document.getElementById(panelID);
if(gPanel) {
if(gPanel.firstChild.getAttribute('src').indexOf(url) == -1) {
gPanel.firstChild.setAttribute('src', url);
if(contextmenu) gPanel.setAttribute('contextmenu', contextmenu);
else gPanel.removeAttribute('contextmenu');
} else {
gPanel.parentNode.removeChild(gPanel.previousSibling);
gPanel.parentNode.removeChild(gPanel);
}
} else {
var tbb = document.createElement('toolbarbutton');
tbb.className = 'tabs-closebutton';
tbb.style.cursor = 'pointer';
tbb.setAttribute('oncommand',
'this.parentNode.parentNode.removeChild(this.parentNode.nextSibling); ' +
'this.parentNode.parentNode.removeChild(this.parentNode)');
var spr = document.createElement('spacer');
spr.setAttribute('flex', 1);
var spl = document.createElement('splitter');
spl.height = '28px';
spl.appendChild(spr);
spl.appendChild(tbb);
var ifr = document.createElement('iframe');
ifr.setAttribute('flex', 1);
ifr.setAttribute('src', url);
var box = document.createElement('box');
box.id = panelID;
box.height = '300px';
box.appendChild(ifr);
if(contextmenu) box.setAttribute('contextmenu', contextmenu);
gBrowser.parentNode.appendChild(spl);
gBrowser.parentNode.appendChild(box);
}
}

this.leftclick = function(evt) {
if(document.getElementById('sidebar-title').getAttribute('value')==this.label){toggleSidebar();}else{openWebPanel(this.label,link2);}
};

this.midclick = function(evt) {
if(content.document.location.href==''||content.document.location.href=='about:blank')loadURI(link1);else gBrowser.selectedTab=gBrowser.addTab(link1);
}; this.cleftclick = function(evt) { this.midclick(evt); }

this.rightclick = function(evt) {
if(content.document.location.href==''||content.document.location.href=='about:blank')loadURI(link1);else gBrowser.selectedTab=gBrowser.addTab(link1);
};

this.leftDclick = function(evt) {
if(document.getElementById('sidebar-title').getAttribute('value')==this.label){toggleSidebar();}else{openWebPanel(this.label,link3);}
};

this.tooltipText = this.label+'\nL: Sidebar\nD: Network Sidebar\nM: New Tab (F)\nR: New Tab (F)';

this.setAttribute( 'onclick', 'custombuttons.gQuot.mHandler( event, this )' );
this.setAttribute( 'ondblclick', 'custombuttons.gQuot.mHandler( event, this )' );

this.style.opacity = '.65';
this.setAttribute('onmouseover', 'if (custombuttons) custombuttons.ButtonBrt(event);' );
this.setAttribute('onmouseout', 'if (custombuttons) custombuttons.ButtonDim(event);' );

this.setAttribute('dependency','FF2.0*, FL1.0*, TB2.0*, CB2 2.0.5*');
this.setAttribute('status','Complete');
this.setAttribute('public',true);

If you want to, you can assign a hotkey under Options.

That's it! You're done! Hit okay.

4) To place the button in any toolbar, either right click on any toolbar and select "customize" or go to View -> Toolbars -> Customize. A menu with all your buttons will pop up. Select the button you just created and drag and drop it where you want it to be.

5) To create the yellow button (bookmark to pinboard as unread, without any tags):
Repeat steps 1) to 4) In step 3), enter the following:



URL: (leave blank)
Name: Pinboard: Read Later (Or any other name for your button)
Image: Add the url of your preferred favicon or download the favicon to your harddrive and upload it here.
Code: Copy the following:

/* Code */
loadURI("javascript:q=location.href;p=document.title;void(t=open('http://pinboard.in/add?later=yes&noui=yes&jump=close&url='+encodeURIComponent(q)+'&title='+encodeURIComponent(p),'Pinboard','toolbar=no,width=100,height=100'));t.blur();");

Help: (enter anything you like)
Initialization code: (leave empty)
If you want to, you can assign a hotkey under Options.


6) To create the first blue button (popup without tags):
Repeat steps 1) to 4) In step 3), enter the following:
URL: (leave blank)
Name: Pinboard: popup without tags (Or any other name for your button)
Image: Add the url of your preferred favicon or download the favicon to your harddrive and upload it here.
Code: Copy the following:

/* Code */
loadURI("javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('http://pinboard.in/add?url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'Pinboard',%20'toolbar=no,width=700,height=350'));");

Help: (enter anything you like)
Initialization code: (leave empty)
If you want to, you can assign a hotkey under Options.

6) To create the second blue button (popup with tags) [UPDATE: Now with scrollbar]:
Repeat steps 1) to 4) In step 3), enter the following:
URL: (leave blank)
Name: Pinboard: popup with tags (Or any other name for your button)
Image: Add the url of your preferred favicon or download the favicon to your harddrive and upload it here.
Code: Copy the following:

/* Code */
loadURI("javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(open('https://pinboard.in/add?showtags=yes&url='+encodeURIComponent(q)+'&description='+encodeURIComponent(d)+'&title='+encodeURIComponent(p),'Pinboard',%20'toolbar=no,scrollbars=yes,width=700,height=600'));");

Help: (enter anything you like)
Initialization code: (leave empty)
If you want to, you can assign a hotkey under Options.


Phew. That's all. Hope it helps some of you. Comment if you have questions or suggestions! (Also: feedback is love. Anonymous comments are enabled, IP logging is off.)



* Well. It's the Pinboard mobile version opening in your Firefox sidebar. Not a replacement for the Delicious sidebar, but Maciej (the Pinboard owner) has said that he will not be implementing a real sidebar anytime soon because it would require too much coding. So this is the best you'll get.