Did You Just Allow Some Facebook App Access To You Bank Account?

That’s something you should watch out for. Some of those Facebook apps out there will ask for access to parts of your Facebook account they have no business accessing. Read all the permissions they are requesting before clicking allow or something like what you see below may go through without you knowing.

Facebook Dev Tips List

These are some handy queries you will need when building Facebook Apps. As I work on Facebook stuff building out FanPageEngine tool and building various Facebook Apps, I spend hours figuring this stuff out so I don’t want it to vanish after I use it. Bookmark this page. I will be adding more and more to it as I find new nuggets of useful code.

CURL Code For Getting Data From Facebook Graph API

<?php

function getsomeinfo($id,$token) {
	
  $url = "https://graph.facebook.com/YOUR_QUERY_HERE;
  $ch = curl_init($url);
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
  curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
  curl_setopt($ch, CURLOPT_HTTPHEADER, array('Host: graph.facebook.com'));
  $output1 = curl_exec($ch);
  curl_close($ch);
	
  return $output;
	
}

$thedata = json_decode(getsomeinfo(PAGE_ID/USER_ID,ACCESS_TOKEN),true);

?>

List of Apps Already Installed On A Page
https://graph.facebook.com/PAGE_ID/tabs?access_token=PAGE_ACCESS_TOKEN

Need A Page_Access_Token? Here Is How To Get It
https://graph.facebook.com/PAGE_ID/?fields=access_token&access_token=ACCESS_TOKEN

Get Information About A Given Page
https://graph.facebook.com/PAGE_ID/?metadata=1&access_token=ACCESS_TOKEN

Connect To Facebook From A Web Page

<?php

session_start();

if($_GET['pros'] == '1') {

    if(isset($_SESSION['access_token']) && isset($_SESSION['uid'])) {
       $graph_url = "https://graph.facebook.com/me?" .
         "access_token=" . $_SESSION['access_token'];

		$_SESSION['ai'] = $ai;
		$session = $_SESSION;
		$uid = $_SESSION['uid'];
		$me = json_decode(file_get_contents($graph_url), true);
		
     } 

}

if(!$me) {

   $url = (!empty($_SERVER['HTTPS'])) ? "https://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'] :
       "http://".$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
   
   $url = $url.'&pros=1';
		
   $loginUrl = 'https://www.facebook.com/dialog/oauth?'
        . 'client_id=YOUR_APP_ID&redirect_uri='.$uuurl.'&'
        . 'scope=email,manage_pages,OTHER_PERMISSIONS_REQUEST_LIST&'
        . 'response_type=token';
		
   echo '<center><a href="'.$loginUrl.'">'
        . '<img src="http://static.ak.fbcdn.net/rsrc.php/zB6N8/hash/4li2k73z.gif" border="0">'
        . '</a></center>';

} else {

   echo "Hello ".$me['first_name'];

}

?>

Facebook page alignment and removing the scroll bars

If you’ve read the previous post I did, Tutorial on how to add HTML to facebook, you probably know now how to get your custom HTML into a facebook page. Once you do, you might see a slight problem, your page may be miss-aligned and may have scroll bars. This happens if your images or DIVs are bigger than 520 pixels wide. Sometimes your elements would be 520 pixels wide and it would still have scroll bars and look all messed up, this might also be because you may have a border on the outer DIV or an image. If you’ve checked everything and it is all within the 520 pixel width but the scroll bars are not going away, you may be in the category of pages which just do not play well with the iFrame and to remedy this I”ve been using some CSS and JavaScript to move things into place and get rid of the scroll bars.

UPDATE: Also try doing it this way, I am told things have changed since I wrote this post.

First of all make sure your opening HTML tag looks like this:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

The next thing you need to add to your page is the Facebook auto-size javaScript code. It goes right before the closing HEAD tag.

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>  
       
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Then the last piece of code you need to insert goes before the closing BODY tag. Make sure to replace YOUR APP ID with your actual app ID.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId  : 'YOUR APP ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml  : true  // parse XFBML
});

