Using Facebook plugins via Javascript SDK and OAuth 2.0 functionality
Permalink
I am working on including facebook plugins on my site using their Java Script SDK which apparently as of (Dec 11, 2011) only supports Oauth 2.0.
http://developers.facebook.com/docs/plugins/...
I thought that copying and pasting the code provided from facebook's plugins page would suffice. It seems I was wrong about that and it is a little more involved.
There seems to be two methods that facebook generates code for:
"There are two Like button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence."
After providing information to Facebook and hitting "get code" you have a popup that gives you the option to copy code for iframe, xfbml, and/or HTML5. It seems that xfbml and java are available for all the plugins and only a select few allow for iframe.
the plugins that I am looking at do not have iframe which would have been easy, so my option is xfbml and HTML5.
If I understand correctly I need to include the javascript sdk code in the HEADER. I am not sure if this means that I need to add a new "content" block to the header and paste the javascript sdk to that block, or if there is a place that I place this code in the dashboard (can I place it in the "tracking code" box under sitewide settings")?
Below is generated code for each option from the FB plugin page:
HTML5 TAB:
1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
This script uses the app ID of your app: "YOUR-APP-NAME-HERE" (PULDOWN WINDO IF YOU MORE THAN ONE APP)
2. Place the code for your plugin wherever you want the plugin to appear on your page.
XFBML TAB:
1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
This script uses the app ID of your app: "YOUR-APP-NAME-HERE" (PULDOWN WINDO IF YOU MORE THAN ONE APP)
2. Add an XML namespace to the <html> tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer.
3. Place the code for your plugin wherever you want the plugin to appear on your page.
IFRAME TAB:
Place the code for your plugin wherever you want the plugin to appear on your page.
This script uses the app ID of your app: "YOUR-APP-NAME-HERE" (PULDOWN WINDO IF YOU MORE THAN ONE APP)
So I guess my question has anyone already nailed all this donw and got it working. My goal is to have differnet like buttons assosiated with different block elements on the same page. So my basic understanding is I need to paste some code to the header, and then I need to paste code inside the content or html block.
I would love to hear any success stories on this, and if I get this figured out I will post my success story.
(also note I am not sure if I need to add ,.js to my pages "allowed file types" but currently I have not added it)
Albin
http://developers.facebook.com/docs/plugins/...
I thought that copying and pasting the code provided from facebook's plugins page would suffice. It seems I was wrong about that and it is a little more involved.
There seems to be two methods that facebook generates code for:
"There are two Like button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence."
After providing information to Facebook and hitting "get code" you have a popup that gives you the option to copy code for iframe, xfbml, and/or HTML5. It seems that xfbml and java are available for all the plugins and only a select few allow for iframe.
the plugins that I am looking at do not have iframe which would have been easy, so my option is xfbml and HTML5.
If I understand correctly I need to include the javascript sdk code in the HEADER. I am not sure if this means that I need to add a new "content" block to the header and paste the javascript sdk to that block, or if there is a place that I place this code in the dashboard (can I place it in the "tracking code" box under sitewide settings")?
Below is generated code for each option from the FB plugin page:
HTML5 TAB:
1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
This script uses the app ID of your app: "YOUR-APP-NAME-HERE" (PULDOWN WINDO IF YOU MORE THAN ONE APP)
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR-APP-ID-WILL-BE-HERE"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
2. Place the code for your plugin wherever you want the plugin to appear on your page.
<div class="fb-like" data-href="http://www.MY-SITE-NAME.com" data-send="true" data-width="450" data-show-faces="true"></div>
XFBML TAB:
1. Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
This script uses the app ID of your app: "YOUR-APP-NAME-HERE" (PULDOWN WINDO IF YOU MORE THAN ONE APP)
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR-APP-ID-WILL-BE-HERE"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
2. Add an XML namespace to the <html> tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer.
<html xmlns:fb="http://ogp.me/ns/fb#">
3. Place the code for your plugin wherever you want the plugin to appear on your page.
<fb:like href="http://www.MY-SITE-NAME.com" send="true" width="450" show_faces="true"></fb:like>
IFRAME TAB:
Place the code for your plugin wherever you want the plugin to appear on your page.
This script uses the app ID of your app: "YOUR-APP-NAME-HERE" (PULDOWN WINDO IF YOU MORE THAN ONE APP)
<iframe src="//www.facebook.com/plugins/facepile.php?href=http%3A%2F%2Fwww.MY-SITE-NAME.com&size=small&width=200&max_rows=1&colorscheme=light&appId=344579728905540" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px;" allowTransparency="true"></iframe>
So I guess my question has anyone already nailed all this donw and got it working. My goal is to have differnet like buttons assosiated with different block elements on the same page. So my basic understanding is I need to paste some code to the header, and then I need to paste code inside the content or html block.
I would love to hear any success stories on this, and if I get this figured out I will post my success story.
(also note I am not sure if I need to add ,.js to my pages "allowed file types" but currently I have not added it)
Albin
