Thoughts meander like a restless wind inside a letter box
Tutorial: Adding a pinboard sidebar and custom pinboard buttons to Firefox 
28th-Sep-2011 10:09 pm
oxymora: (Default)
[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:

Photobucket

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:
Photobucket

Option 2:
Photobucket

(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:

Photobucket

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: Photobucket Photobucket Photobucket [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:

Photobucket

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.
Comments 
28th-Sep-2011 10:08 pm (UTC)
forestgreen: charchoil picture: Iason embracing Riki possessively and Riki reluctantly surrendering. Charecters from Ai No Kusabi (Default)
This sounds great. I'll try it later when it's not 12 am here.
29th-Sep-2011 08:45 am (UTC)
oxymora: (Default)
Oh, someone from my timezone! I hope it works!
29th-Sep-2011 09:25 am (UTC)
forestgreen: charchoil picture: Iason embracing Riki possessively and Riki reluctantly surrendering. Charecters from Ai No Kusabi (Default)
Da Deinem Browser auf Deutsch ist, wahrscheinlich sogar vom gleichen Sprachraum :)
29th-Sep-2011 02:44 am (UTC)
jenwryn: (h50 • steve/danny; partners or somethin)
This looks great; I'll be giving it a go when I'm not at work. :)
29th-Sep-2011 06:41 am (UTC)
jenwryn: (h50 • rachel; smile)
Okay, home and have installed this – it's really great, thank you!
29th-Sep-2011 08:45 am (UTC)
oxymora: (Default)
Glad to hear it! Thank you!
29th-Sep-2011 07:00 am (UTC)
draconic_voices: (Default)
This is awesome, thank you so much :)
29th-Sep-2011 08:47 am (UTC)
oxymora: (Default)
Glad to help! Thanks for commenting!
30th-Sep-2011 05:16 am (UTC)
Thank you so much for this, it really helps
30th-Sep-2011 08:52 am (UTC)
pappersvingar: Paper crane (Default)
Thank you!
30th-Sep-2011 04:32 pm (UTC)
forestgreen: charchoil picture: Iason embracing Riki possessively and Riki reluctantly surrendering. Charecters from Ai No Kusabi (Default)
This worked perfectly! Thank you so much for taking the time to write it down step by step even for less tech savvy persons.

Danke!
17th-Sep-2014 01:10 pm (UTC)
Anonymous
Just lately none of unseen band do the job adequately. the christmas presents display unseen seeing that offline. May an individual display a lot of an effective one particular???
30th-Sep-2011 07:28 pm (UTC)
forestgreen: charchoil picture: Iason embracing Riki possessively and Riki reluctantly surrendering. Charecters from Ai No Kusabi (Default)
I feel as if I'm spaming you. I love this application so much.

Could you tell me what changes do I need to make to the code if I want to program one button to open my network in the sidebar instead of my own links. I usually use the network for recs I'd love to have that open. Thank you so much!

ETA: Never mind, I figured it out. I just needed to replace the "var" in the code. Thank you!

Edited 2011-09-30 07:48 pm (UTC)
30th-Sep-2011 08:18 pm (UTC)
oxymora: (Default)
Don't worry about spamming, I love getting comments.

