My Programming Tricks

Here we go:

1) Go to http://developers.facebook.com/ and click on Apps as circled below:






2) If you are here the first time, you will be asked for permission.





3) You may also be asked about your phone number to verify your fb account. Do it before the next step.




4) You’ll see the following wizard if you are here the first time. If you’ve set up any other apps before, you’ll be shown a different page which is the summary of the latest app you last developed.








5) Click on “Create New App” and you’ll see this:








Enter the App Display Name something like “Birthday Calender”. App Namespace is important as it is going to be your app URL: http://apps.facebook.com/[your app name space]. It’s like email name, the name you chose has to be available on the server before you can proceed. Check the agreement and press Continue after you are done.


6) You’ll see the App Basic Setting page:




The App (Display) Name and the Namespace are already filled up automatically. You just need to fill up the email and also the website. Please leave the http:// out from the App Domain. You just need something like mydomain.com and then press Enter. Please don’t click the mouse instead of pressing Enter. It won’t work. You can also add an icon in A so that it looks more professional.







You also need to fill the Website and App on Facebook. They can be something like:

http://www.yourdomain.com/fbapps/your_app_namespace/

If you don’t fill up the Secure Canvas URL, you’ll see this warning:




If you don’t have a secure server to run with your app, your account won’t be able to test the app but someone else account can still be running. (as of today 30th of October 2011)

If you don’t have a secure URL set up, you’ll see this when you run your App:




Things change very often and quickly in Facebook. I was allowed to run testing with my account even if I don’t have a secure server to run with a week ago. Now it’s different a week later.



7) Then click on Open Graph on your upper left:




If you run Open Graph for the first time, you’ll see the wizard:




I just put “read” as my action and book as my object. Then I clicked on “Get Started”.





There are 3 parts to it: 1) Action 2) Object 3) Aggregations



I now in Step 3 skipped Step 2 as I've already entered the object in the Wizard window. Anyway, you can change it later on as it is not really important now.




Just press Save and go to the Open Graph Dashboard.

8) Actually the app account is already set up at this point. If you want your app to be able to be published to the public, you’ll need approval. You’ll need to submit your Action (with proper aggregations to back it up) to be approved.

Facebook cannot guarantee that your submission will be approved as your app has to be very “professional” according to the document published.

You can stop here if you don’t need your app to go public.
.
.
.
.
.
.
.
.
.
.
.


If so, let’s continue.



Before the submission, you’ll need to get the aggregations set up properly or you’ll see this error after you click on Submit:





“ No Aggregations created for this Action Type. Please create a completed Aggregation populated with sample data before submitting for review.”

In order to avoid this problem, you’ll need at least a good aggregation set up. Click on Preview on the Aggregations section as circled above.






Click on Add New for the Preview Action:





Please make sure you give it a dummy Sample Image by simply getting any image URL and click on the Sample List and a pull down menu will show “Add Custom URL” and a “http://” will appear. Please enter a valid URL anything other than facebook.com. Click on Create after you are done.

Then click on Add New for the Preview Objects. This is the crucial part:




You basically need to fill up everything. DON’T leave anything blank. Click Create after you are done.

Now, here’s the final trick:







Please DO click on the Debug! You’ll see this:






If you don’t see any problem here, you are all set! Go back to the Open Graph dashboard, you’ll see this after you click Submit for the “Read” action:








The error about aggregations is gone and you are now ready to submit your action to be approved by Facebook! Congratulations!





Ya, forgot to tell you how to run the app.

Go here:




You can click on App on the top panel to reveal the summary page. The Canvas Page URL is your App's wall/profile page.




You can also click on "View App Profile Page" on the side panel.

This is the path:

http://www.facebook.com/apps/application.php?id=187586184649186&sk=wall

Note: this is for educational purposes and the look and feel might not look professional.

App Feature:
- Convert your friends' contact info into csv file
- You can configure particulars you like to add to the list (csv file)
- Good for backing up your FB contacts
- The csv file can be opened by spreadsheet software such as Excel and OpenOffice. (You need to follow the instruction to open it correctly)
- The texts are international (support most languages)


