An Easy Geek Holiday Wishlist

Posted

Every year the holidays edge closer and I am just awful at letting my family know what I’d like for gifts, a wishlist if you will. So a few years back I decided to somewhat automate the process. As I work online I generally see things I’d like on different sites and bookmark them to potentially purchase at a later date, I started tagging links with xmas2010 that year and then I could easily pull the list out and email it to my relatives, then it struck me, I’m taking too many steps there, I should just aggregate that info on my personal site. I’ve used this method with really good success and decided I should let you know about it too!

A few folks asked me for a demo of this, and here you go indiejack.me/#xmas, feel free to buy me anything on here!

Without further ado, a Geeks Holiday Wishlist!

Okay, so let’s start by setting up a file that will return some links.

PHP

1
2
3
4
5
<?php
  // substitute $USERNAME for, well, your username
  $term = $_GET['term'];
  echo file_get_contents("http://feeds.pinboard.in/json/v1/u:$USERNAME/t:$term?count=100");
?>

This demo is using Pinboard.in however the API is the same as delicious.com

Great, now let’s work up the JavaScript that we’ll use to pull it into our page! This is pretty simple, doesn’t need to be a function but this does make it reusable all over your site.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
/*
quick note, the entry.n is the description in the feed
which you can use to post a price for potential gifters!
*/
function pinboard(searchTerm) {
  $.getJSON('/js/pinboard.php?term='+searchTerm, function(data){ // term will be the tag in del.icio.us
    $.each(data, function(i, entry) {
      $('#pinboard').append('<div class="wishlist"><a href="'+ entry.u +'" style="border:0">'+ entry.d +'</a><br />$'+ entry.n +'</div>');
    });
    $('#pinboard').append('<br clear="all" />');
  });
}

Finally for the markup on the page you can toss a container in there with pinboard as an ID and then call the pinboard(‘yourtag’) function in your javascript.

Example HTML Markup

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!doctype html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>SITE TITLE</title>
  </head>
  <body>
    <section>
      <header role="banner">
        <hgroup>
          <h1><a href="">SITE TITLE</a></h1>
          <h2>Site Tagline</h2>
        </hgroup>
        <nav>
          <ul role="navigation">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
          </ul>
        </nav>
      </header>
      <article role="main">
        <header>
          <h3>My Wishlist</h3>
          <time datetime="2012-10-29">Updated: October 29, 2012</time>
        </header>
        <section id="pinboard">
         
        </section>
      </article>
      <aside>
        <h4>Sidebar</h4>
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </aside>
      <footer>&copy;2012 Site Title. All Rights Reserved.</footer>
    </section>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script lang="text/javascript">
  function pinboard(searchTerm) {
    $.getJSON('/js/pinboard.php?term='+searchTerm, function(data){
      $.each(data, function(i, entry) {
        $('#pinboard').append('<div class="wishlist"><a href="'+ entry.u +'" style="border:0">'+ entry.d +'</a><br />$'+ entry.n +'</div>');
      });
      $('#pinboard').append('<br clear="all" />');
    });
  }
  pinboard('xmas2012');
  </script>
  </body>
</html>

And now for good measure, here’s some quick baseline styles that may help (this is based on a parent container of around 600px).

1
2
3
4
5
6
7
8
9
10
11
.wishlist {
  border: 1px solid #fff;
  float: left;
  margin: 5px;
  padding: 5px;
  position: relative;
  width: 252px;
}
.wishlist:last-of-type {
  clear: both;
}

There you have it, hopefully this helps get you rolling for the upcoming holiday season!

Share if you care, your fellow Geeks will thank you!

One comment on “An Easy Geek Holiday Wishlist”

Leave a Reply