sizeChangeCallback();
</script>

Now this is still not a guarantee that it’ll be perfect, there are a few bugs with auto-size function on facebook, so here is another piece of code to replace the first Facebook auto-size JavaScript code, it is an older and my own hacking of the code but it works on some of my pages.

Place this code right under the opening BODY tag:

<script src="http://connect.facebook.net/en_US/all.js"></script>

<script type="text/javascript">
    function sizeChangeCallback() {
    FB.Canvas.setSize();
 }
</script>

And then add this at the very bottom before the closing BODY tag replacing the previous code:

<script language="javaScript">
    sizeChangeCallback();
</script>

The problem with getting this auto size thing to work has been going on over a year now and Facebook has still yet to fix this issue once and for all… There are so many fixes out on the web but none of them work every time. You just about have to try different things until you find the one that works for you. In fact, I am working on a page right now that I can not, for the life of me, get to resize. I’ve tried all the hacks and nothing fixes it permanently. It’ll work one time and then you refresh and it puts the scroll bars back in.

Another thing that may work is resizing everything to 518px in width and sometimes even to 510px to get it to work.

Also you can specify a static length for the page to do away with the scroll bars but then you have to know how tall your page will be. Dynamic content will not work with this if it changes the height of the page.

To specify the height, place this code before the closing HEAD tag:

<script type="text/javascript">

window.fbAsyncInit = function() {
FB.Canvas.setSize({ width: 520, height: 1100 });
}

</script>

And then add this code before the closing BODY tag:

<div id="fb-root"></div>

<script src="http://connect.facebook.net/en_US/all.js"></script>

Experiment with these things and you might find a combination that works for you. Let me know in the comments if you find a better way to do this, I’d love to hear about it.

Good luck.

Tutorial on how to add HTML to facebook

I wrote about this before but we all know that facebook changes things on daily basis so the previous article has become obsolete, this is why I decided to update it and actually create a whole new tutorial as mostly everything in the old one no longer applies.

To add some custom HTML to facebook you have to create a facebook page, (not to confuse with a personal facebook profile) and then add HTML to it via a custom iFrame Application. Now don’t get scared off by this, I will walk you through every step in this tutorial.

I’ll show you how to create a facebook page first and then we’ll get our hands dirty with the iFrame goodness.

Creating A Facebook Page

After logging into your facebook account, go to http://www.facebook.com/pages/create.php and follow me as we create a facebook page.

Choosing The Right Page Category

On this page you can choose to create one of six different types of pages, depending on what category your page topic falls under. Choosing the correct category for your page will ensure that your potential customers are able to find your company easier. You also get to have special information that you can add for each category that might not be available in other categories. So make sure to choose the correct category. Let’s take a look at each one and what kind of businesses they apply to.

Local Business or Place

If you have a physical retail location that customers would come and visit you at, your choice should be “Local Business or Place”. With this category you will be able to specify the address and hours of operation of the business as in other categories you would not necessarily have that option.

Company, Organization, or Institution

This category is for companies or organizations, ones that might have multiple locations or other bigger establishments like banks, factories or something like that. Other companies that might want to setup a page in this category are ones that might not necessarily have a local branch, even small businesses that are run from home. But before you choose this category, take a look at the next one, it might apply better for you… or it might not. Let’s see.

Brand or Product

If you offer a specific product or are a brand that you want to market, this category would be the best choice. Here, as you can imagine, you would be getting very specific about what the topic of a page would be. A product like a specific kind of shoes or a shoe brand, a type of furniture like a special chair design or a furniture brand. I think you get the picture what I’m talking about.

Artist, Band or Public Figure

This difference between this category and the next one might be a bit blurry but they are both for the entertainment industry except the first one here, the “Artist, Band or Public Figure” is for a specific artist, band or a public figure as upposed to the next one which is for a broader type of business, like an agency, sports league or a TV channel. So if you are a band or an actor, this “Artist, Band, etc…” category is for you.