Internal Feature (Programming wise):
- It's OAuth 2.0 compatible
- Uses JSON (Open Graph) data format
- Uses FQL to run the data collection (Speed Up the Process)
- Uses Open Graph to get basic info of the user
- Compatible with IE7 (known to have problem with OAuth 2.0)
- Uses scope to open up permissions to gather protected graph info by obtaining the right access tokens
- Runs in PHP only
- UTF-8 compatible
- Email and Phone number will not be supported as FB will deprecate it any time



Special Treat:
- Those who donate will receive the full source code with explanation upon request. Please give me a kick if you really need this source code after you donate. Time is money. Installation Guide will also be provided but you need to run it on your own hosting and FB (developer) account. Hopefully, by obtaining the source code and install on your FB account, you can kick start your FB App development!

The documentation will also address the IE problem. Actually IE is not the culprit as it is just enforcing very strict anti CSRF (Cross-Site Request Forgery) rules.

Call this wave_background() function and your background will shake like you are underwater. But before that, make sure you have a background image that can mirror to x or y axis. Otherwise, the shake will look ugly.

<script>

var xpos = 100;
var wave_timer;
var tmp_string;
var ran_num;
var ran_dir;

function wave_background() {
 wave_timer=setInterval("move_background()",200);
}



function move_background() {
 ran_num = Math.floor(Math.random()*5);
 ran_dir = Math.floor(Math.random()*6);
 if (ran_dir == 2) {
  xpos = xpos - ran_num;
 }
 else {
  xpos = xpos + ran_num;
 }
 tmp_string = xpos + '';
 tmp_string = tmp_string + 'px -100px'; 
 document.body.style.backgroundPosition = tmp_string;
}



</script> 

Please check out my latest update here:

http://webtrick101.blogspot.com/2011/10/setting-up-facebook-app-update-oct-2011.html


Some info may not be applicable any more. This latest update also covers the aggregations part in more detail.


Many things have changed since the October 2011. With the Oauth 2.0, access_token is now a must. Even the hosting for the App, App's action and object are now needed to gain the access and approved by Facebook before it can be published to the world.


But I only touch on adding a legal action to your FB app here. Although there is still a long way for an App to be approved. The official doc is here:

http://developers.facebook.com/docs/beta/opengraph/tutorial/

But I find it to be a bit out of touch. That's why I decided to blog my experience here so that I can remember what I just did.




You need to fill up the App info completely before the setting up the Open Graph (circle in red). Note that, App Namespace is important and it has to be unique across facebook network. Just like applying a username for an email. Next, you also need to specify a App Domain or your open graph won't work. DO NOT include "http://" or facebook will just ignore your entry. Just yourdomain.com is sufficient. Press enter right after the entry and press save at the bottom of this page.


The Open Graph (Circled in Red)
I will only touch on the way I used to add a legal action to the app although there are still steps away from getting an approval for the FB Graph usage on your app.

If you are configuring this for the first time, FB will direct you to a wizard.

If not, you can go to the dashboard to reconfigure. Here's the screen shot:






I use "Bake" as my action and "Muffin" as my object for this example.



Here's the HTML to kick this "Bake Muffin" action to the FB system (not yet approved but you need this initial verification): (I modify from the example in the tutorial and some codes from I got from stackoverflow here and there. Credits go to whoever I copied from pieces here and there)

<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"
    xmlns:fb="https://www.facebook.com/2008/fbml"> 

