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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

Customising the CMS /

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Trying to add flickr badge and getting this error.


Go to End


11 Posts   3522 Views

Avatar
Daimz

Community Member, 36 Posts

29 July 2009 at 1:54pm

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
bummzack

Community Member, 904 Posts

29 July 2009 at 6:33pm

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

Community Member, 36 Posts

29 July 2009 at 10:53pm

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
bummzack

Community Member, 904 Posts

29 July 2009 at 11:18pm

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 firebug

Avatar
Daimz

Community Member, 36 Posts

29 July 2009 at 11:24pm

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

Community Member, 36 Posts

29 July 2009 at 11:29pm

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
bummzack

Community Member, 904 Posts

30 July 2009 at 12:28am

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

Community Member, 36 Posts

30 July 2009 at 12:36am

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