Entertainment

As I mentioned above, this “Entertainment” category is for a wide variety of entertainment industry type business. If you are not an individual or a group like a band but a business that is in the entertainment industry you should choose this category.

Cause or Community

This category is for some sort of a cause, like a cure for a disease or a support campaign, also a community or a group of people that have like interests. If you are looking to add custom HTML to your page, this is not a good category to go with as a page in this category is not allowed to have iFrame tabs and another reason you should not pick this category is after it gets 10,000 fans, facebook will throw the page into a communities pile and you will no longer own it but will just be a member. So stay away from this one, find a reason why you qualify for any of the other ones.

I am going to create a page for a fictitious toy called Wobble Mobble, so I will choose the Brand or Product category and then will choose Games/Toys subcategory from the drop down menu and enter the name of the toy into the text box. Check the “I agree to Facebook Pages Terms” and click Get Started.

Your New Page

Now you have your brand new facebook page. It’s still super empty so you can, if you like, go through the steps they recommend to setup your page a bit more. Add a profile image and invite some friends… but on the other hand you might want to wait till you get your custom page up before you invite anybody here, so let’s get to that now.

Adding Custom HTML Using An iFrame Application

To add custom HTML to your page you need to create an application ‘Tab” within your page. This “Tab” will be what will hold the iFrame that will display your HTML. Yes I know sounds confusing, just follow me along, I’ll show you how this works.

Let me tell you how a facebook page works so you have a bigger picture and understand better what all these tabs pages and apps are all about.

A facebook page is not really a one, single page, it is more of a bunch of pages in one, we will call them tabs… more like a mini-website. It has a Wall tab, where you and the fans talk and add announcements, pictures, videos and what have you. Then there is the Info tab which holds the information about the page. A photos tab is where you will display all the photos that you upload to the page. These three tabs come included by default with your facebook page and you can add mode additional tabs. The only way to add these extra tabs is to add facebook apps to your page, each app you install will show up as a new tab. So what we need to do is create a custom app ourselves that we can add to our page as a new tab. This app that we create will pull an external web page via the iFrame, from somewhere online that will hold your custom HTML.

This was a quick crash course on adding custom HTML to your page, but now let’s dig in and see how it’s all actually done. We have the fan page so now we need to create an external page which will hold our custom HTML. This will require that we have some sort of web hosting already setup. I am going to assume that you already have a website online somewhere, so if you do not have one yet, you will need to find another tutorial about setting up a website first and then come back to this and continue from this point.

Creating A Custom HTML Web Page

Here all we really need to do is create a .php page that will hold the custom HTML code that we want displayed on the facebook page. You can build it as any standard html page, the only thing is you need to make sure your page is 520 px wide and make the page have a .php extension.

I built a simple HTML page and uploaded it to this website. It is accessible by simply going to the URL: http://www.webdesignideas.org/fb.php The iFrame in the new Facebook App that we create will call this page and display it right inside facebook. Now let’s create an app.

Creating A Facebook App

To get started creating an Facebook application, go to https://www.facebook.com/developers/createapp.php and enter the App name in the text box, then click Agree and Create App. You will get a Security Check box that will ask you to enter some text into a text box, do that and click Submit.

About Section

Now we get into setting up the app. On the first page (above) you will see that we have six sections on the left and we are on the About section right now. Here the only thing you need to set up is the Application Name, which we already entered on the previous page and it’s been automatically populated for us. You have a choice to upload an Icon and a Logo images for the App if you like. The next thing we need to enter is the User Support Address, which we have marked as email and entered my email into the text box. For the Contact Email I entered my email also. That will do it for this section. Do not click Save Changes until we are done with all the sections. Click on the Web Site section in the left sidebar.

Web Site Section

