I'm trying to integrate Facebook JS sdk with my BackboneJS spa.
When the page is new, ie; router has not navigated to any where, the Facebook share code works perfectly.
After I navigate to some other page. The FB.api() callbacks never fire.
The fb-root div <div id="fb-root"></div> is automatically getting created automatically.
But once i navigate to any other route, my body is getting cleared and new html will be loaded.
How to keep the <div id="fb-root"></div> in body while navigating to the other routes.
Or is there anyother way to getting though this issue.
pease help =)
Try to render your views in a new element, not directly in the body :
<body>
<div id="fb-root"></div>
<div id="container"></div> <!-- Here for example -->
</body>
Related
I want to be able to update/replace embedded facebook posts in my website.
For example say i have this code (part of the codesnippet is taken from facebook here):
<html>
<title>My Website</title>
<body>
<button onclick="replacePost();">replace</button>
<script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.2"async></script>
<div id="myDiv">
<div class="fb-post"
data-href="https://www.facebook.com/FacebookDevelopers/posts/1234"
data-width="500"></div>
</div>
<script>
function replacePost()
{
var newHTML = '<div class="fb-post"';
newHTML += 'data-href="https://www.facebook.com/FacebookDevelopers/posts/123"';
newHTML += 'data-width="500"></div>';
$("#myDiv").html(newHTML);
}
</script>
</body>
</html>
Here as an example, when the page loads, there is a button and then the facebook post with the id 123 will pop up as expected. And when i click the button, i use jQuery to find the parent div of the facebookpost, and replace it with some new HTML. In this case, a post with the id 1234. But the post will not pop up :-( (Hopefully, you can see what i am trying to do).
So how do i dynamically delete a post and replace it with another post?
You need to parse your html again so that the facebook sdk can fetch the new post. If you change your JavaScript to the following:
<script>
function replacePost()
{
var newHTML = '<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"data-width="500">';
$("#myDiv").html(newHTML);
FB.XFBML.parse() //<---- add this
}
</script>
Then each time you call replacePost you html will be parsed again. Instead of parsing the whole page you can parse a specific tag for the sake of efficiency:
FB.XFBML.parse(document.getElementById('foo'));
Docs here: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse
I am developing an application for FB Login with website using Javascript and JSF. I have included my FB-Login button tag <fb:login-button scope="email"></fb:login-button> inside my code. when i run it, it does't show login button in my webpage. I am using Eclipse Juno editor and Apache Tomcat 7.0. How do i get Login button in my webpage? The thing is, it works fine in html.
I have attached my fbLogin.xhtml code at here.
Put your body tag as <body></body> not by this <h:body></h:body> and place <fb:login-button scope="email" /> before <h:form> tag.
Example:
<body>
<fb:login-button scope="email" />
<h:form>
...
</h:form>
<body>
Now it will work fine.
you can make it as JS also
<script>
//<![CDATA[
document.write('<fb:login-button scope="email" />');
//]]>
</script>
I guess I have an easy question, I have not found the right answer yet though.
I have an iframe in my page that comes from an external domain. After submitting the form which is inside this iframe, I would like to redirect the whole page, not just the content inside the iframe - I guess the right way to achieve might be via "target" attribute.
The sample html:
<html>
<body>
<h1>main page</h1>
<iframe src="http://example.com">
<form url="http://example.com/action">
...
</form>
</iframe>
</body>
</html>
Submitting the form should show me the result of submitting the POST request as a new page (not in the iframe)
I have put target='_parent' in the iframe but I haven't done this initially in the form element. After adding target='_parent' attribute to form it started to work as expected.
Add a target attribute to the form within the iframe:
<form action="foobar" method="post" target="_parent">
...
</form>
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...
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!