Blogger Hacks, Categories, Tips & Tricks

Thursday, June 29, 2006
PopMarks - a 3spots/Freshblog Cross-Over!
Freshblog and 3spots are proud to announce the launch of a new blog tool service - PopMarks!


"Pushing all the right buttons"


The idea behind this service is to provide blog publishers with a single button that unifies the full range of available social bookmarking, search, translation and related services. As previously discussed, social bookmarking buttons have some drawbacks, but we've tried to address those concerns. For starters, keeping track of the seemingly endless stream of new services is difficult and thankless - so we do it for you. And while many people who bookmark will have bookmarklets on their browsers, it is difficult for these to work unless you are on a post page. If there is more than one post on the page (such as an archive or main page) then these browser-based buttons usually won't work. Also, if you use multiple bookmarking services (perhaps for different content types) then a suitable choice of buttons that already captures relevant tags and text is easier to work with than fumbling with a bunch of bookmarklets, re-entering the same data again and again.

Features

  • A single attractive button
  • Friendly popup contains a thorough selection of bookmarking services, search, translation and other tools
  • The list is actively maintained with new services added automatically
  • Tags and free-text annotations already pre-populated
  • Filtering of offered buttons to avoid clutter
  • Works with both URL and JavaScript-type services
  • Flexible presentation with different button styles and colours
  • Free, open, extendible ... and very hackable
You can see PopMarks in action over at 3spots and SpeccySux. The source for those buttons is the giant list of over two hundred services (and growing!) maintained on delicious by 3spots. As new services come online, they will be put in this list for your readers' use. You'll notice that we've tagged the bookmarks themselves - this means that you can choose to show readers only certain subsets using tags like spanish, search, translation or community.

PopMarks works by fetching a subset of this list of blogging services from delicious and rendering them in an attractive popup box on the page whenever the button is pressed. Readers can then avail themselves of any of the services before closing the popup. PopMarks pre-populates (where possible) the bookmarking and search forms with information such as post title, post URL, blog feed, blog title, blog URL, tags (found in the tags="rel" prior link) and text annotation (either user-selected text or the first paragraph in the post).

To see these last two features in action, go to the 3spots blog, click PopMarks in the post footer and then click on the BlinkList icon (). You'll see the tags and notes (first para) appear in the form. Close the box. Now, repeat, but first select some text somewhere in the post. Neat! The selected text appears in the notes field. We'll be rolling this out across all services that support it over time.

Installation

To install PopMarks on your blog, you'll need to follow these steps.
  1. Put this code into the header section of your blog template (ie before the </head>):

    <script type="text/javascript">
    // set PopMarks parameters
    popAnchor = 'popmarks+set3';
    </script>
    <script type="text/javascript" src=" http://ghill.customer.netspace.net.au/popmarks/popmarks-v02.js">
    </script>

  2. In the template, wrap the body of the post in a div element with class of "post-body". It might look like this:

    <div class="post-body"><$BlogItemBody$></div>

  3. Put this in your post footer where you want the activation button to appear (after your listing of post tags):

    <script type="text/javascript">
    makeMark('<$BlogItemPermalinkURL$>', '<$BlogItemTitle$>', '<BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader>', '');
    </script>

  4. Check that it's working (just use preview - no need to save and republish at this point).

  5. Customise the appearance and settings to suit your blog. Check out the first 20 or so lines of the script: If you don't like the default settings for any of these parameters, you can change them in the header section. Visit http://del.icio.us/ycc2106/popmarks. Rather than listing a hundred buttons, find a suitable tag for your blog, eg popmarks+spanish or popmarks+search. Also, check out the different style of activation buttons available.

For example, suppose you wanted the popup box to be dark green, only include German services, have the title of the button be "Benutzen ein Werkzeug!" and use the second style of activation button (in yellow):

<script type="text/javascript">
// set PopMarks parameters

