Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Customising the CMS

Trying to add flickr badge and getting this error.


Go to End
Reply

11 Posts   2145 Views

Avatar
Daimz

29 July 2009 at 1:54pm Community Member, 36 Posts

Firefox is giving me this error:

XML Parsing Error: not well-formed
Location: http://www.arctosdesign.com/silverstripe/
Line Number 158, Column 106://]]></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=28322286%40N08"></script>
---------------------------------------------------------------------------------------------------------^

And this is what Safari says:

This page contains the following errors:
error on line 140 at column 1837: EntityRef: expecting ';'
Below is a rendering of the page up to the first error.

I am trying to add a flickr badge from Flickr but I am getting this error. I am no coder but I think it means that there is a problem with the = symbol in the link. Does any one know how to solve it.
would really appreciate any help.

Avatar
banal

29 July 2009 at 6:33pm Community Member, 901 Posts

No, it's not the =. It's the ampersand. In XML (or XHTML for that matter), you have to encode it like this: &amp;
So, replace all the & in your link url with &amp; that should fix the problem

Avatar
Daimz

29 July 2009 at 10:53pm Community Member, 36 Posts

I fixed the &amp; but it still doesn't work.

this is how I currently have it.

<div id="flickr_badge_uber_wrapper">
<div id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=4&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=28322286%40N08"></script>
</div></div>

Avatar
banal

29 July 2009 at 11:18pm Community Member, 901 Posts

Are you sure that URL is correct? If I open that in the browser, the returned JavaScript won't generate any visible elements... it does however add some invisible elements to the page (you can verify that using [url=http://getfirebug.com]firebug[/url]

Avatar
Daimz

29 July 2009 at 11:24pm Community Member, 36 Posts

well if I go into the DOM section of firebug(I don't really know how to use firebug I have very little coding knowledge and I am trying to learn) I can see this:

"<div class="flickr_badge_image" id="flickr_badge_image1"><a href="http://www.flickr.com/photos/retrocity/3612043955/"><img src="http://farm3.static.flickr.com/2422/3612043955_d6a46f10da_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-4" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image2"><a href="http://www.flickr.com/photos/retrocity/3612858126/"><img src="http://farm4.static.flickr.com/3316/3612858126_0afcb7fd2e_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-3" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image3"><a href="http://www.flickr.com/photos/retrocity/3612043447/"><img src="http://farm4.static.flickr.com/3620/3612043447_cc082cf7f5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-2" height="75" width="75"></a></div><div class="flickr_badge_image" id="flickr_badge_image4"><a href="http://www.flickr.com/photos/retrocity/3612857528/"><img src="http://farm4.static.flickr.com/3320/3612857528_5619567dd5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-1" height="75" width="75"></a></div><span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=d4a03345bad290dbe3993cde2947ab2f&r=http%3A%2F%2Fwww.arctosdesign.com%2Fsilverstripe%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>"

which shows that it is getting hold of my images because those are linking to the right place there just not showing on my page?

Avatar
Daimz

29 July 2009 at 11:29pm Community Member, 36 Posts

I have a feeling the problem is here:

<span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=d4a03345bad290dbe3993cde2947ab2f&r=http%3A%2F%2Fwww.arctosdesign.com%2Fsilverstripe%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>

I checked all the liked thumbnails and they are correct the only thing not producing anything is this link.
Potentially I am way off. :)

Avatar
banal

30 July 2009 at 12:28am Community Member, 901 Posts

Hm the content you get there looks ok to me. Do you get any errors in the Firebug console? And how did you style the surrounding divs? Are you sure none of them has "visibility: hidden" or "display: none" ?

Avatar
Daimz

30 July 2009 at 12:36am Community Member, 36 Posts

The surrounding Divs have the following styles:

#flickr {
   height: 308px;
   width: 311px;
   float: right;
   margin-right: 7px;
   padding-top: 13px;
   padding-bottom: 12px;
   padding-left: 0px;
}
#flickr_header {
   background-image: url(../images/flickr.jpg);
   background-repeat: no-repeat;
   height: 23px;
   width: 193px;
   background-position: left top;
   margin-left: 10px;
}
#flickr_container {
   background-image: url(../images/flicker_bg.jpg);
   background-repeat: no-repeat;
   background-position: left top;
   height: 267px;
   width: 258px;
   margin-left: 26px;
   margin-top: 10px;
}
.flickr_img{
   width: 252px;
   margin-left: 1px;
   position: relative;
   padding-top: 3px;
}
#flickr_r {
   width:214px;
   height: 168px;
   padding:0 0 0 50px;
   margin-top:0px;
   }
div#flickr_r a img {
   float:left;
   background: #ffffff;
   margin:0 4px 4px 0px;
   padding:4px;
   width:75px;
   height:75px;
   }
   div#flick_r a img {
   background: #555555;
   }
div#flickr_r img[src*="http://geo.yahoo.com"] { display:none }

I found these links explaining a similar problem.
http://www.teddy-o-ted.com/design/fix-for-buggy-flickr-badge-js/
http://veerle.duoh.com/blog/comments/fickr_badge_w3c_valid/
and I followed as they said but still no images.

it seems as though my problem might lie in the creation of a <span> also the links above suggested chaning the standard flickr badge CSS which I did but I notice bellow it is still using <div id="flickr_badge_image"> which I have no css for?

var b_txt = '';
2
3// write the badge
4
5
6
7 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image1"><a href="http://www.flickr.com/photos/retrocity/3612043955/"><img src="http://farm3.static.flickr.com/2422/3612043955_d6a46f10da_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-4" height="75" width="75"></a></div>';
8
9
10 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image2"><a href="http://www.flickr.com/photos/retrocity/3612858126/"><img src="http://farm4.static.flickr.com/3316/3612858126_0afcb7fd2e_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-3" height="75" width="75"></a></div>';
11
12
13 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image3"><a href="http://www.flickr.com/photos/retrocity/3612043447/"><img src="http://farm4.static.flickr.com/3620/3612043447_cc082cf7f5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-2" height="75" width="75"></a></div>';
14
15
16 b_txt+= '<div class="flickr_badge_image" id="flickr_badge_image4"><a href="http://www.flickr.com/photos/retrocity/3612857528/"><img src="http://farm4.static.flickr.com/3320/3612857528_5619567dd5_s.jpg" alt="A photo on Flickr" title="rarotonga_dinner-1" height="75" width="75"></a></div>';
17
18
19b_txt += '<span style="position:absolute;left:-999em;top:-999em;visibility:hidden" class="flickr_badge_beacon"><img src="http://geo.yahoo.com/p?s=792600102&t=88be7833b0bb72e29c60df2eeac20052&r=http%3A%2F%2Fwww.arctosdesign.com%2Fsilverstripe%2F&fl_ev=0&lang=en&intl=uk" width="0" height="0" alt="" /></span>';
20
21document.write(b_txt);

Go to Top