Two kinds of “like” button (Facebook Dev)
For a project launching this week, I had to figure out how to generate “likes” for a page hosted on Facebook, from a separate website. (The “why” had to do with combining comment streams. You can’t post on a fan page unless you “like” it first. And we didn’t want two comment streams - one for Facebook, one for our site - we only wanted one.)
The new fb:like tag was no help. The old-style fan box, though? Worked a dream.
Here’s a demo
And here’s the source:
<html lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
<meta property=”og:title” content=”Like Button Tutorial”/>
<meta property=”og:site_name” content=”LizWarner.com”/>
<meta property=”og:image” content=”http://lizwarner.com/fbdemo/buttondemo.jpg”/>
<title>Button Demo</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js” type=”text/javascript”></script>
<script language=”JavaScript” type=”text/javascript”>
// asynchronously load the FB Libs
$(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
});
// this will be called when the FB libs are fully loaded
function doFbStuff() {
//alert(‘facebook libraries loaded’);
var facebookPageId = ‘126920377325811’;
// this one lets you become a fan of a page hosted on facebook. you can add a css parameter to style this
$(‘#fanbutton’).html(‘<fb:fan connections=”0” name=”false” stream=”false” width=”380” logobar=”false” profile-id=”’ + facebookPageId + ‘”></fb:fan>’);
// this one lets you like this html page. see fbrell.com for more button types
$(‘#likebutton’).html(‘<fb:like layout=”button_count”></fb:like>’);
}
</script>
</head>
<body>
<div id=”fb-root”></div>
<script>
/// set a trigger for async FB loading
window.fbAsyncInit = function() {
FB.init({
appId : ‘YOURAPPID’,
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
// now do everything that depends on FB being loaded
doFbStuff();
};
// end async fb loading
</script>
<h1>Two kinds of Button</h1>
<h2>”Like” the page you’re looking at</h2>
<div id=”likebutton”></div>
<h2>”Like” a page hosted on Facebook</h2>
<div id=”fanbutton”></div>
</body>
</html>
Facebook Dialogs from Flash+JS
Here’s the prototype howto for Flash-JS. (Fun fun, some of the new JS dialogs are not documented. I had to read the source on github to get this working.)
This should work in both a FB connect app, and within an iFrame app. I haven’t done exhaustive cross-browser testing yet. I’ll update this week when this goes live, with whatever fixes I end up making.
Note: this code assumes you have a logged-in user. The login stuff is reasonably well documented, so I’m not going to add that to these samples.
First, normal init:
In your page header, include jQuery 1.4.
Then include a JS file with this function:
//////////////////// start code block
$(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
});
//////////////////// end code block
Now in the body of your document, right below the body tag, add this (again, normal FB JS Init).
//////////////////// start code block
<div id=”fb-root”></div>
<script>
/// set a trigger for async fb loading
window.fbAsyncInit = function() {
FB.init({
appId : ‘YOURAPPID’
status : true, // check login status
cookie : true, // enable cookies
xfbml : true // parse XFBML
});
// now do anything else that depends on FB being loaded
doFbStuff();
};
// end async fb loading
//////////////////// end code block
Next, back to your external JS file, define the functions for the pop-ups (one to post to wall, one to invite friends).
//////////////////// start code block
// optional callback, just so you can see where it goes.
function someOmnitureProbably() {
// just a placeholder
}
// show the “invite friends” dialog. “display: dialog” is key - otherwise the dang thing won’t resize correctly.
function inviteFriends() {
var add = {
method: ‘fbml.dialog’,
display: ‘dialog’,
fbml: ‘<div style=”padding: 10px;”>’ +
‘<fb:request-form method=”post” action=”index.php” content='YOUR CALL TO ACTION <fb:req-choice url=”http://apps.facebook.com/YOURAPPNAME” label=”Confirm” />' type=”game” invite=”true”>’ +
‘<div class=”clearfix” style=”padding-bottom: 10px;”>’ +
‘<fb:multi-friend-selector actiontext=”Invite your friends to use YOUR APP NAME.” />’ +
‘</div>’ +
‘<fb:request-form-submit />’ +
‘</fb:request-form>’ +
‘</div>’,
};
FB.ui(add, someOmnitureProbably());
}
// show the “wall post” dialog
function wallPost() {
var publish = {
method: ‘stream.publish’,
message: ‘testing a post from a flash object’,
attachment: {
name: ‘the button’,
caption: ‘the shiny green button’,
description: (
‘you know you want to click it!’
),
href: ‘http://YOURAPPURL’
},
action_links: [
{ text: ‘click!’, href: ‘http://YOURAPPURL’ }
],
user_prompt_message: ‘Say Something!’
};
FB.ui(publish, someOmnitureProbably());
}
//////////////////// end code block
Easy enough so far, huh?
Now for the actionscript (I’m not a Flash coder, so corrections/additions very very welcome. This does work for me, though.)
Assuming you have two buttons named invite_btn and wallpost_btn, here’s the code:
//////////////////// start code block
import flash.external.ExternalInterface;
invite_btn.addEventListener(MouseEvent.CLICK, inviteFriends);
wallpost_btn.addEventListener(MouseEvent.CLICK, wallPost);
function inviteFriends(eventObject:MouseEvent):void {
ExternalInterface.call(“inviteFriends”);
}
function wallPost(eventObject:MouseEvent):void {
ExternalInterface.call(“wallPost”);
}
//////////////////// start code block
Enjoy!