blogUrl = 'http://mydomain.com/blog';
blogFeed = 'http://mydomain.com/blog/atom.rss';
boxColBG = 'darkgreen';
popAnchor = 'popmarks+german';
promptStr = 'Benutzen ein Werkzeug!";
activURL = 'http://www.geocities.com/ycorret/popmarks-icons/popmarks2-yellow24.png';
</script>

<script type="text/javascript" src=" http://ghill.customer.netspace.net.au/popmarks/popmarks-v02.js">
</script>


That's it - you're done!

Other Blogging Platforms

PopMarks will work with other blogging platforms, such as WordPress and TypePad. The only difference is that you'll need to specify the template tags using the local syntax. For example, where Blogger uses <$BlogItemTitle$> for its item title, WordPress uses <?php wp_title(); ?>. So, for example, you might need to use this:

<script type="text/javascript">
makeMark('<?php the_permalink(); ?>', '<?php the_title(); ?>', '<?php the_date(); ?>', '');
</script>


(NB: I know nothing about WordPress, so I'm just guessing that this will work! Confirmation would be appreciated.)

Either way, you'll need to use JavaScript to load the appropriate variables with your blogging platform's variables. Fortunately, in most cases the default settings should work regardless of blogging platform, so try that first.

Troubleshooting and Feedback

We'd love to hear from you if you've got some suggestions or feature requests, or if you're having problems getting it working - or if you just want to share how you're using PopMarks. The best way is probably by posting a comment on the blog post. We've agreed to separate the troubleshooting between Freshblog and 3spots according to our respective contributions and areas of expertise. Basically, Freshblog is the place for your questions about the delivery (script, feed, presentation) while 3spots is the place for your questions about content (services, icons, listings). Don't worry about getting it wrong - we'll be happy to hear from you either way.

Credits and History

PopMarks is a collaboration between Greg at Freshblog, and Yuli at 3spots. It started when Greg, impressed by Yuli's dedication in listing 87 social bookmark services, was inspired to adapt his earlier MarkIt! hack to incorporate a dynamic list of services stored on delicious and accessed via JSON. After persuading Yuli of the benefits of this approach, Yuli set about building the list and very cool icons and symbols. Greg worked on the script and the end result is PopMarks!

The source code is released under a Creative Commons licence and people are encouraged to create their own lists of services on delicious by copying the bookmarks already there. You can set up PopMarks to use any list you like. We hope you find PopMarks useful and incorporate it into your blog.


Filed in:
Posted at 2:06 AM by Greg.
31 Comments:
<    >
Blogger D said...
Great work.

I have this working correctly, but when I tried your suggestion for customizing the appearance it doesn't appear to change anything. I copied the code exactly how it is on the page.

>script type="text/javascript">
// set PopMarks parameters

blogUrl = 'http://mydomain.com/blog';
blogFeed = 'http://mydomain.com/blog/atom.rss';
boxColBG = 'darkgreen';
popAnchor = 'popmarks+german';
promptStr = 'Benutzen ein Werkzeug!";
activURL = 'http://www.geocities.com/ycorret/popmarks-icons/popmarks2-yellow24.png';
>/script>

>script type="text/javascript" src=" http://ghill.customer.netspace.net.au/popmarks/popmarks-v02.js">
>/script>

Any suggestions?

<    >
Blogger Greg said...
Are you saying it's broken (error or failure), or it is unchanged?

If it's the former, it might be that those parameters are entirely fanciful - there is no such domain as "mydomain.com" and I don't think there's (yet) a "german" tag for services auf Deutsch.

For colours, try using any of the W3C standard names.

If it's not "over-riding" the defaults with the new ones, then I'm a bit stuck. Certainly, 3spots is "over-riding" successfully to change the set of buttons, background colour, activation URL etc.

A URL for your blog would help me out too ...

<    >
Anonymous phydeaux3 said...
Pretty slick stuff. Nice work Greg and Yuli. Looks excellent.

<    >
Blogger Mark K. Sprengel said...
Very impressive. I'll have to see how I can put that on my blog. Right now, I have some icons on the main page for each post and if one want's more they click and got to that post's page where more bookmarks are listed as links. I also have a similar set-up for the blog itself in the right sidebar.

Pain to add new ones as you mentioned.

<    >
Blogger D said...
No, I'm not saying it's broken. When I changed the parameters for my blog nothing was different.

I did change "mydomain.com" to my blog and I didn't use "popmarks+german", I used "popmarks+set3".

Thanks

<    >
Blogger Greg said...
@d - That's weird. Can you please post your blog URL so I can have a look?

Alternatively, you could have a look (ie view source) at how 3spots has modified the settings to see if you're doing it the same way.

<    >
Blogger D said...
here is the blog I have it working on: http://badenson.blogspot.com/

I also noticed it does not show on every post.

Thanks,
Drew

<    >
Blogger Greg said...
Thanks, Drew.

There's a couple of points:

1) Your icons in the popup are quite spaced out - if you don't like that, you can change it by modifying the CSS img rule's padding.

