As you may see on the right, I’ve written a small script that also you to embed your latest blips from Blipfoto on a blog or website. Follow the instructions below to do the same on your site. You can have it up and running very quickly.
1. Get an API Key
Your site needs to have an API key to enable it to contact Blipfoto and identify itself. There is a simple form to fill in here. Once you have completed that, you’ll get an API key. It’s a long string of letters and numbers. Keep that handy, you’ll need that in a minute.
Note that the API key will expire after a month. Once everything is setup and working to you can make everything ‘live’ – it will get reviewed and your key will be made permanent.
2. Add the Code To Your Site
Step 1
Download this Javascript file.
Then edit it to put your API key and your username as the variables at the top, viz:
var apikey="<API Key>"; var username="<username>"; var numBlips=1;
numBlips is the number of blips you want to display. They will be displayed as a column, one on top of the other.
Save the updated file as blipfoto.js and upload to your site.
Step 2
Add this script to the page you want to display the thumbnail on by adding the following between the <head> & </head> tags. If you’re not sure, put it immediately before the </head> tag.
<script src="blipfoto.js"></script>
Note, if you are using the script it a blog or similar, you want to specify the full URL path to the script file so you don’t have issues with directory structures etc.
Step 3
Find where on your site you want to put the thumbnail(s) and insert the following code.
<div id='latestblip'></div>
Step 4
Find the <body> tag of your page and add:
onLoad="loadThumbnail()"
so it looks something like:
<body onLoad="loadThumbnail()">
Your body tag may already have other tags, you can add the onLoad alongside those. If you already have an onLoad trigger, just add the call to loadThumbnail() with a ‘;’ in between.
That’s it! Load the page and your latest blip should appear as a thumbnail which is linked directly to the page on Blipfoto.
Once you’re happy everything is working, go back to your application page on Blipfoto and indicate you’re ready to go live by clicking the button. Your site will then be reviewed and, all being well, your API key made permanently active.
You can add any styles you like to the <div> the image appears in and, if you’re the tinkering sort, you can play with the code that generate the thumbnail code to do something else or even add more info from the API such as number of views etc.
Thanks to Graham and the guys at Blipfoto for their help putting this together.
If you have any issues or thoughts on other stuff to do with this then give me a shout, either by email or a comment below.
Adding onload to the body tag seems a bit old fashioned, couldn’t you change the script to fire the request itself once the document is loaded?
yeah, I had a jQuery version working like that but I decided it didn’t need jQuery – when I stripped that out I got a bit lazy 🙂
I’ll give it a tweak…
Many thanks for this. Have it working now. Great idea as it allows me to link both my site to Blipfoto and WordPress.