02 October, 2006

How to Have Flickr Badge Link Open in New Window

If you have a Flickr account, as well as a personal homepage or blog elsewhere, it is possible to add a "Flickr badge" to your homepage or blog. A "Flickr badge" is simply made up of one or more photos from your Flickr collection (either the most recent or just a random selection). To get the script fragment for adding this, sign in to your Flickr account, go to the site map, and follow the link for "add a Flickr badge to your website". After a bit of configuring (number of photos, layout style, etc.), you will be presented with the code that you can copy and paste elsewhere.

When a visitor to your website clicks on your Flickr badge, he/she will be taken to the displayed photo on the Flickr page itself. However, one downside of this is that the Flickr page will be loaded in the same window, which may not be what you desire. (I am not too sure about this, but if your website contains frames, the link may actually open in its enclosing frame, and that would not be ideal.)

As the code fragment for displaying the Flickr badge is solely Javascript, there is no HTML anchor element for you to add a target attribute to. Hence, to have the link open in a new window, a bit of a Javascript hack is needed.

The following is the code fragment for displaying the Flickr badge. Yours may differ according to the selections you made when generating it (and obviously, your user ID would be different from mine).


Just below that, add the following:

<script type='text/javascript'>
    var flickrBadgeImage1Div
        = document.getElementById('flickr_badge_image1');
    var a = flickrBadgeImage1Div.firstChild;
    a.setAttribute('target', '_new');

Basically, this additional Javascript code fragment looks for the correct anchor element, and adds the target attribute to it. How do you know that the div element that encloses the anchor element has an id of flickr_badge_image1? Simply open your website in Firefox, use of the DOM Inspector, and work your way down to the DOM element that contains the Flickr badge.


Robert said...

An excellent and easy to implement fix to the new window issue with Flickr badges.

I Dugg it for you with this comment:

This is an easy modification for something that you see in Flickr forums quite often. The only extra thing you must do (depending upon how many images you have in your Flickr badge) is to add multiple instances of the fix and change "flickr_badge_image1" to "flickr_badge_image2", and so on.

Thanks for sharing it. Much appreciated.

Unknown said...
This comment has been removed by the author.
Unknown said...

Thanks for the snippet.

To make things neater, when working with multiple images, I've placed the code in a seperate javascript file, called flickr.js, as there was too much javascript sitting on my page.

The code was replaced with an include link to the javascript file, Immediately after the flickr script.

See code below:

<-Javascript Begins->

// Flickr JavaScript Document

//Image 1
var flickrBadgeImage1Div
= document.getElementById('flickr_badge_image1');
var a = flickrBadgeImage1Div.firstChild;
a.setAttribute('target', '_new');

//Image 2
var flickrBadgeImage2Div
= document.getElementById('flickr_badge_image2');
var a = flickrBadgeImage2Div.firstChild;
a.setAttribute('target', '_new');

//Image 3
var flickrBadgeImage3Div
= document.getElementById('flickr_badge_image3');
var a = flickrBadgeImage3Div.firstChild;
a.setAttribute('target', '_new');


... and so on.

Michael Weinberg said...

If you make a separate javascript file with 10 instances of this code, it should cover any instance, since flickr's badge script won't give you more than 10 images, even if you edit the code to request more.

A said...

Thanks! This worked great!

Unknown said...

I know this post is over a year old, but since the basic code provided a quick fix for one of my clients, I thought I'd upload a quick update that loops through to add the target attribute without having to add multiple instances of the original hack for each thumbnail:

var flickrNumImgs = 5;
for ( i=1;i<=flickrNumImgs;i++ ) {
var flickrBadgeImage1Div = document.getElementById('flickr_badge_image'+i);
var a = flickrBadgeImage1Div.firstChild;
a.setAttribute('target', '_new');

Anonymous said...

i cant get this code to work is this post still alve?

Anonymous said...

worked great! thanks! :)

Unknown said...

Another way to do this is to use jQuery along with:

$("#flickr_badge_wrapper a").attr("target", "_blank");

This way you can have as many instances of the badge on one page and they'll all work.

Anonymous said...

Thanks smfoushee!

kingscrusher said...

Thank you - This was an annoying problem that cicking an image changed the whole page.

There is another thing I did to customise it for Chessworld.net player homepages to use Flickr - I have a default of 3 images, and I didn't like the potential for lots of vertical scrolling.

So I put all of the script within the following div to restrict height and provide a scroller:

DIV STYLE='overflow: auto; width: 350px; height: 250; border-right: 0px gray solid; border-top: 0px gray solid; border-left: 0px gray solid; border-bottom: 0px gray solid; padding:0px; margin: 0px'>"

(all the script goes in here)

(close DIV)

Best wishes

Anonymous said...

Thanks to all who contributed to this post.Finally went with fmfoushee's update and it worked like a charm.

DWL said...

@developdaly jquery version is wicked. Thanks!

Houston said...