(Probably unnecessary, since you figured it out already, but my code should open network if you double click. Three settings: Right click=browser tab, left click=own bookmarks sidebar, double click=network sidebar [actually, there's also a middle click setting, but I don't care about that since I'm always on my laptop].)

Alles gern geschehen!

Edited 2011-09-30 08:19 pm (UTC)
30th-Sep-2011 08:41 pm (UTC)
forestgreen: charchoil picture: Iason embracing Riki possessively and Riki reluctantly surrendering. Charecters from Ai No Kusabi (Default)
Ah! The double click works, I didn't know that. *is silly*. The right click thingy doesn't work for me, though, because I have a mac and the pad and mouse only have one button.

Now that I've figured out the trick to changing the code, I could set it so that your code opens in a new tab with double click (which I love, I was missing that) and the one button I created opens the network also with a double click for a new tab. I actually like that idea. Thanks for letting me know that I was missing some of the functionalities of your code.
3rd-Oct-2011 07:39 pm (UTC)
aurum: (random :: fly~~)
Thank you SO MUCH for this ♥
4th-Oct-2011 12:18 am (UTC)
thanks!
4th-Oct-2011 11:55 pm (UTC)
Anonymous
Thank you! <3 I was quite bummed about losing my simple delicious button that opened a pop up window and this worked beautifully for me, and very easy to follow for someone who knows nothing about coding. Thanks!! :)
5th-Oct-2011 06:16 pm (UTC) - pop up block?
Anonymous
Hi!

I've been using your suggestions and I must say, they work like a charm. Thank you so much.

One thing is odd though, when I assign a hotkey (CTRL + D) to the button that adds a new bookmark, Firefox comes up with the pop up blocker.

I'd rather not disable the pop up blocker on the whole, and it's impractical to introduce a special exception rule for every website I want to bookmark.

Any ideas?
6th-Oct-2011 09:51 pm (UTC) - Re: pop up block?
oxymora: (Default)
I've tried this and I get the same problem. I'm looking for a solution but so far, I've got nothing. It's not a problem with the button itself, but with the addon, I think (I've tried the hotkey function for other bookmarklet buttons with similar results). I'm going to keep looking, maybe check back here in a few days.
6th-Oct-2011 07:53 pm (UTC)
sally_maria: (Cute Cat)
Thank you very much for posting this, I've found it very useful.
6th-Oct-2011 08:53 pm (UTC)
sally_maria: Daniel Jackson looking sideways (Sheppard Toon)
There's one thing I was wondering - the pop-up without the tags always appears on the bottom right of the screen, whereas I'm used to them appearing in the middle. It's a silly thing to worry about, I know, but I was wondering if there was anything I could change in the button to make it open in the "right" place?
6th-Oct-2011 09:57 pm (UTC)
oxymora: (Default)
Yes, that is possible. Add the bold part to your code:

/* Code */
loadURI("javascript:q=location.href;if(document.getSelection){d=document.getSelection();}else{d='';};p=document.title;void(window.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,screenX=400,screenY=50'));");

The values for screenX and screenY determine the position on your screen (in px, from the upper left corner). The larger the X value, the more to the right. The larger the Y value, the more to the bottom. Play around with them until you're satisfied.
7th-Oct-2011 12:58 am (UTC)
sally_maria: (Daniel - brave man)
Brilliant, thank you. That's done it. :-)
6th-Oct-2011 08:21 pm (UTC)
loriel_eris: Scottish Dreamsheep (Scotland)
This is awesome! Thanks for this!

However, a (possibly) blonde question. How do you edit, delete, otherwise do stuff to the red ('My Pinboard Bookmarks') button...? After making the Blue one, I figured out how I should be able to do it, but obviously, with the red one, the default is overridden. Help?
6th-Oct-2011 09:58 pm (UTC)
oxymora: (Default)
Not a stupid question! It's ctrl+right-click.
8th-Oct-2011 07:47 pm (UTC)
loriel_eris: laurel leaf (Default)
Thanks! I had tried a couple of combinations, but I suspect it would have been a while before I got to this one...
11th-Oct-2011 05:37 am (UTC)
metal_dog5: aka Tenpou Gensui (Default)
Thank you for this - so easy to do and it works like a charm :)

I have a question; is it possible to have the sidebar open on the right side of the screen? I'm looking at the code, but I may as well be trying to read another language.
16th-Oct-2011 09:06 am (UTC)
lattara: woman standing with her face at an angle to the sun, with the sunlight reflectin off of the camera&#39;s lens (Default)
This is serisously *awesome*. Thank you!
16th-Oct-2011 09:06 am (UTC) - oops
lattara: woman standing with her face at an angle to the sun, with the sunlight reflectin off of the camera&#39;s lens (Default)
*seriously

;-)
16th-Oct-2011 12:01 pm (UTC)
dirtylittlemakebelieve: Because Snape&#39;s worth it (Default)
Hi, I'm having a bit of a problem with the red button. It was fine when I first installed it, but now the sidebar won't open. I've recently updated to adobe flash 11 and adobe air 3 and am running Firefox 5, if that is at all relevant.
23rd-Oct-2011 01:41 pm (UTC)
coffeestudies: smurf pointing forward and yelling, &quot;LET&#39;S FUCKING DO THIS!&quot; (misc_04)
Thanks so much! ♥
24th-Oct-2011 02:46 am (UTC)
oxfordtweed: (Default)
How does one reverse the functions of left and right click? As in, I'd like to be able to left click to open Pinboard in a new tab, and right click to bring up the sidebar.

Thanks
24th-Oct-2011 02:56 am (UTC)
oxfordtweed: (Default)
Oh, duh. That was easy.

In case anyone else has this question in future, change 'this.rightclick' to 'this.leftclick,' an the other way round.



And make sure you didn't accidentally disable initialisation, or else nothing will work. DX
8th-Feb-2014 09:10 pm (UTC) - plFPdsvnceuEnCLovS
Anonymous
greg.txt;1;3
8th-Feb-2014 09:10 pm (UTC) - mwJxTFotOgLOfezmbs
Anonymous
greg.txt;1;3
8th-Feb-2014 09:10 pm (UTC) - ojRojxKLeVdY
Anonymous
greg.txt;1;3
8th-Feb-2014 09:10 pm (UTC) - lPOpuUgbrQFZSm
Anonymous
greg.txt;1;3
This page was loaded Jul 21st 2017, 4:25 am GMT.