Flickr is one of the most popular photo hosting sites around. You can post your photos, add notes to them, put them in collections and sets. You can interact socially with other photographers with comments and groups and discussions. You can post photos to your blog and send them to be bookmarked on Delicious. But that is not all you can do.
You can create widgets to display your photos on your blog in interesting ways. Flickr calls this a badge. You can create an HTML badge or a Javascript badge and add them to your blog. I created a couple of different sized badges that I provide to other bloggers so they can share my Photo-A-Day photos on their blog. IT is a really easy thing to do. First you have to find it. Scroll to the bottom of your Flickr page and locate the link to Tools.
From there you are going to go to the page where you can download the Flickr uploader and other tools for posting photos to Flickr, but what about expanding Flickr. For that you need to locate the link to Hey! Where is the badge?.
At this point you are presented with a choice. Will you create an HTML badge or a Javascript badge. Let’s opt for the HTML badge, more compatible with many of the free services that won’t allow javascript. Pick your poison (HTML or javascript) and then we can pick the flavor (content).
You can now choose to display your photos, a group’s photos or everyone’s photos. If you are looking to just display photos from your own set then you can choose that set. I decided that I wanted to display all of my photos that were tagged with “photo-a-day”
Once you’ve chosen the content for your badge you are presented with options to choose how that badge is going to look, will it be vertical or horizontal, will you use square images, thumbnails or mid-size images. How many images would you like to display (1,3,5 or 10). Do you want the most recent or a random selection of images? And, do you want your buddy icon (avatar) on the badge. You can also junk everything and style the badge by yourself, but that would be in another tutorial)
Once you have made your selections you can then choose the colors for the badge. You can change the background, border, links and text. You can also remove the background and border. This is a great way to match your new Flickr badge to your current blog theme. Once this is complete you can get the code so that you can post it to your site.
On the code page all you can do is copy the code. You cannot edit the code on this page because it will always revert to the code that Flickr supplies. So copy the code and then post it to your blog, there you can make any edits that you wish. Here is one of the options that people can post to their own blogs of my final badge.
I tweaked the code a bit myself and can probably do much more with CSS however for the basic user going through the steps should take care of most people’s needs.
Comments
Post a Comment