<head prefix="og: http://ogp.me/ns# [Your App Namespace]: 
    http://ogp.me/ns/apps/[Your App Namespace]#"> 
  <meta property="fb:app_id"      content="[Your App ID]" /> 
  <meta property="og:type"        content="[Your App Namespace]:muffin" />
  <meta property="og:url"         content="[This URL]" /> 
  <meta property="og:title"       content="Any title" /> 
  <meta property="og:description" content="Any description" /> 
  <meta property="og:image"       content="Any image (url)" /> 


    <script type="text/javascript">
    function postkick()
    {
        FB.api('/me/[Your App Namespace]:bake' + 
                    '?muffin=[This URL]&access_token=[Your Access Token]','post',
                    function(response) {
                        var msg = 'Error occured';
                        if (!response || response.error) {
                            if (response.error) {
                                msg += "\n\nType: "+response.error.type+"\n\nMessage: "+response.error.message;
                            }
                            alert(msg);
                        } 
                        else {
                            alert('Post was successful! Action ID: ' + response.id);
                        }
        });
    }
    </script>

</head> 

<body> 
    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({ 
            appId:'[Your App ID]', cookie:true, 
            status:true, xfbml:true, oauth:true
        });
        </script>

        <fb:add-to-timeline></fb:add-to-timeline>

        <h3>
            <font size="30" face="verdana" color="grey"> Kicking Bake Muffin Action </font> 
        </h3> 


        <form>
            <input type="button" value="Kick In" onclick="postKick()" />
        </form>


   
</body> 
</html>

Please pay attention to those in red. Slight mishap may render the entry unsuccessful. Use this HTML and run it from the domain you specify in your App Domain.

You can get the access token from the "Get Code" in your Open Graph Dashboard (Action section). You'll see this:



You'll see this after you click on "Kick In" if it is successful:





If not, you'll get the error message telling you what went wrong.

Good luck!


P.S.: Sometimes you don't need the namespace in here:

<meta property="og:type" content="[Your App Namespace]:muffin" />

Please stick to the "Get Code" from the "Object Type" for your object.





After following the doc, I see this (after clicking "See App Timeline View"):





Maybe this is the reason why I keep on getting error during submission (I do see a dateline of 24th of October 2011 there):

No Aggregations created for this Action Type...

P.S.: Now out of a sudden, I am allowed to press "Continue" in the "Submit an Action Type for Approval". I did nothing special except adding another simple aggregate that shows OK in "The New Auth Dialog".







More tips for Facebook Open Graph aggregation:



If you see those signs, congratulations:

All tutorials I found online are for "x86 Thread Safe" version of PHP.

If you install the "Non Thread Safe" version, you won't get the php-cgi.exe in your PHP directory.

So far no one points this out yet.

Just in case you need this info.

Ever since facebook embraces AJAX, the popularity surged.

Yahoo and Google started this game and it is good. Microsoft AJAX is having compatibility problems with browsers and JQuery took the center stage.


I summarize the new trends as below so that it's easier to understand:

AJAX - HTML direct connection to server without refreshing a page
JQuery - Advanced Javascript codes to manipulate CSS and AJAX connection/data
JSON - An alternative to XML data format. XML is harder to use.
Microsoft AJAX - JQuery can replace it easily due to its wide compatibility.


JQuery is the winner as it can manipulate CSS and run AJAX stuff. Its partner, JSON, can easily replace XML due to its compatibility with browsers and programming languages. But their concept is all about associative arrays or hash tables. Please don't let the fancy name scare you.













The above shows the difference between "AJAX"ing with JSON and XML.

JSON is very Google/Yahoo feel whereas XML is very Microsoft feel. Hope this is easier to remember.

The problem I encountered is that I couldn't write a newline to the file under PC environment.

Then I tried this and it worked:

fwrite($fh, "My Text...\r\n");

Instead of just \n, I need to have the \r\n pair under PC environment. No such issue using PERL under PC. Weird.

Again, I compiled these codes from several sources and it's hard to give credit to all of them as some of them I only use several lines and some I only use the concept. Many I found are not fully working. That's why I want to show you the one that's working for me (I'm using PHP5 with Windows 7 via IIS7).

Note: Especially the part JQUERY AJAX pass JSON data to PHP. I don't need to decode the data in PHP. If json_decode() is used, the data will be gone. I really don't know why most examples are decoding the JSON data. But the return of JSON to JQUERY requires the json_encode() to do the job.



