Facebook JS SDK - "ga is undefined" - facebook-like

I am using Facebook JS SDK for integrating Like buttons in my Rails App. This sunny Monday the like buttons disappeared, and I opened Firebug to check what was going on. I found this error:
ga is undefined (line 25 of http://connect.facebook.net/en_US.all.js#xfbml=1)
So... I created an empty file not related to my Rails app, and I did something as simple as:
<html>
<body>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" layout="button_count" show_faces="false" width="450" font=""></fb:like>
</body>
</html>
And yes, the error is still there. Any thoughts?

I opened a ticket to Facebook, and apparently some other people were having the same problem. It seemed to be a temporary problem because now is up and running normally. I wasn't able to find the reason, and one of the Facebook employees replied when everything was running normally, so I can't give a clear answer of what was going on.

Please use <div class="fb-like"></div> instead of <fb:like></fb:like>
See http://developers.facebook.com/docs/reference/plugins/like/ and refetch the example code.
It took me a while before I noticed the change in HTML code provided by Facebook.

if you add <div id="fb-root"></div> to your page it will work again ... not sure if it's a temporary bug or a change within their API yet ... :-/

I have fix this bug (for sharrre, jquery plugin) by adding this div:
<div id="fb-root"></div>
Edit: oops I haven't seen the Hellkeeper answer's :)

Your href property is empty in the fb:like tag.

Related

link to foundation stylesheet seems not to work

I already searched the forum for this (for example: HTML/CSS: Foundation stylesheet wont link) , but there was no answer which helped for my case.
I downloaded the current version of Foundation here:
https://foundation.zurb.com/sites/download.html/
Then I put it into my project folder and made a link to it inside my index.html. The link looks like this:
<link rel="stylesheet" href="Foundation/css/foundation.css">
Other links to external sources worked.
So I tried out the implementation and copypasted some code from foundations examples, this one:
<div class="card-info info">
<div class="card-info-label">
<div class="card-info-label-text">
FYI
</div>
</div>
<div class="card-info-content">
<h3 class="lead">Chappie</h3>
<p>In the near future, crime is patrolled by a mechanized police
force. When one police droid, Chappie, is stolen and given new
programming, he becomes the first robot with the ability to think
and feel for himself.</p>
</div>
</div>
However, nothing happens. I just get the strings outputted without any styling, so I guess that the link doesnt work.
My site is running on angular, could this pose an issue? And if so, why does the other link work but this one not?
For building blocks to work you have to copy the SCSS / CSS content from the bottom, which you need additionally to the foundation.css file.

Embed rendered gist in github page

I want to embed a gist containing a Google Chart (rendered here) into this github.io page.
I've tried
<script src="https://cdn.rawgit.com/whanley/71bc1fac509a23b93a3a89b51af32bf8/raw/d98c33c8fbf5ee67a89395c0e435ac9568bcd0c1/dig-eg-gaz-issues-calendar-chart.html"></script>
and
<image src="https://cdn.rawgit.com/whanley/71bc1fac509a23b93a3a89b51af32bf8/raw/d98c33c8fbf5ee67a89395c0e435ac9568bcd0c1/dig-eg-gaz-issues-calendar-chart.html"></image>
and
{% gist 71bc1fac509a23b93a3a89b51af32bf8 %}
but these are not the right thing to do. Help?
Instead of using script or image, I need to use iframe in the code listed above. Works fine now.

Recaptcha not rendering

This should be totaly simple, but I guess I must be missing something..
I put this in the html body, before the form:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Then inside a form I have this recaptcha div:
...
<form action="" method="post">
<div class="g-recaptcha" data-sitekey="[MY_API_KEY]"></div>
...
When the page loads, there's no recaptcha and also firebug's console doesn't output anything. What could be wrong?
EDIT: Now it actually works sometimes, but I have to refresh the page, but it's totally random if it works or not. This is really strange behaviour.
The reCAPTCHA page itself says to put the script tag inside the head tag, so it should load before everything else. Also, check if you have two script tags...wink
Try removing the async and defer attributes from your script tag and place it somewhere above your form.
<script src='https://www.google.com/recaptcha/api.js'></script>
This will ensure that your script is run before your form is parsed.
the api.js is only ~532 bytes (minified) and shouldn't add much overhead to your page loading.
Also I'm not sure if this question is related to django in anyway. I suggest you remove that tag from your question :)
Hope this helps and best of luck.
i got similar problem with chart.js on my website.
If, it is same case with me (when reload page works), i think js file doesn't downloaded until your html rendering.
check safari or chrome resource download time.
if your screen is ready and recapcha.js is until downloading, you should add set timeout or etc to wait for your javascript code.
i tried like this..
setTimeout(function(){
Chart.defaults.global.tooltipFontSize= 10;
Chart.defaults.global.scaleShowLabels=false;
}, 10)

Firebug lite not working in IE/Chrome

I am trying to install firebug lite onto IE and Chrome. The documentation states to simply add the javascript location in the document and all should be well. This works but the iframe containing then firebug is hidden with a visibility: hidden attribute. I am unable to find anywhere to actually activate the firebug, normally you would think you could right click and "inspect" but that option is not there. The chrome extension and bookmarklet works but my main concern is trying to firebug through internet explorer.
Anyone had or solved this issue?
Yeah I had the same problem using the stable channel. I switched to the debug channel & it worked perfectly, opening right up. So use this:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
Also, I find it useful to throw a quick 300px-high div in there at the bottom of my page to make room for Firebug Lite, like this:
<div style="display:block; height:300px; background:blue;"></div>
Just don't forget to remove it with the FBL script tag!

Like button code doesn't work on my website

I found a few similar topics however none specific to my issue. I went to create a like button code, I clicked the create like box, added my link http://www.facebook.com/pages/SpartaPerformancecom/248083571902684 to the URL formated the like button how I want it to appear. Then I opened Dreamweaver and pasted the Facebook code in the Dreamweaver HTML code where I want the Like button to appear but I get nothing. Please respond like "coding for dummies" language so I can understand how to solve my issue. Thanks in advance.
Make sure you add <div id="fb-root"></div> somewhere between the <body></body> tags. Their latest like button generator is missing that part.