The code is easy :
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" type="text/javascript"></script>
<fb:like href="http://www.google.com" send="false" layout="button_count" width="auto" show_faces="true" font=""></fb:like>
but on Chrome it doesnt works (it doesnt show anythings)... why? And how can I fix this?
Use the HTML5 version of the like code. I find it's easiest to work with it since I don't have to modify the html tag to include the appropriate XML namespace.
Related
I'm trying to get this script to work on the test post. The goal is to have the links below the video jump to certain spots in the video. It works fine in the jsfiddle demo, but not on my post.
In my header.php, I load that script and the script it refers to:
<head>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript" src="http://wcportal.acbaldwin.info/js/vimeochapters.js"></script>
</head>
In the post that I want to use, I inserted this markup in text-only view:
<iframe width="540" height="304" frameborder="0" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" id="player_1">
</iframe>
<h2>Chapters</h2>
<ul class="chapterLinks">
<li><a class="seek" href="#" name="15">Seek to 15</a></li>
<li><a class="seek" href="#" name="30">Seek to 30</a></li>
<li><a class="seek" href="#" name="60">Seek to 60</a></li>
</ul>
Here's the test page
I'm sure I'm calling something incorrectly, but I don't know where. I'm not sure I saved the .js file correctly or if there need to be additional tags within the .js file.
I know there are more optimized and wordpress friendly ways to integrate JS, but I just need quick, dirty, and functioning for a demo. Thanks for any help!
Got the solution here from a redditor:
http://www.reddit.com/r/webdev/comments/1dn0j6/im_having_a_hard_time_getting_javascript_to_work/c9rwy85
Turns out the script needed to be in the footer. (Either that or I had a lucky coincidence while fixing an ajax issue!)
It looks like you are missing an ending } on the vimeofunction(); in the vimeochapters.js file.
I have the following code to display the FB Like box in a file called notify.html.
<div id="fb-root" class="fb_like"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<fb:like-box href="http://www.facebook.com/platform" width="270" height="250" show_faces="true" border_color="black" stream="true" header="true">
</fb:like-box>
This file is included in all my other pages such that everything in notify.html shows up in a sidebar for all pages.
However, the FB like box only shows up on one page,, and that happens to be the page where I also have the FB registration form.
Why does it not show up in other pages?
The FB registration code on the one page the like box shows on is
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId:'0000000000000', cookie:true,
status:true, xfbml:true
});
</script>
<fb:registration
fields="[{'name':'name'},{'name':'emailEdu','description':'Your .edu Email','type':'text'},{'name':'captcha'}]"
redirect-uri="http://myurlhere.com">
</fb:registration>
You need the FB.init method once on every page you want to use the api with. If you only have the code from that first example and nothing else, its not working because you haven't initialised the FB object. On the registration code you have the FB init, which is why it suddenly starts working.
Doesn't look like you're exactly copying the FB code. From their code generator on the page you referenced, you should be including the following:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="http://www.facebook.com/platform" width="292"
show_faces="true" border_color="" stream="true" header="true"></fb:like-box>
-- but your script tag is missing the #xfbml stuff
Also use firebug or similar to see if you are getting any JS errors. Also check that you're not double loading the FB libs
Added I think the problem is that your xffbml tags are not being parsed on the other pages. Hopefully fixing the script include tag will fix it...
I have a website with a news section, and I want to put individual "like" buttons in each post. The problem is that the buttons shows the root like count and not the count of that specific page/post.
And the weirdest is that it works in one of the pages, but not in the others.
This is the page with the buttons working and this is one of the pages where te button isn't working.
I've already read all the content of facebook's social plugin and open graph, and I still don't understand what's happening.
This button don't work:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=218284238205675&xfbml=1"></script><fb:like href="http://eepolitecnica.org.br/noticias/valor_poli_cria_primeiro_fundo_de_universidade/" send="true" layout="button_count" width="150" show_faces="false" font=""></fb:like>
and this works fine:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=170199966377672&xfbml=1"></script><fb:like href="http://eepolitecnica.org.br/noticias/jornal_nacional_exibe_materia_sobre_o_eep" send="true" layout="button_count" width="150" show_faces="false" font=""></fb:like>
These are some relevant meta tags I have
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo $base_url, $site_url; ?>" />
Is that a common bug from FB's Like button as it seems or I'm really doing something wrong?
Sorry about my terrible english...
Remove the trailing slash in the version that doesn't work. This trailing slash is causing your urls not to match and so facebook is defaulting back to the base url
eg:
<fb:like href="http://eepolitecnica.org.br/noticias/valor_poli_cria_primeiro_fundo_de_universidade" send="true" layout="button_count" width="150" show_faces="false" font=""></fb:like>
Try using FB's linter tool: https://developers.facebook.com/tools/lint/
Enter the URL for your different pages and see what FB is actually seeing from the XFBML tags on your page. This might shed more light or post back results here.
Try this
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://www.facebook.com/account-name" send="true" layout="button_count" width="150" show_faces="false" font=""></fb:like>
i need separate comment thread for each post on my website, so i followed instructions at http://developers.facebook.com/blog/post/472, ie i inserted the code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="www.mysite.com" xid="postPOST_ID_HERE"></fb:comments>
under each post.
but it doesn't work and there is SAME comments thread under each post.
if i try this code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="http://www.mysite.com/news.php?id=POST_ID_HERE"></fb:comments>
it seems to work, ie i get separate comment thread per post. but according to facebook instructions href parameter needs to be canonical url. am i doing something wrong in the first case or is the second example way to go (even if against facebook manual)?
I don't think you need to use both the href and the xid variables. I think the href variable is the newer version according to Facebook Developer Blog this is the new code:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments href="YOUR_CANONICAL_URL"></fb:comments>
It also says "If you already have the original Comments Box installed, include the parameter migrated="1" to keep existing comments" and shows this as an example:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:comments xid="YOUR_XID" migrated="1"></fb:comments>
I am using the first version I posted here, but using addresses like you mentioned, and it works. So I'd say go with the second version even if it goes slightly against what they say. It works properly for me.
Plugin doesn't work on my 2 sites on different servers from yesterday, but on http://www.vesti.ru/doc.html?id=442871 plugin works normally
An associate of mine maintains a facebook page for the company we work for.
The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.
The associate who does facebook is not a programer so he asked me to build something.
I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.
We want to embed this page on facebook using an iframe.
First we just tried entering the iframe, which did not work,
then we found a tutorial and tried to embed the iframe the way it says like this:
<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1
Then we get a JS error like this:
Uncaught reference error:
a325461252_link_1 not defined
But every once in a while it will work but 99% of the time we get this error.
I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.
Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.
Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.
I just tested the following and it worked:
<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
<fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>
<fb:js-string var="location_two">
<fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>
<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>
If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:
<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />
Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.
BTW: To programmatically add iframes in Facebook you can use JavaScript like so:
<script type="text/javascript">
var Iframe = document.createElement('iframe');
Iframe.setStyle('smartsize','true');
Iframe.setStyle('frameborder','yes');
Iframe.setStyle('scrolling','no');
Iframe.setStyle('include_fb_sig','true');
Iframe.setStyle('width','500px');
Iframe.setStyle('height','500px');
Iframe.setSrc("http://www.msn.com");
document.getRootElement().appendChild(Iframe);
</script>
Good Luck!