Making Flickr Badges Open New Window

Posted Monday, August 31, 2009 11:24:05 AM
I recently added a Flickr Badge to the header of my blog and really loved everything about it except that... there was no way to have it open the photos in a new window when they were clicked. Because the code was written by Flickr I had no way to modify it before it was created, but I did afterwards. Here is the code Flickr gave me to add the badge to my site minus some extra "fluff" code that I've removed for the sake of shortening this post:
<table cellpadding="0" cellspacing="0" border="0" id="flickr_badge_wrapper">
	<tr>
	<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?
	count=6&display=random&size=s&layout=h&source=user_set&user=21767427%40N05
	&set=72157607489449250&context=in%2Fset-72157607489449250%2F"></script>
	</tr>
</table>

So, I simply wrote a script that would loop back through all of the links within the table "flickr_badge_wrapper" and change their "target" property to "_blank". Here is the code.
<script>
<!--
	var oFlickrTable = document.getElementById("flickr_badge_wrapper");

	oFlickrBadgePhotos = oFlickrTable.getElementsByTagName("a");

	for (nBadgePhoto = 0; nBadgePhoto < oFlickrBadgePhotos.length; nBadgePhoto++) {

		oFlickrBadgePhotos[nBadgePhoto].target = "_blank";
		
	}
//-->
</script>

Feel free to use this code yourself, just be sure that if you've renamed "flickr_badge_wrapper" (or Flickr changed the name by the time you read this article) that you update my code. Enjoy!
Related Articles
Making Flickr Badges Open New Window - jQuery Edition (Tuesday, October 26, 2010 8:55:56 AM)
 
Comments: 34 (View | Post)
Categories: Most Popular, Technical

Post A Comment

View Comments

There are 34 comments on this article
Vasilis (1 year ago)
You RULE !!!
Artur Tavares (1 year ago)
Sir, you're a genius!!! Thank you so much, that's exactly what I was looking for! Have a great day!
Mich (4 years ago)
hi !
Thank you, i adapted your code for my WP site :

<script type="text/javascript" >

var oFlickrTable = document.getElementsByClassName("flickwrap");//now there is only class parameter
oFlickrBadgePhotos = oFlickrTable[0].getElementsByTagName("a");
for (nBadgePhoto = 0; nBadgePhoto < oFlickrBadgePhotos.length; nBadgePhoto++) {

oFlickrBadgePhotos[nBadgePhoto].target = "_blank";
}

</script>
popy5 (5 years ago)
BWonderful! Thank you so much!
I used this code on my site and it worked like a charm.
Thanks for sharing this code!
David (5 years ago)
Awesome! Thanks for posting this!
Jacquii Cooke (5 years ago)
Lovely bit of code. I'm using it at http://PoteQuotes.com = Thanks so much!
Felicia (5 years ago)
Thanks so much!!! Worked like a charm.
JL Johnson (5 years ago)
You sir, are genius! Used this over at aviationgeek.net
Chris (5 years ago)
Worked perfectly.
Thanks!
Heather (6 years ago)
It worked! Thank you so much:)
Jared (6 years ago)
Super helpful - Cheers
Adam (6 years ago)
Your a star!
Thank you
Alan North (7 years ago)
Adam, Very many thanks. Works a treat...I will use it a lot.
Thanks also for the family photos. As a doting grandfather I have enjoyed them.
noe4laj (7 years ago)
Thanks for posting this...by far the easiest explanation of how to resolve this issue that I found. Worked like a charm!
Studio Hyperset, Inc. (7 years ago)
Super helpful. Thanks!
Ron (7 years ago)
Adam, thanks for helping me out with not only this code but the additional code!!

Adding to the last line...

oFlickrBadgePhotos[nBadgePhoto].href = "http://www.flickr.com/photos/username/collections/";

..still allows for random image display yet also brings the user to the main collections page no matter which image they click. Thanks again for giving me this additional piece of code.

Ron
anthony (7 years ago)
now that was easy
Alex (7 years ago)
Super!
Shivangi (7 years ago)
Thanks a lot
This Helped me
g.s. (7 years ago)
Thanks!
Tavis Steenbeke (7 years ago)
Do you know how to do this for LinkedIn badge on wordpress?
Christa (7 years ago)
Seriously Thanks. I looked for the answer to this for several hours!
Miguel Neto, Rio de Janeiro Br (7 years ago)
Muito bom! (Very Good!)
It works! But only if put it after flickr's script...
(Funciona! Mas somente se for colocado após o script do Flickr).
Muito obrigado (Thanks!)
prophet (8 years ago)
SUPERCOOL!!!
Thank you man, exactyle what i was looking for.
used it on my new blog
http://www.whackpackers.de

Thanks
Sandy (8 years ago)
Wonderful! Thank you so much!
Janderson (8 years ago)
Thank you very much!
Eugenio (8 years ago)
Great script! It works [but only if you put it after flickr's script] and it is fantastic.

Thank you,
Eugenio
Paul Altobelli (8 years ago)
I used this code on my site and it worked like a charm. Thank you!
Victor (8 years ago)
This patch works great.
Kate (8 years ago)
I'd been annoyed for ages by the flickr badge making people leave my site and just looked up your solution now. Works great, thanks!
Adam Lewis (8 years ago)
Sounds like there may be an issue with an unclosed tag somewhere in your HTML. If you'd like, drop me and email with your code and/or the URL of the page it's on and I'll take a peek.
justin bieber (8 years ago)
It only works for the first picture. The rests open in the same window.
Mirta (8 years ago)
Well done! ;)
Elaine (8 years ago)
awesome. thanks for this.