2) The PopMarks! script is failing for you on your posts that contain an apostrophe ' in the title. This is because the function gets passed the title as a string, and the string is enclosed in single-quotes:

makeMark( ..., 'Summer bound (Friday 5's)', ...);

You can get around this by using double quotes " to delimit strings:

makeMark( ..., "Summer bound (Friday 5's)", ...);

But then, double quotes inside post titles won't work. Given that you seem to have a "Friday 5's" series, perhaps this option is the lesser of two evils?

I don't know what the proper solution to this problem is though; using backslashes in the string isn't the answer since it won't look right as normal text.

Any real JavaScripters out there got any suggestions?

In a similar but more tractable vein, one your global variables is defined:

blogTitle = 'The Denson's';

You can change to double quotes:

blogTitle = "The Denson's";

3) I thought the defaults not over-riding might be due to them not being defined as global variables (ie defined outside of a function). But that's not the case. The only way that boxColBG could get reset to "powderblue" is if it is of type "undefined" when the PopMarks! script is run. But that happens immediately after the global variable is set to something else!

I can only guess (hope?) that it might have something to do with the JavaScript errors from the errant apostrophes above that is causing this. It's weird. Unless the OnLoad JavaScript error is playing a role?

Try putting in the double quotes as described and see if the problem persists.

Thanks for the gentle freedbacking ...

<    >
Blogger John said...
Funny... I was going to write a post about "Freedback" as an interesting new & specific use of tagging... Maybe in light of this I'll do that anyway!

<    >
Blogger Disenchanted Dave said...
Hi, this looks really great. I'm in the process of redesigning my blog, and this looked great. I've done my best to implement it, but I'm still getting some problems.

