Facebook Using code from different domains

Question

I am creating a widget in js that will be implemented across many websites,
Facebook requires me to give them "my domain" so they will know that I am verified.
The problem is that the widget will be used from many websites, and I am not going to manuly list all of those domains to Facebook.
How can I enable my app to work from those different websites using js only? (for the widget)

Thanks in advance.

Answer 1

Your widget will probably need to load its FB code within an iFrame that is hosted on your own domain. Then you'll need to use some cross-domain / cross-iframe JS hacks to get your system to communicate with the page that uses it. (Here's a good resource on doing that... http://softwareas.com/cross-domain-communication-with-iframes) This is definitely a pain, but it's the only way I can think of to do what you're trying to do. There may be some good JS libraries out there at this point to make this easier, but I'm not immediately aware of any.

The other option is to create a bunch of Facebook applications that each belong to a different domain. This would also bring some pain in terms of maintenance, but it would simplify the JS code you'd need to write quite a bit. This approach has some upside in terms of robustness -- if one of the sites using your widget goes rogue and gets the application banned for whatever reason, you other client sites won't be affected.

Facebook used to provide a "clone application" tool but just now I couldn't find it.

Answer 2

i use ajax for something similar. i ajax to a php page, and use the php sdk for all the requests. cross domain just fine.

EXAMPLE: should request most recent albums updated on facebook and display cover photo linked to the album on facebook.

<div id="pagealbums"></div>
<script>
function showAlbums(){
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttpA=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttpA=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttpA.onreadystatechange=function()
  {
  if (xmlhttpA.readyState==4 && xmlhttpA.status==200)
    {
    document.getElementById("pagealbums").innerHTML=xmlhttpA.responseText;
    }
  };
  xmlhttpA.open("GET","http://anotherfeed.com/feed.albums.php?pageid=facebook&type=list",true);
  xmlhttpA.send(); 
}
showAlbums();
</script>