Widgets and Javascript problem

I’ve been able to insert javascript into text widgets with no problems. The text widget doesn’t strip anything out, it’s just putting whatever you type into the page.

If you post a link to your page with the problem and also post what text you’re putting into the widget, somebody can probably figure out what the problem is. Make sure to put backticks around the code when you make a post here, so it shows up properly.

One example is a flickr badge:

‘<!– Start of Flickr Badge –>’
‘<style type=”text/css”>’
‘.zg_div {margin:0px 5px 5px 0px; width:117px;}’
‘.zg_div_inner { color:#666666; text-align:center; font-family:arial, helvetica; font-size:11px;}’
‘.zg_div a, .zg_div a:hover, .zg_div a:visited {color:#3993ff; background:inherit !important; text-decoration:none !important;}’
‘</style>’
‘<script type=”text/javascript”>’
‘zg_insert_badge = function() {‘
‘var zg_bg_color = ‘ffffff’;’
‘var zgi_url = ‘https://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color=’+zg_bg_color+’&zg_person_id=59471093%40N00&#8242;;’
‘document.write(‘<iframe style=”background-color:#’+zg_bg_color+’; border-color:#’+zg_bg_color+’; border:none;” width=”113″ height=”151″ frameborder=”0″ scrolling=”no” src=”‘+zgi_url+'” title=”Flickr Badge”><\/iframe>’);’
‘if (document.getElementById) document.write(‘<div id=”zg_whatlink”>what is this?<\/a><\/div>’);’
‘}’
‘zg_toggleWhat = function() {‘
‘document.getElementById(‘zg_whatdiv’).style.display = (document.getElementById(‘zg_whatdiv’).style.display != ‘none’) ? ‘none’ : ‘block’;’
‘document.getElementById(‘zg_whatlink’).style.display = (document.getElementById(‘zg_whatdiv’).style.display != ‘none’) ? ‘none’ : ‘block’;’
‘return false;’
‘}’
‘</script>’
‘<div class=”zg_div”><div class=”zg_div_inner”>https://www.<strong style=”color:#3993ff”>flick<span style=”color:#ff1c92″>r</span>.com<br>’
‘<script type=”text/javascript”>zg_insert_badge();</script>’
‘<div id=”zg_whatdiv”>This is a Flickr badge showing public photos from mwbarker. Make your own badge here.</div>’
‘<script type=”text/javascript”>if (document.getElementById) document.getElementById(‘zg_whatdiv’).style.display = ‘none’;</script>’
‘</div>’
‘</div>’
‘<!– End of Flickr Badge –>’

I am trying to add it to this site:

https://www.thebarkersworld.com

It also occurs with Google AdSense code, which also uses javascript.

Your script didn’t show up properly because you failed to put backticks around it. Backticks are the ones below the ~ character. And you don’t need them around every line, just one at the start and one at the end.

But, I am *definitely* able to put Google Adsense code in the text widgets. I based my Google AdSense widget plugin on the text widget because of that.

If you put your script in the widget, what shows up in the source of the resulting page? What’s different between your script and the text that shows up in the page itself?

Sorry, let me try again:

<!-- Start of Flickr Badge -->
<script type="text/javascript">
zg_insert_badge = function() {
var zg_bg_color = 'ffffff';
var zgi_url = 'https://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color='+zg_bg_color+'&zg_person_id=59471093%40N00';
document.write('<iframe style="background-color:#'+zg_bg_color+'; border-color:#'+zg_bg_color+'; border:none;" width="113" height="151" frameborder="0"

scrolling="no" src="'+zgi_url+'" title="Flickr Badge"></iframe>');
}
zg_toggleWhat = function() {
document.getElementById('zg_whatdiv').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
document.getElementById('zg_whatlink').style.display = (document.getElementById('zg_whatdiv').style.display != 'none') ? 'none' : 'block';
return false;
}
</script>

<script type="text/javascript">zg_insert_badge();</script>
<script type="text/javascript">if (document.getElementById) document.getElementById('zg_whatdiv').style.display = 'none';</script>
<!-- End of Flickr Badge -->

I have the text widget loaded on the sidebar now. It is at the bottom, but currently only shows the loaded title of the widget. Any ideas? I see that the code shows up when viewing the source, but still nothing…

If you log into your Flickr account and goto this link https://www.flickr.com/badge_new.gne it will guide you through a process that ultimately will generate the code you need to copy/paste into your widget to get either an HTML for Flash Badge working.

It is inserting your text into the page, but the reason it’s not working is that you’re inserting line feeds into the script somehow when you paste it into the widget. Javascript doesn’t like the line feeds in string literals.

Anyway, that whole thing is more than a bit stupid anyway. It’s just using annoying Javascript to write an iframe tag. Lots of “generator” scripts do this for various services, and I’ve never understood the point of any of them. Javascript is totally pointless when it’s ultimately just doing document.write’s.

Try just using this bit of code instead of that ugly mess:

<iframe style="background-color:#ffffff; border-color:#ffffff; border:none;" width="113" height="151" frameborder="0" scrolling="no" src="https://www.flickr.com/apps/badge/badge_iframe.gne?zg_bg_color=ffffff&zg_person_id=59471093%40N00" title="Flickr Badge"></iframe>

MichaelH – That is where the code came from; I just modified it a touch to get rid of all the “flickr” stuff. Even the original code was not showing up, though.

Otto42 – That worked like a charm. Thanks! I will have to find out why the line inserts are being inserted. All I have been doing from both flickr and Google Adsense is copying and pasting directly from the sites into the text bar.

Otto42 – The Google AdSense widget (and text widget) was working just fine for me. I was setting it up at work and had forgotten that Google AdSense stuff is blocked by Websense here. Turns out it was working just fine! Again – thanks for the help with the Flickr code!