Copy and paste "Huffduff this" code?

  • 1
  • Question
  • Updated 3 years ago
  • Answered
What's the best way to add a "Huffduff This"-style button to my posts and podcasts pages? Should I deconstruct the bookmarklet and manually add that to an "AddThis" type service? Would love to have an easy chunk of Copy & Paste HTML/JS I could drop into my templates. Because I am unbelievably lazy and dim.

Thanks. I love you, Adactio. You're a good one.
Photo of Merlin Mann

Merlin Mann

  • 1 Post
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of adactio

adactio, Official Rep

  • 232 Posts
  • 42 Reply Likes
Now *that* is a very good question. I've got to figure out a way to make this easy for publishers.

For now, you can use this ridiculously clunky structure for the href of a "huffduff this" URL:

http://huffduffer.com/add?bookmark[ur... URL of MP3 file here}&bookmark[title]={insert url-encoded title here}&bookmark[description]={insert url-encoded description here}&bookmark[tags]={insert tags here}

...but that's pretty ridiculous.

Here's what I'll do: I'll create a service at this URL:

http://huffduffer.com/add?url=referrer

...and I'll get it to look for the MP3 file in the referring page.

I'll get on that right now.

P.S. I love you too.
Photo of adactio

adactio, Official Rep

  • 232 Posts
  • 42 Reply Likes
Official Response
Okay. Done.

The URL is slightly different than what I initially said:

http://huffduffer.com/add?page=referrer

(or http://huffduffer.com/add?page=referer if you want to maintain the tradition started by Sir Timbo of misspelling that particular HTTP header).

So on the page with your MP3 file, just add:


<a href="http://huffduffer.com/add?page=referrer">
Huffduff it
</a>


Whatever link text you are using for the MP3 file will be passed as the title, so if use "download" or something like that for the link text, that (unfortunately) will be passed as the title field (but the person huffduffing can change that).

Next step for me: if the link text *is* something like "download" or "download mp3" or anything like that, to use the title of the page as the title for huffduffing.

Anyway, for now, just drop that line of markup into your templates and you should be good to go.
Photo of Erik Hess

Erik Hess

  • 1 Post
  • 0 Reply Likes
I was able to rig up a simple "Huffduff It!" button by embedding a slight variation of the bookmarklet in the <head> section of our site's core HTML template:



<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#huffduffer").click(function() {
window.open('http://huffduffer.com/add?popup=true&page='+encodeURIComponent(location.href),'huffduff','scrollbars=1,status=0,resizable=1,location=0,toolbar=0,width=360,height=480');
});
});
</script>


Then when a visitor clicks on any element with id="huffduffer" it launches a pop up that works just like the bookmarklet, even if the visitor doesn't have it installed. If they're not logged in, they get a login prompt.

The benefit over the solution above is that (like the bookmarklet) it picks up on the page title, description and keyword meta tags, prefilling the submission fields and download URL for your visitors.

More details in the final section of this post: Optimizing Your Podcast Site for Huffduffer

Live example here: http://technicaldifficulties.us