In the Web Site section I entered the website URL where the custom HTML page is residing, which is “http://www.webdesignideas.org”. Remember, this is not the actual URL of the page but the URL of the website where the page resides. Then I entered the domain of the site, which is just “webdesignideas.org” without the “http://www”. Click the Facebook Integration section in the left sidebar to continue.

Facebook Integration Section

This is the section where we tell facebook where to look for our custom HTML page. I gave the Canvas Page a url of http://apps.facebook.com/”wobblemobble”. This is the URL of where this App we just created will reside, so it is good to give it a url that represents your page name with no spaces between the words.

The Canvas URL is the URL of where our custom HTML page lives again, don’t forget the trailing slash, they really want that one. iFrame Size should be Auto-resize, and Social Discovery should be enabled.

The Tab Name we can make whatever we want, plus we’ll be able to change this later on so it really doesn’t matter at this point what you call it. I like my primary page to be called Welcome so that is what I entered. Then I entered the actual URL of the custom HTML page.

At this point you can click Save Changes button at the bottom.

New App Information

Congratulations, you’ve just built your first facebook app! Now let’s add it to our facebook page. Click the Application Profile Page button (see image above).

Your App Page On Facebook

This is your app’s page on facebook. Since this is not a public app but just a placeholder for our custom HTML, we will not need to personalize this area. Just ignore everything on this page except for the Add to My Page link in the left sidebar (see image above).

Find your page that you created earlier and click Add to Page next to it and click Close.

Now that you’ve added the app to your page, let’s go see what it looks like and set it up as the default tab. Click the Facebook logo at the top left to go to the your facebook profile page.

Setting Up The Page With The New App

On your facebook profile page click the Pages link in the left sidebar (see image above). Find your page in the list and click on it.

Now you should see the app that we’ve created in the left sidebar showing up as a one of the tabs. Ours is the Welcome one in the image above. Let’s click on it and see what it looks like.

The New Welcome Tab

As you can see we have our custom page showing right inside facebook. Now we can set this page to be the default tab that opens up to any one visiting the page that has not liked it yet. This is great to create offers and capture emails if you build a custom page that does something like that. Let’s make this tab default.

Click the Wall tab first in the left sidebar and then the Edit Page button on the top right.

Here pick your tab, in our case it is named Welcome, from the Default Landing Page menu and click Save Changes. Now anytime someone visits your page, the Welcome tab will be the first thing they see.

Whew, that was a long tutorial.. It’s almost 2 am already and I am ready to pass out. I’ll come back in the morning and go through the tutorial to make sure I didn’t make any mistakes as I’m half asleep. lol joking… zzzzz…….zzzz… oh, that’s right… where was I?

Anyway, I hope this tutorial helps you out. Please leave your comments and questions below and I will be all over them as flies on.. um… a picnic fruit tray.

Read the Facebook page alignment and removing the scroll bars next »

Later.

Connecting, Getting User Info & User’s Fan Pages From Facebook

It took me hours to track down a bunch of the code examples I needed for the Facebook canvas application I am building. How to connect your canvas application to Facebook and how to pull the user info and a list of fan pages that the user admins. So now that I have all this info I am going to post it here to share with my readers in case you ever need this.

Connecting your application to Facebook

You will need to have the facebook.php file on your server. Download it here: facebook.zip

Add the code below into the head area and you will need to replace the APP ID and the APP Secret which you get when you :

<?php

require 'facebook.php';

$facebook = new Facebook(array(
  'appId'  => 'YOUR_APP_ID',
  'secret' => 'YOUR_APP_SECRET',
  'cookie' => true,
));

$session = $facebook->getSession();

$me = null;
// Session based API call.
if ($session) {
  try {
    $uid = $facebook->getUser();
    $me = $facebook->api('/me');
  } catch (FacebookApiException $e) {
    error_log($e);
  }
}

if ($me) {
  $logoutUrl = $facebook->getLogoutUrl();
} else {
  $loginUrl = $facebook->getLoginUrl();
}