Thanks to smfoushee for the great code! Worked like a charm!

Zeaks said...

Finally, a solution that works, thanks alot!

Anonymous said...

top [url=http://www.001casino.com/]free casino games[/url] check the latest [url=http://www.casinolasvegass.com/]free casino bonus[/url] unshackled no store bonus at the best [url=http://www.baywatchcasino.com/]baywatchcasino

Anonymous said...

Spot on with this write-up, I honestly believe
this web site needs a great deal more attention. I'll probably
be returning to read more, thanks for the information!

Take a look at my web blog; spanish teachers

Anonymous said...

Howdy would you mind sharing which blog platform you're working with?
I'm planning to start my own blog soon but I'm having a difficult time
choosing between BlogEngine/Wordpress/B2evolution and Drupal.
The reason I ask is because your design and style seems different then most blogs and I'm
looking for something completely unique.
P.S My apologies for being off-topic but I had to ask!

My blog :: Christian Louboutin Discount

Anonymous said...

Hi there, just became aware of your blog through Google, and found that it is really informative.
I am gonna watch out for brussels. I'll appreciate if you continue this
in future. Numerous people will be benefited from
your writing. Cheers!

my web-site: angielski dla dzieci Zielona Góra

Anonymous said...

Hi, i read your blog occasionally and i own a similar one
and i was just curious if you get a lot of spam remarks?
If so how do you stop it, any plugin or anything you can recommend?
I get so much lately it's driving me mad so any assistance is very much

my site: Game of War Fire Age Cheats

Anonymous said...

Furthermore, my experience includes identifying the competitive advantage for any few different companies
and crafting that advantage into a online marketing strategy to develop new company.
An HVAC repair business is most often started by way of a technician who has learned
the trade through previous employment. Donnie Jonston is the author of this informative article about
how you can make funds on Ebay Donnie has years of work experience being a writer and in addition working with drop shippers
in a very variety of entrepreneurial ventures.

Feel free to visit my homepage: http://hustleblvd.com/?p=35

Anonymous said...

Hi everyone, it's my first pay a visit at this web site, and post is really fruitful designed for me, keep up posting such articles.

Stop by my blog: web page ()

Anonymous said...

Redhead lady knows find out how to suck Attractive ebony stud fills the bronzed girl with cumshot Girl spreads legs and caresses pussy Lady performs rodeo
on fat rod Longhaired woman gets cock in vagina Passionate lady loves sucking cocks Pamela Anderson, owing partly to a naughty self-made honeymoon video
and its unusual route onto the Net, owns one of the hottest names on the Internet.
All across the Web, websites use the name of the previous "Baywatch" star and estranged spouse of rock drummer Tommy Lee to attract
guests to their pages. From Pamela Anderson's own official website to thousands of X-rated sites,
she's the Internet's prime drawing card.' Please use Facebook Connect (under) so as to add your questions / comments - the most effective questions and answers will likely be added to the page.

Feel free to visit my web page; sexy blonde porn movies

Anonymous said...

I'm gone to tell my little brother, that he should also visit this
weblog on regular basis to obtain updated from newest news update.

My web page ... war thunder gameplay pc (warthunderreviewngameplay.blogspot.com)

Anonymous said...

Oakley Retro Five The 5 most important words to get a healthy partnership: I apologize and you're simply appropriate. [url=http://aibdct.org/members/designer/57.html]Discounted Oakleys[/url] Grandpa's illness held him from the springtime as well as on, 1 week through 7 days, via summer season. Seem, if you do not head, My spouse and i mentioned crossly when Wendy caught up beside me, I'd like by yourself these days. And that i may luve thee still, oh my gosh,While the glass beads o' living shall run. oakley gascan yellow lense My spouse and i sat there inside the soil, with that large old tree, for your greatest time trying to suit all of the butterfly items back together again so I could bury these total, but it had been too hard to accomplish.

Oakley Flak Replacement Lenses Afterwards your evening, My partner and i regarded as producing Jimmy a letter. [url=http://thelifevalley.com/css/151.html]Oakley Polished Black[/url] Next, contracting my personal buddy's side, I provide a prayer for her and myself and every one of the particular mere deadly women who bumble their particular distance to this kind of holiest involving callings. They had been thoughtful as well as introspective plus it drew me inside. I understand you're upset currently, yet issues works out with everybody. vented sunglasses Everything gave the impression to hold recollections through the past year, and so i has been mindful not to throw away anything at all together with emotional price.

Oakley Frogskin Purple You're not necessarily going to think this specific, but I believe it's Russell Moore! [url=http://texasforgeandfittings.net/products/172.html]Oakleyclearence Sunglases[/url] While got dad at any time neared me as a possible grownup for suggestions? the following would be a in time my entire life while beauty designed something special if you ask me. It had been seven days ahead of senior high school graduating while i discovered your be aware. oakley sunglass for sale I know,your woman claims, forget about sleeping in in week-ends, forget about spontaneous vacations.