The JQUERY CODES:

$(document).ready(function() 
{
    $("#checkName").click(function(e)
    {
        userName = $(document.myForm.username).val();        

        if(userName.length <= 3) 
        {
            $("#display").text("username must be at least 4 characters"); 
            $("#display").css("color","red");
            $("#display").css("font-size","11");
        }
        
        else 
        {
            $.ajax(
            {
                type: 'POST',
                url: 'CheckUserName.php',
                data: { 
   userName: $(document.myForm.username).val()
  },
                dataType: 'json',
                success: function(response) 
                {
                    if(response.found == false) 
                    {
                      $("#display").text("username is available");
                      $("#display").css("background-color","lightgreen");
                    }
                    else
                    {
                      $("#display").text("username is already taken");
                      $("#display").css("background-color","red");
                    }
                }
            });
        } 
    });
});

The HTML:

<form name=myForm>

<input type=text name=username size=35 maxlength=200> 

<input type=button name=checkName id=checkName value="Check Availability">

<div id="display"></div>

</form>

The PHP (CheckUserName.php) :

<?PHP

 $username = $_POST['userName'];  // no need to decode JSON

 $dblink = mysql_connect(yourhost, 'yourID', 'yourPassword');

 if (!$dblink) {
   die('Could not connect: ' . mysql_error());
 }

 mysql_select_db('yourDBname'); 

 $result = mysql_query("select * from yourMemberNamelist where Username = '$username'");

 while ($row = mysql_fetch_assoc($result)) {
  $temp = $row["Username"];

 }


 if ($temp != $_POST['userName']) {
  $return['found'] = false;
 }
 else {
  $return['found'] = true;
 }

 echo json_encode($return);


 return;

?>

Again, I put those highlights in red to signify "attention". This is what works for me using IIS7. I'm not sure why there are so many codes out there that is not really working. Maybe it's my IIS7 with PHP5.

These codes came from many sources until I forgot the origins. I just combine all the good stuffs I found from the net. Sorry if I use your codes somewhere and remind me to include your credit as I forgot the origin of it.

The Javascript function:

function checkpassword(pw) {

var Score = 0;

var Result = "weak";



 if (pw.length>5 && pw.length<8) { Score = (Score+6); }
 
 else if (pw.length>7 && pw.length<16) { Score = (Score+12); }

 else if (pw.length>15) { Score = (Score+18); }


  if (pw.match(/[a-z]/)) { Score = (Score+1); }

  if (pw.match(/[A-Z]/)) { Score = (Score+5); }

  if (pw.match(/\d+/)) { Score = (Score+5); }

  if (pw.match(/(.*[0-9].*[0-9].*[0-9])/)) { Score = (Score+5); }

  if (pw.match(/.[!,@,#,$,%,^,&,*,?,_,~]/)) { Score = (Score+5); }       

  if (pw.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)) { Score = (Score+5); }

  if (pw.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { Score = (Score+5); }

  if (pw.match(/([a-zA-Z])/) && pw.match(/([0-9])/)) { Score = (Score+5); }  

  if (pw.match(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/)) { Score = (Score+5); }





 if (pw.length == 0) { Result = ""; }

 else if (pw.length < 6) { Result = "too short"; }

 else if (Score < 16) { Result = "very weak"; }

 else if (Score > 15 && Score < 25) { Result = " weak"; }

 else if (Score > 24 && Score < 35) { Result = "mediocre"; }

 else if (Score > 34 && Score < 45) { Result = "strong"; }

 else { Result = "strong enough"; }

 document.getElementById("yourResultDivID").innerHTML = Result;

}

The HTML:

<input type=password name=pw size=35 maxlength=12 onkeyup="javascript:checkpassword(this.value);"> 

<div id="yourResultDivID" style="display:inline;" width=100></div>

The thing to pay attention to is highlighted in red. Something I found many other ways in the net but this is what I like.