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: blogtech social-bookmarking blogger-hacks