?>

After the opening body tag add this:


<div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId   : '<?php echo $facebook->getAppId(); ?>',
          session : <?php echo json_encode($session); ?>, // don't refetch the session when PHP already has it
          status  : true, // check login status
          cookie  : true, // enable cookies to allow the server to access the session
          xfbml   : true // parse XFBML
        });

        // whenever the user logs in, we refresh the page
        FB.Event.subscribe('auth.login', function() {
          window.location.reload();
        });
      };

      (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);
      }());
    </script>

At this point you can tell the user to connect to Facebook and this is done very simply. First you check if they are already connected with an IF statement like this:

if($me):

If $me is set, means they are already connected and the $session and $me variables are available. However if it is not set then we want to show the connect button like this:

else :
echo ‘Not connected’;
echo ‘‘;
endif

Notice I added the perms=”email” into the button code, this is where you tell facebook what permissions you want the user to allow you to have.

So here is the complete code:

<?php

if($me) :

// get user vars

else :
		echo 'Not connected';
		echo '<fb:login-button perms="email"></fb:login-button>';
endif

?>

Getting User Info Variables From Facebook

Once the user is connected, you can get all kinds of info from Facebook. Here are a few examples of how to call this info.

The $session Array

The first info holder is the $session array. It holds the main connection session info.

Here is what’s inside $session:

$session[‘session_key’] => 3.1qVoJBwHceusdjIHofdgpI2Nig__.2500.12098375460-20938756
$session[‘uid’] => 29873546023
$session[‘expires’] => 20897352352
$session[‘secret’] => oiUGOF78h39h329498hf
$session[‘base_domain’] => domain.com
$session[‘access_token’] => realLongString_wedg80273hd2uy3g29h9
$session[‘sig’] => 6kjbIUH98wh0ed2

The ones you will probably use are $session[‘uid’] which gives you the user’s Facebook User ID, the other one is $session[‘access_token’] which you need to access that special permissions items like user’s email, birthdate and others. I will go into that a little later.

The $me Array

The next big array that holds a lot of info for ya is $me array. This is a good one to use for most of the user’s info, I did not use the $session array for much except to call the special permissions info.

Here is what’s inside $me:

$me[‘id’] => 923846520
$me[‘name’] => Fname Lname
$me[‘first_name’] => Fname
$me[‘last_name’] => Lname
$me[‘link’] => http://www.facebook.com/username
$me[‘location’] => Array
(
[id] => 238746520387598
[name] => City, State
)

$me[‘bio’] => User’s bio.
$me[‘gender’] => male
$me[‘timezone’] => -8
$me[‘locale’] => en_US
$me[‘verified’] => 1
$me[‘updated_time’] => 2010-11-27T20:10:25+0000

Getting A List Of User’s Pages

Sometime you might have a need to get a list of the user’s fan pages that they are the admin to. To do that you will need to run a curl function. This means you need to make sure your server has CURL installed and enabled.

Here is the CURL function that will get the list of fan pages:

<?php

function getallpages($uid,$atoken) {
	
	$url = "https://graph.facebook.com/".$uid."/accounts?access_token=".$atoken;
	$ch = curl_init($url);
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
	curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
	curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
	curl_setopt($ch, CURLOPT_HTTPHEADER, array('Host: graph.facebook.com'));
	$output = curl_exec($ch);
	curl_close($ch);
	
	return $output;
	
}

$pagesarray = getallpages($me['id'],$session['access_token']);

?>

This function can be used for various different requests… in this case we called for user accounts (that is what they call pages). This API call url: https://graph.facebook.com/USER_ID/accounts?access_token=ACCESS_TOKEN gets you the accounts (pages). You can also use it to call photos, videos, friends and etc. You just replace the word accounts with whatever else you want to call. You can find all the variables here: Graph API Reference – User

Well, that’s about it… Hope someone finds it useful.

Until next time.

~ Valiik