Hi Joe,
Does Voice support Javascript and should I be able to add a Flickr badge to one of our websites without you needing to change anything? I tried adding one to our CSS but so far hasn't worked.
Many thanks,
Sorrel
Yes you can embed a Flickr/Youtube/etc badge or widget using the WYSIWYG editor. Just find the embed code from their site and add it to the WYSIWYG using either the Embed Code button, or the HTML source view.
There are some examples of this on the demo site here.
It's possible that some widgets won't like being embedded in this way. If you have a specific widget that doesn't seem to work I could investigate further...
I don't think adding it to the CSS is any use - the widget needs to be on the page itself, not in the stylesheet, so embedding using the WYSIWYG is likely to the be the only option that works!
Thanks
Joe - Voice Admin
Hi Joe,
Thanks for getting back to me so quickly. Yes, we've tried adding it that way and also as a data file (just in case!) but it's not working. The webiste is www.communityconnected.com and the flickr embed code is:
<!-- Start of Flickr Badge -->
<style type="text/css">
#flickr_badge_source_txt {padding:0; font: 11px Arial, Helvetica, Sans serif; color:#666666;}
#flickr_badge_icon {display:block !important; margin:0 !important; border: 1px solid rgb(0, 0, 0) !important;}
#flickr_icon_td {padding:0 5px 0 0 !important;}
.flickr_badge_image {text-align:center !important;}
.flickr_badge_image img {border: 1px solid black !important;}
#flickr_www {display:block; padding:0 10px 0 10px !important; font: 11px Arial, Helvetica, Sans serif !important; color:#3993ff !important;}
#flickr_badge_uber_wrapper a:hover,
#flickr_badge_uber_wrapper a:link,
#flickr_badge_uber_wrapper a:active,
#flickr_badge_uber_wrapper a:visited {text-decoration:none !important; background:inherit !important;color:#3993ff;}
#flickr_badge_wrapper {}
#flickr_badge_source {padding:0 !important; font: 11px Arial, Helvetica, Sans serif !important; color:#666666 !important;}
</style>
<table id="flickr_badge_uber_wrapper" cellpadding="0" cellspacing="10" border="0"><tr><td><a href="http://www.flickr.com" id="flickr_www">www.<strong style="color:#3993ff">flick<span style="color:#ff1c92">r</span></strong>.com</a><table cellpadding="0" cellspacing="10" border="0" id="flickr_badge_wrapper">
<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=1&display=random&size=m&layout=v&source=user_set&user=92495069%40N03&set=72157632588919455&context=in%2Fset-72157632588919455%2F"></script>
</table>
</td></tr></table>
<!-- End of Flickr Badge -->
Many, many thanks,
Sorrel
Hi again,
I've had a look into it and the problem is that the badge code is invalid HTML, which the WYSIWYG editor, TinyMCE, is trying to "fix". The main problem is that the embed code has a <table> which contains only a <script> (i.e., no rows or cells) and the WYSIWYG editor is thinking this is not allowed and so rejecting it!
I have tried embedding the Flash version of the Flickr badge, and that works fine.
So if you're happy to use the flash badge then that's great, go with that. You can paste this into the HTML view of the WYSIWYG as normal.
Otherwise what you could try is to temporarily disable JavaScript in your browser (so that the WYSIWYG editor isn't loaded), then go to edit the page, and then paste the badge code into the page using the "raw" HTML. This is a bit hacky so maybe using the flash badge is better!
Perhaps what we need to do is have a mode where you can ask the WYSIWYG editor not to fix the HTML, which could be useful for advanced users. However the danger here is that people could then all too easily break their own website with invalid HTML!
Hope that helps to explain the problem, if nothing else!
Thanks
Joe - Voice Admin
Brilliant Joe - thanks for that. Yes, I can see that it wouldn't be wise for the second option. We'll try the Flash badge. Thanks for your support, really appreciated.
Sorrel