In Firefox/Camino, the background doesn't show up and I'm left with the icons floating in an empty box. (Weirdly, when I preview the page in firefox, the background is there. It's only on the actual page that it disappears).

In Safari, clicking the button takes me to a new page with only the button and my blue background. Clicking the button then gives me a correctly-formed box (with the background).

There isn't a huge hurry because the rest of my new template isn't ready to go anyway, but I'd appreciate any help you could give. I'm testing out my new template here.

Thank you so much for making this available. I can show you my template code if you need it.

Dave

<    >
Blogger Disenchanted Dave said...
I'm not exactly sure what I did, but I fixed the color problem above (I think I may have needed to use foreground and background for some reason).

The safari thing is still baffling me. It works on your blog and on 3spot but not on mine.

Thanks again for your help.

<    >
Blogger Greg said...
Sorry, Dave. I don't have access to Safari so you're going to need to spell it out for me in some detail, along with any page warnings or errors. We might be able to get to the bottom of it that way.

<    >
Blogger Disenchanted Dave said...
Hi, I'll do my best to show you what happens.

When I click the popmarks button, I get this screen. When I click the popmarks button on that screen, I get this screen. The popmarks button then works correctly, so that if I try to bookmark something, there are no problems. So the code works fine in terms of bookmarking, but it screws with the page.

It's probably significant that the url in the address bar doesn't change when the popmark takes over the screen, but I don't know exactly what that means since I know nothing about Javascript.

It looks like you can see my code by looking at my page source, but if you want me to send you the actual template code, just let me know.

Thanks for making (and maintaining) this.

Dave

<    >
Blogger Disenchanted Dave said...
oh, and just to clarify, when I try using it, I don't get any error messages. It just produces the screens I linked to above.

For some reason, your blog and 3spot work fine in safari, so I must have done something different, but I have no idea what.

<    >
Blogger Greg said...
Hi Dave,

It seems that Safari doesn't like the insertion of the popup element. It looks like instead of inserting the HTML element (absolute positioned DIV), it's opening it in a new window.

I've had a look at the excellent Quirksmode website to find out if there are any known compatability issues. No luck. I've had a look at how you've installed it (eg put script inside another HTML element?). All looks fine. I'm starting to run out of ideas ...

Just to confirm, are you saying it works fine under Safari at the following:

* Freshblog
* Speccy Sux
* 404 Errors
* 3spots

But not here:

* Disentest blog

Is that right?

One last test. It could be the URL being of a "javascript: ..." variety that is causing a problem. Could you please right click on one of the PopMarks buttons on your blog, copy the URL (eg javascript: popList('1', 'txtURL ...') and then paste it into your address bar. Before you press enter, please insert btnsFetched=true; ie

javascript: btnsFetched=true; popList('1', 'txtURL ...')

Now press enter. What happens?

<    >
Blogger Disenchanted Dave said...
Now I'm totally baffled. I added the code to my actual blog, and it works fine in Safari, just like it does here, at 3Spots, and at 404.

But...

If I go to my test blog or to SpeccySux with Safari, the button doesn't work. And whatever the problem is there then carries over to other sites so that if I go to SpeccySux and then to my blog, it won't work at either place.

The code you suggested does keep the page from getting messed up, but it also keeps the bookmark icons from loading.

You might want to look into this for Speccysux's sake and to prevent future problems, but I think it's essentially fixed from my perspective.

Thanks again for all your work.

<    >
Blogger Greg said...
Great to hear it's working for you now.

I'm not too fussed about Speccy Sux - but I am worried that my code contains a JavaScript bug that is contagious!

Given my lack of a Safari testbed, I'm not sure how to progress this. Perhaps I'll just wait for the next release of Safari to see if it copes better. That's a cop out, I know. But chasing down a transitive bug that affects some websites for a browser with a few percent market share (that I can't use) ... sounds like a bad weekend.

Thanks for the tip off.

<    >
Blogger Singpolyma said...
Looks great! Will def be looking into adding this in the near future :)

With regards to requiring class="post-body", you might want to change that to class="entry-content" -- since this is the hAtom Standard markup :)

RE the quotes-in-title problem, nothing comes to mind at first. I'm sure there's some way you could do it though (maybe require class=entry-title? that too ugly?)...

<    >
Blogger Venkataramani said...
Hi Greg,

Regarding your comment in my blog about the string delimiter issue, I am lost too. I found that using ' as the delimiter helps because tags like BlogCommentAuthor have double quote(") in them. But single quote itself could pose a problem, true. Its the in-place replacement of these tags that sucks.

-Ramani

<    >
Blogger Greg said...
@Singpolyma: thanks for the heads-up. I will make the default class "entry-content" in the next release. (I picked "post-body" since that seemed the most common in templates.)

In the mean time, you can always "over-ride" the present default by explicitly setting:

PostItemDiv = "post-body";

before the PopMarks! script is loaded.

@Venkataramani: Thanks for having a look at this ... I'm not sure what answer is either. I think apostrophes tend to crop up quite frequently in English too. I've googled around a bit without joy.

<    >
For Wordpress:

<script type="text/javascript">
makeMark('<?php the_permalink() ?>', '<?php the_title(); ?>', '<?php the_time(' F jS, Y') ?>', '');
</script>


