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.

score 2 · Answer 1 · answered Apr 23 '12 at 20:12

2

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.

answered Apr 23 '12 at 20:12

Nathan Labenz

489
3
7

iframes are the only way you can go if you are using the javascript sdk. – ShawnDaGeek Apr 23 '12 at 21:19
Is this the best way of doing so? How do the 'sharethis' tools give the users to ability to add just a js and have all the share methods open? do they use iframes as well? in addition, what am I going to pass between these iframes? an access token? cookie name/value ? – funerr Apr 26 '12 at 21:44
Facebook's JS SDK makes heavy use of iframes. The Facebook script that sites load creates iframes that point to Facebook.com. What you'd need to pass between frames depends on the nature of your application. The key point is that you need to launch the Facebook authentication stuff from the domain associated with the application. – Nathan Labenz Apr 27 '12 at 19:32
@NathanLabenz But wouldn't that be a security concern? People could just copy and manipulate their own Iframes, and do things via my app... – funerr Apr 27 '12 at 21:17

score 0 · Accepted Answer · answered Apr 23 '12 at 21:10

0

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>

answered Apr 23 '12 at 21:10

ShawnDaGeek

4,145
1
22
39

1

But I will distribute this "widget" to people I can't trust having my private keys... plus, I wanted only a js solution, and the ajax here requires a php file for the client( or you intended to use CORS). – funerr Apr 26 '12 at 21:42
using this method i control who can use my plugin, and all authentication is done with facebook on server side so no risk of exposing critical info or settings. This method also allows my users to style the content i send to them via their own css. All perks, no jerks. – ShawnDaGeek Apr 26 '12 at 23:12
if you do not find a solution in good time, and decide to use php, let me know i will help you set up some test pages for cross domain comm. i can also help you set up the php-sdk for facebook if you need. – ShawnDaGeek Apr 26 '12 at 23:15
1

Thanks @Shawn E Carter!, But I want to fully understand my options: Do you mean by using a php file that: 1) I will have a php file on my server and the widget will have cross domain requests with it? or 2) the user will have to download a php file with the js file in order to connect? And lastly, what I will pass between the two files? an access token cookie values? what? – funerr Apr 27 '12 at 21:40
the ajax request in a js file, and the div is all the user needs to render the plugin. user would install the same as the like button or any facebook social plugin. the php file contains: 1. a one line setting to allow cross domain 2. the php-sdk for facebook 3. you can make all the same requests as with js just in php. 4. php-sdk supports the use of all access_token, and hides your secrety key, and tokens since its is all server side. – ShawnDaGeek Apr 28 '12 at 09:33

Facebook Using code from different domains

2 Answers2

Linked