Apr 14
Flickr badge W3C valid
2006 at 07.00 am posted by Veerle Pieters
Some of you might be interested in how the Flickr pictures are implemented on my blog. I use the HTML version of the Flickr badge. After completing the 5 steps you’ll get the code that you’ll need to implement in your site. As we like to keep things clean and W3C valid, we need to do some ‘house cleaning’ first. The styles that Flickr provide are of no use to me so I throw them out and we’ll control everything in our own (external) stylesheet…
In fact, the only thing I need from the code Flickr provides is the script:
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=3&display=latest&size=s&layout=x&source=user&user=76746199%40N00"></script>
Even this line of code needs a brush up. The ampersands need to be changed into & to make sure it's all valid XHTML code. Next I need to change "count=3"into "count=4" since I want 4 pictures to show up. You can pick any number you want.
The code for the script
This is the code of the script I use:
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&display=latest&size=s&layout=x&source=user&user=76746199%40N00"></script>
The XHTML code
Next step is implementing this script in the XHTML code of my page. This is the code for my flickrness corner:
<div id="flickr"><h2>Flickrness</h2><script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&..."></script></div>
The CSS code
Next is giving this code the proper CSS styles. First I start with the #flickr div container:
#flickr {background:url(./graphics/flickerness.gif) no-repeat;width:214px;height:154 px;height:168px;padding:14px 0 0 50px;padding:0 0 0 50px;margin-top:40px;}
The flickrness text is placed as a background image. Then there is the exact height and width and the padding and margin values.
#flickr h2 {position:absolute;left:-300px;top:-300px;}
The heading 2 text is thrown out of the window by using negative left and top coordinates in combination with absolute positioning. The heading text is there in the code but it won't appear in the layout. This way people who use a text reader or visit the site with the styles switched off, will still be able to read the heading text.
#flickr img {#flickr a img {margin:0 0px 8px 8px;background:#3f4e4e;padding:4px;width:62px;height:62px;}
float:left;
Onto the styling of the Flickr images. The dimensions of the images are also defined in the CSS. The border around them is achieved by using a padding of 4 pixels and a background color. The space between the images is created by using left and bottom margin of 8 pixels. I use float:left to make them align left.
Update: On Sept. 4th '08 Flickr updated their script by adding a 1 px image which gets overwritten by the CSS above and messes up things. To fix it you need to add an 'a' element before the 'img'. So instead of #flickr img we now have to use #flickr a img. Because of the 1px image, all 4 Flickr thumbnails jump a bit lower in position, so I have to set the top padding of the #flickr div to 0 and adjust the height from 154 to 168 px (adding 14 px of the top padding).
That's just a tiny part of the template creation of my blog, but I promise we'll get deeper into this in my next post. So stay tuned ;)
43served
1
Hiya Veerle,
Wow I’m the first to post!!!
Nice little tutorial there. I personally don’t use Flickr but am looking into possibly using it to store images online. Thanks for the tutorial on how to integrate it with EE using CSS. Fantastic!!
You are doing a fantastic job on this website and with each post you place on here it just keeps on getting better and better.
Can’t wait for the next installment in your EE series. I am looking at using EE for a site that I am going to be building as it seems to be the way to go if you ask me.
Once again, fantastic writing and thanks.
Best wishes,
Mark
X
2
I have been wondering how that works thank you. I’ll mess with that tonight.
:)
3
My only gribe about it is that those who use the free version of Wordpress aren’t able to implment such fun and nifty things into their blog.
4
Thank you, I’ve just searched for something like this.
My idea is to also put a <noscript> between the <script>-Tags with a link to the flickr-Account. It’s for the Users with JavaScript turned off and maybe an search engine.
5
I wonder what people like about flickr so much, couldn’t you just as easily integrate a gallery in EE? or something like that..
Grts,
—Th
6
“My only gripe about it is that those who use the free version of Wordpress aren’t able to implment such fun and nifty things into their blog.”
Why not? I don’t see what’s stopped you.
7
Correct me if I’m wrong, but all versions of WordPress are free.
Nice write-up Veerle. Like you, I only use the actual script on my page. If anyone’s curious how I did the hover effects on my Flickr photos, you can check out the tutorial I wrote here.
8
Thanks so much for putting this guide up: I have been trying to work out how to do it ever since I saw your site!
9
Great stuff. It’s always nice to read how someone else does things.
John Topley: I assume they mean the wordpress.com service.
10
Thanks, very usefull! Flickr should link to this, or provide better badge creation.
11
Thanks a million Veerle. I thought I was the only one who couldn’t find it. I’m still exploring flicker to see what else they offer but this tutorial will help immensely. I just finished my flash portfolio if you’ve got some time take a look. Kurt Potts Digitalbook
12
The best part of that instruction is the 4 images option. That isn’t explained over at flickr.com, only 3, 5 or more is given as an option. Thankfully the script can be easily modified.
13
Great write up, and a truly lovely site. I hate asking questions on why one technique is chosen over another as they usually sound snide, but I have such a question, and I’m absolutely not questioning you or trying to be a showman - just for clarification, since my maternal grandmother was 40-grit sandpaper. =)
The use of the absolute positioning outside of the view-space is the thing - why use the position of the element instead of just using the display property? I would think that:
#flickr h2 {display: none;
}
would have the same effect. Of course, I could still be so new that I think this works in more than Safari and the Mozilla hatchlings. I’ve got it working on a test blog that I’ve been working on, and it seems to be working in IE, although that could easily be a happy coincidence of another bug covering up this problem - I’ve had that happen, too.
14
@ Kevin Hamm: You are right that it works but the display none property is also being used for bad things to hide popular words for search engines and the possibility is very real that Google or any other engines will punish this behavior in the future. It doesn’t happen right now but there is a very real threat. So that’s why I use the - thing just to be safe. You have to see it like this: Google is like a text reader and if you use display none it might skip it in the future, and it could very well be skipped in a text reader too so that’s not good also.
15
I hadn’t considered that because I figured that any site using CSS rather than inline styles wouldn’t have to worry because the indexing of a page hadn’t progressed to the point where sub-pages and linked items, regardless of the type, don’t affect the indexing of a pages contents. Again, newbie, and I often presume the most reasonable to me, which is not always a reflection of anyone else’s reality at all.
If you had conflicting element styles in multiple CSS documents, all linked to the main page, how can that be reconciled? If in the ‘screen’ document you used the “
display:none;” style but in the ‘print’ CSS document you used “font-size: 18px; color: #121298; background-image: url(print-background.png); background-repeat: no-repeat;” would the index create a weighted system, only consider one of the CSS documents, or perhaps do something else completely unexpected?16
Also,
display: none;hides some screen readers to read the hidden content.17
Responding to the
display: none;being adversely used in screen readers: If the style was an inline style tag, a bit of the code of the HTML document, I would agree it was possible that this would be the case, but not probable for a couple of reasons.First would be that screen readers in use today have logic in place to ignore much of the style tags used throughout non-semantic HTML. They have to, otherwise 90% of the reading would be ‘TABLE’, ‘TABLE ROW”, etc., which wouldn’t exactly lead to understanding. A good portion of that last 10% could easily be “COLOR, RED” and the like, given the horrible code out there. (myspace.com, I’m looking at you…)
But while that logic is in place to remove style tags from the text that gets read aloud, the screen-reader must also, to some extent, assess the table structure to understand the logical flow of the page and try to communicate that to the reader. So after it removes all the style tags except those that can be communicated verbally, like em and strong, why would it bother to assess the ‘display’ tag? And again, this is only true for non-semantic HTML documents.
Semantic (X)HTML linked to CSS for styles and structures is a different animal entirely. First, the HTML document’s code is easily read for content by humans, which is part of it’s wholesome goodness. The screen reader wouldn’t read the CSS document at the same time it reads the HTML document, obviously - can you imagine the cacophony? - and I would wonder that it would even download the CSS document at all. Why bother? CSS is style and structure, two things that when removed won’t destroy the ability of the content to be understood.
And without downloading the CSS, it would never see the ‘display’ property setting, and would then read the ‘h2’ element along with the rest of the page just as it should. This would mean that Veerle’s blog pages would be visual and aural analogues, which is the point, right?
Given that the CSS is explicitly for style and structure, not content, it begs the question: Why would a program designed to remove style and structure in order to effectively communicate the content of an HTML document bother with the linked CSS at all? That seems beyond odd to me. Do they really do this?
18
Thx! Great little tutorial. I’ve used it on my homepage. Works flawless.
19
And this is why I like WordPress - flickrRSS.
20
Wow. That seems cool but extremely complicated at the same time. I will try it though.
21
I wish I was brainy enough to make use of this info (though I thoroughly enjoyed reading the posts). Maybe I’ll be able to figure it out once I finish reading my magical CSS book? ;)
22
That goes for google’s search form as well. Took me near 20 minutes to get their code even XHTML transitional compliant.
23
WOW! And I thought I had a pretty cool web site. I was so mistaken. I keep my writing and other literary stuff at www.cesartorres.net, but after visiting your site, I am blown away. Not only do you have good content, luscious design and a good sense of humor, but your code is super clean and your styles divine.
I am flabberghasted. You are great. I will recommend this site to all my friends. I will even write about it in my site, www.cesartorres.net. GOOD JOB!
24
I’ve been using this for a while on my site (julianbh.com), and I’m wondering why you don’t make the tag self closing, like this:
<script ... /> instead of <script ...></script>
25
@Julian about empty script elements: Compatibility. If some browser fails to recognise the syntax for empty elements it might just consider everything that follows as part of the script… not everyone out there reads XML fluently.
About XHTML and [removed]. I recall reading that using [removed] in XML documents is illegal or indeed impossible in a true XML context. Which means that the flickr badge scripts shouldn’t work in XHTML documents. Please prove me wrong!
26
@Valter: That’s what I like about my blog, my readers are always fast :) Thanks Valter for beating me to it with your very clear explanation, couldn’t have said it any better :o)
27
Ah. Thanks.
28
Hi,
I just found this, right after asking you about the flickr photos on your site. Thanks!
29
grrreat :)
30
I saw this is the code that you provided:
<h2>Flickrness</h2>After looking up to the flicker badge on your site, I wondered whether you have a trick to make the text appear vertical or whether you just use css, set display to none, and use a background image for your vertical heading. How did you do that? (Oh, and your site looks amazing!)
31
Dominik said:
I use CSS, in other words the vertical text is replaced with a background image in the #flickr div container. The text in the XHTML code doesn’t appear in my layout because I give the h2 a position outside the browser window (top:-300px and left:-300px). You can use display:none to hide elements or text but if there are other options I prefer those, because chances are that certain screen readers will also ‘skip’ text that has a display:none style and I don’t want that to happen.
32
Hi Veerle,
You beat me to it with the answer, was exactly what I was going to say! I wanted to answer hoping that I was right as I wanted to try and help someone out for you to say thanks for all the hard work that you have put in to your site and for everything that you have given to everyone.
I know this isn’t exactly the right place to ask but I thought that someone might be able to help me with a little CSS quandary that I have. If I shouldn’t be asking in here then I apologize whole-heartedly and will understand if you need to delete this comment.
Could someone possibly take a look at this page - http://www.something2ad.com/test/H20_Page_Layout.html for me and with all your knowledge of CSS and EE possibly let me know how I would start to go about chopping it up for inclusion as maybe three templates for Expression Engine?
What I would like to be able to do is have a top header which will also include navigation buttons that will probably start underneath the left hand flag and then go across. I will then have the main white block in the middle and then the footer template. I’m thinking that I could probably (with a whole lot of work on my behalf!!) figure out most of it but it would probably take a long time (which I am prepared to do if needed) but the bit that is frustrating my head is the drop shadow. As I have faded out the shadow on the left and right sides and as I have no idea as to how long a page will be I was wondering if anyone had any clever ideas as to how I would know where AND how to place these in.
Please, as I said before, feel free to delete this post if I have been too forward in my questioning and I do apologize if I do offend anyone by asking in here it’s just that everyone is so helpful in here and I thought I would ask first.
Thank you for your time and efforts.
Best wishes,
Mark Bowen
33
Hi Veerle,
Forgot to mention in the last post that when I tried to post an answer to Dominic that your site said to me that I couldn’t post again until I waited for the standard 600 seconds (5 minutes) but I hadn’t even been on your site for about a day (I know naughty me!! :D ).
Just thought I would let you know in case there is a problem with people being able to post.
These two have gone through fine but I had real problems when I was trying to post to Dominics query.
Just thought I should let you know. Don’t know if anyone else has had that problem at all?
Best wishes,
Mark
34
u couldn’t do a tutorial on the flash badge could u?
i have been wanting to make the dimensions of the entire badge, and the individual components, i.e. the photos, bigger.
cheers
PS: no speaky techy, but do speaky photographee…
35
dude said:
Flash is not my thing so sorry :(
36
I got slammed for using negative positioning on my site. as soon as i removed the use of it, my site got higher in the google rankings again.
Scott
37
Just curious why you use padding to create the borders and not just use the border property on the image itself?
Lovely designed site by the way
38
Great article, that was interesting
39
Nice tutorial. I was going to write a similar tutorial. Actually i too made a similar badge for my blog based on an article in this link http://www.hicksdesign.co.uk/journal/flock-hickr
40
Great little tutorial! I’ve been using the Flickr badge for a while and hadn’t fixed the styles…you’re tutorial inspired me to get off my arse and fix it!
Thanks!
41
Why do browsers mess up on self closing [script] tags, but not on other self closing elements?
42
I’m trying to implement a FLICKR-badge on a new site. A stupid question perhaps, but nevertheless : how could one adapt the flickr-script to have the pictures opening in a new window iso the same ?
43
thanks for sharing this useful & helpful info Veerle & the comments from yer readers as well!
;))
Commenting is not available on this article.