Hope you like.

<    >
Anonymous Sociologist said...
What a cool tool. Can you take a look at my implementation. One problem I have is the width of the bookmarking box. How could I reduce this so it fits in the content window?

<    >
Anonymous Alex said...
Where do I put this code?

< div class="post-body" ><$BlogItemBody$>< /div >(Without spaces)
Is it the html template? Or is it the post template, because when I do that, all it says is <$BlogItemBody$> in the post.

<    >
Blogger Greg said...
Yeah, it's the post template. These instructions are for the "old" Blogger. The "new" Blogger has different template tags.

The basics should work okay; you'll just need to find out the "new" Blogger equivalent of that tag is ie the div that's got the actual body of your post in it.

<    >
Anonymous Alex said...
OK, this is what I have:
< div class="post-body" >< data:post.title/ >< /div >
As my post template, and then in my Template HTML, I have:


< script type="text/javascript" >
// set PopMarks parameters

blogUrl ='mybloghere.com';
blogFeed ='mybloghere.com/feeds';
boxColBG = 'darkgreen';
popAnchor = 'popmarks+set1';
promptStr = 'Test";
activURL = 'http://www.geocities.com/ycorret/popmarks-icons/popmarks2-yellow24.png';
< /script>

< script type="text/javascript" src=" http://ghill.customer.netspace.net.au/popmarks/popmarks-v02.js">
< /script>


Right after the < head > tag, and then I take

< script type="text/javascript">
makeMark('< data:post.url/>', '< data:post.title/>', '< BlogDateHeader>< $BlogDateHeaderDate$>< /BlogDateHeader>', '');
< /script>

And put it in my post, I'm not sure what the equivalent of these are:
< BlogDateHeader>< $BlogDateHeaderDate$>< /BlogDateHeader>',
but the problem is, it doesn't even show anything when I preview it.

<    >
Blogger Greg said...
That's weird. I'm afraid I'm not at all knowledgable about Blogger's current tag/template system. Getting the date of the post shouldn't be too hard though; it's usually printed above every post.

Still, do you get any JavaScript errors (check console)? When you publish a page with this code, can you see the function call in the resulting HTML (check view source)?

<    >
Anonymous Alex said...
This is what my post source looks like.
< div class="post-body entry-content">
< p>< /p>< div class="post-body">< data:post.title>< /data:post.title>< /div>< br>< script type="text/javascript">< br />makeMark('< data:post.url/>', '< data:post.title/>', '< blogdateheader>< $BlogDateHeaderDate$>< /blogdateheader>', '');< br />< /script>
< div style="clear: both;">< /div>
< /div>
< div class="post-footer">
< p class="post-footer-line post-footer-line-1">< span class="post-author vcard">

It doesn't show any javascript running, only the code. I don't think that the template tags I don't have is the problem, so I'm not sure what to do.

<    >
Blogger Greg said...
OK, I didn't understand your comment about "only the code".

Did you get any JavaScript errors? When you View->Source, is the JavaScript visible in the page that Blogger is serving up?

I'm not sure why you've got HTML markup (the BRs) inside your script block. I imagine this would throw errors.

Perhaps the best thing to do is look at examples of embedding scripts into the new templating system. Try our old friend Singpolyma.

<    >
Anonymous Alex said...
Those < br> tags don't make sense either because the script wouldn't run, but the thing is, it might be a setting or something, but blogger keeps closing tags, and adding things in my code. When I put my < data:post.body/> tag in the template, and make a post, blogger has already changed the tag, and it becomes: < data:post.body>< /data:post.body>
Which isn't what I even wanted.

<    >
Anonymous Alex said...
I think I got it to work, but when I click a bookmark thing, the url and title is written as < data:post.url>. Do you know where I can find these new blogger template codes?

<    >
Blogger Joshua Nestor said...
Try something like this:

..." + data:post.url + "...

Links to this post:

Create a Link


eXTReMe Tracker