Programming Ideas, Logics, Tips and Tricks » development

Facebook application development – Quick note

Mr Me — Wed, 05 May 2010 23:37:54 +0000

This is a quick note for myself to remember some tricks while we develop a Facebook application.

If you are a beginner in Facebook application development, go here first.

If you an expert in Facebook development, go here.

The steps in creating a facebook app.

1) Register an application in facebook

2) Add Canvas URL

3) Add Canvas Callback url

4) Test the canvas is working or not

To execute FBML inside your code (for iframe), you must add FBConnect URL

You need to set xd_receiver.htm in your webroot folder

Download facebook php api

If you are using iframe, remember to use facebook-canvas url for links and forms , not your local url.

If you are using canvas mode, you cannot use body tag in your html. You dont need to keep the basic html layout

like head, title, body etc

An example page in the canvas_callback looks like this:

The steps in creating a facebook app.

1) Register an application in facebook

2) Add Canvas URL

3) Add Canvas Callback url

4) Test the canvas is working or not

To execute FBML inside your code (for iframe), you must add FBConnect URL

You need to set xd_receiver.htm in your webroot folder

Download facebook php api

If you are using iframe, remember to use facebook-canvas url for links and forms , not your local url.

If you are using canvas mode, you cannot use body tag in your html. You dont need to keep the basic html layout

like head, title, body etc

An example page in the canvas_callback looks like this:

require_once(‘facebook.php’);

//ini_set (‘display_errors’, 1);

$appapikey = ’0d7c64e9a387eXXXXXXXXXXXXXXXXXXX’;

$appsecret = ’9fc9eef6dXXXXXXXXXXXXXXXXXXXXXXX’;

$facebook = new Facebook($appapikey, $appsecret);

Sometimes , in IE and Safari, infinite redirect loop will happen. It is due to session problem

add the below code to solve this!

$prefix = ($_REQUEST['fb_sig_user']) ? ‘fb_sig’ : $appapikey;

if( isset($_REQUEST[$prefix.'_session_key']) ){

session_name( $_REQUEST[$prefix.'_session_key'] );

session_start();

$_SESSION['fb_user'] = $_REQUEST[$prefix.'_user'];

$_SESSION['fb_session_key'] = $_REQUEST[$prefix.'_session_key'];

$_SESSION['fb_expires'] = $_REQUEST[$prefix.'_expires'];

$_SESSION['fb_in_canvas'] = $_REQUEST[$prefix.'_in_canvas'];

$_SESSION['fb_time'] = $_REQUEST[$prefix.'_time'];

$_SESSION['fb_profile_update_time'] = $_REQUEST[$prefix.'_profile_update_time'];

$_SESSION['fb_api_key'] = $_REQUEST[$prefix.'_api_key'];

} else {

// Just so there *is* a session for times when there is no fb session

session_start();

}

If you use iframe, remember to use this funcion as well

$facebook->require_frame();

Also use the following function if you need authentication

$user_id = $facebook->require_login();

Don’t forget to add this in html tag (for iframe users)

“http://www.w3.org/1999/xhtml” xmlns:fb=“http://www.facebook.com/2008/fbml”>

For facebook client side api (Javascript), include this line

For example, if you need to open a add to bookmark dialog on button click, use:

onclick=”FB.Connect.showBookmarkDialog();”

Add this line very bottom of the page, to avoid javascript error in some browsers (IE6 or 7 not sure)

id=“FB_HiddenIFrameContainer” style=“display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;”>

Sometimes, your application inside iframe shows scroll bar. It is due to dynamically increasing height or width of the content

use the below script at the bottom of the page.

Look inside the facebook api php file to know more about the functions. For example to get friends info

$friends = $facebook->api_client->friends_get(”,$user_id);

$friends_info = $facebook->api_client->users_getInfo(implode(‘,’, $friends), ‘first_name,last_name,pic_square ‘ );

For ajax call inside your iframe, to avoid redirect loop, pass the full server query url along with your file.

eg:

$(‘#browse_ajax’).load(‘browse_ajax.php?QUERY_STRING']?>’);

When you pass Query string, remember to replace your parameters passing via get method. Otherwise

you cannot pass yourown custom values

function get_query_string()

{

$serverQuery = $_SERVER['QUERY_STRING'];

$serverQuery= str_replace(‘page=’, ‘page_=’, $serverQuery);

$serverQuery = str_replace(‘fan=’, ‘fan_=’, $serverQuery);

$serverQuery = str_replace(‘uid=’, ‘uid_=’, $serverQuery);

return $serverQuery;

}

Use the below function for publish to wall option:

function publishWall()

{

var message = ‘type your message here’;

var attachment = { ‘name’: ‘your text here’, ‘href’: ‘http://urlhere.com/’, ‘description’: ‘Your message here’, ‘media’: [{ 'type': 'image', 'src': 'urlhere.com', 'href': 'urlhere.com'}] };

var action_links = [{'text':'More like this', 'href':'urlhere.com'}];

FB.Connect.streamPublish(message, attachment, action_links);

}

jQtouch – amazing jQuery for iPhone

Mr Me — Sun, 25 Apr 2010 20:24:40 +0000

I think, i am becoming jQuery fan day by day. If you have an iPhone or iPod Touch or iPad, try this url in your browser:

http://sajithmr.me/jqtouch/demos/main/

You will wonder for some minutes. Yes, it is not a application, it is a website and every action is created by our dearest jQuery using jQTouch library

This is the official site of jQTouch: http://www.jqtouch.com/

Wait for my post about integrating jQtouch in PhoneGap to create iPhone applications within minutes.

Symfony V/S Codeigniter

Mr Me — Tue, 02 Jun 2009 12:55:58 +0000

V/S

I have developed more than 7 web projects using Symfony framework. Mobshare.in, Amvizone.com, Campaignmanger.in , Movieonline.in etc are some of the websites. But for the past 5 months my developement is in Codeigniter. It is very very lighter than Symfony and has almost all the features of Symfony. Both are MVC framework. But symfony has 4 layer while the latter has only two. Symfony uses modules (extra layer) for Controllers. But Codeigniter eleminates that layer. It is similer to Ruby on Rails.

Symfony uses naming convention to map controller and view. For example controller index need indexSuccess.php file as view or indexError.php as error. But in Codeigniter, we have to specify the view manually from the controller

$this->load->view(‘myview.php’);

Symfony has command line tool to develop all the model classes. One thing you have to do is specify the scheme.yml file. But in Codeigniter, you have to make model classes from the scratch. However a lot of database operation libraries are available with it to make the coding life easier. Since we have to load each libraries manually, Codeigniter gaurantee the speed of execution. (Autoloading option is there, but in most of the case we can eliminate unwanted libraries from autoloading – just like execute on the fly)

There is no built in ajax and javascript function in codeigniter. But you can add it as plugin. Like Symfony it also has cache management, logs, testing, helpers, url rules, documentator, scaffolding etc

Codeigniter has a simple folder hierachy that everybody can understand and very less learning curve than Symfony.

Go through this link if you wanna know about all the features of codeigniter : http://codeigniter.com/user_guide/toc.html

I found another interesting comparison of these two in : http://www.devtrench.com/codeigniter-vs-symfony/

Simple steps to create a wordpress theme

Mr Me — Thu, 03 Apr 2008 04:53:01 +0000

WordPress theme is merely a folder which is to be placed in wp-content folder of wordpress hierarchy .

The basic files needed in that theme folder is index.php and style.css

In this style.css the following lines are very essential.
/*

Theme Name: Theme Namet

Theme URI: http://www.sajithmr.com/

Description: Details of your theme

Author: Author name

Author URI: http://www.sajithmr.com/

This theme was designed and built by Sajith

The CSS, XHTML and design is released under GPL

http://www.opensource.org/licenses/gpl-license.php

*/
Design your theme (static page) and put this as index.php in theme folder. Go to wordpress admin panel and set the current theme as the theme you created now. Then you can see the static design created by you.

Next step is make each part dynamic. For example if you want to make your blog title dynamic , replace your static code with

wp_title(); ?>

Make your style sheet path also dynamic by : ” type=”text/css” media=”screen” />

Like this , there is a lot of built in dynamic functions in wordpress.I will give you some links at the end of this post .

Another , very special , feature of wordpress theme is its hierarchy. You can sub divide the index.php files into a lot of sub files. See the below picture

(Click on the picture to see full size)

This picture shows the control flow whenever a particular url request arrives. For example you can write all the code for footer in footer.php and can include this file in your index.php file as

get_footer(); ?>

Some important wordpress dynamic functions:

Function for showing posts:

See this link for further development: http://codex.wordpress.org/Theme_Development

Some useful functions:

wp_list_categories(‘title_li=’); ?> /* Listing categories */

edit_post_link(‘Edit this entry.’,”,”); ?> /* Post edit link*/

the_category() ?> /* Shows current category*/

wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);?> /* Page Links*/

wp_head(); ?> /* Head information */

wp_loginout(); ?> /* Login / logout links*/

the_permalink() ?> /* Get the permalink */

the_excerpt(); ?> /* Get the short description of a post*/

posts_nav_link(‘ — ‘, __(‘« Older Posts’), __(‘Newer Posts »’)); ?> /*Page navigation*/