As you all know recent changes in privacy issues made Facebook to change their basic API and added some security concerns. From my best practise, most of the old applications are safe, but you will be in trouble when you create new application. By default you cannot access user’s photos, profile pictures , albums etc. If you continue with old REST API, you may face this problem. You will get an empty array or json string when you call photos.getAlbums function.

If you test these functions from Facebook Console Tool:

http://developers.facebook.com/docs/reference/rest/photos.getAlbums

It returns real value when you select old applications and returns empty string [] if you select your newly created Facebook app.

To get all those support, you need to use new Graph API

But if you follow the same steps mentioned in that official document, you will still get this empty string problem. Because, in the basic authentication call, there is no permission type is mentioned. You can only see a basic message with Allow or Deny button.

According to that document, as the part of authentication, you need to call this url with your client id and redirect url and it returns an access_token after a #

https://graph.facebook.com/oauth/authorize?
    client_id=...&
    redirect_uri=http://www.example.com/oauth_redirect

You need to use this access_token to request all other functions, eg:

https://graph.facebook.com/me?access_token=...

This call will work for most of the requests except photos or albums. So the mistake in these calls are the permission.

Here is the correction:

https://graph.facebook.com/oauth/authorize?
    client_id=...&
    redirect_uri=http://www.example.com/oauth_redirect&perms=publish_stream,user_photos

Here we pass perms parameter to set different permission and if you use the access_token after this request , you can access user photos and albums. You can see another permission popup with album and photo access.

Here is the list of such extended permissions in Facebook.

This is the problem when you use new Javascript SDK for graph API, or when you try to integrate these API in PHP or PERL or any other Server side scripting language from the scratch.

If you use new Facebook PHP Graph SDK , you cannot get these problems, but there is still another hidden problem if you continue testing code by the example provided by them.

It is my next POST . See you at there

Thanks

Sajith

If you aim to create a multi-language  website using PHP + Mysql , remember the following tips.

• You can use mysql database for this purpose rather than using separate language files as usual content management system does.
• You can create a table with following structure for this purpose.Table: muli-lang
  string_id:
  page_id:
  en:
  arb:
  fr:
• Here string_id is the code for getting content  eg: welcome_message
  page_id is for saving in which page the content belongs to.  eg: home_page, login_page etc
  In field en, you have to enter the message in english,eg: Welcome to my website
  In arb field you can enter the corresponding translation in arab. eg: مرحبا بكم في موقعي
• If you need to add more languages, it is just adding one more column to this table and put all translated values.
• Write a class or functions in PHP to retrieve all the informations.
  eg: function get(language_id, page_id) returns corresponding message
• Use session to save lang value. For example if you switch to french, set a variable lang= fr and use this variable to decide which column is to access from multi-lang table.eg: the sql will be , SELECT $lang FROM multi-lang WHERE string_id = ‘welcome_message’
• For some string fragment like about_us, contact_us etc, it has global scope; then leave page_id as blank
• To avoid multiple calling of functions to get translation, write a common function to get all translation for a particular page_id as array, and use this array all through the page. Thus you can avoid mysql query multiple times.
  eg: function get_all($page_id) returns array, say $Translate of all strings replacement. $Translate['login_message'], $Translate['login_error']
• Additional things to remember:
• Use this meta tab in html header
  <meta http-equiv=”Content-Type” content=”text /html; charset=UTF-8” />
  to show all languages
• Create my_sql table in UTF-8 format
• Execute the following query before executing any retrieval queries. Otherwise you may get ????? for language like Arabic, Hindi, Chinese etc.
  mysql_query(“SET CHARACTER SET ‘utf8′”, $link);

I hope these information may help you when you develop a multi-langauge support website

Thank you
Sajith

If you are using https pages or some of the pages (payment pages etc) in your website, keep the following in your mind. In some browsers especially IE shows warning of non-secured content in secured page. This cause user the feeling that the website is not secured.

1. Use relative url always. Relative URL means those without starting with http:// or https://, instead use relative url.
2. If you need to use full url, use dynamic base name in with your programming language.For example in PHP, define BASE_URL = http://www.yoursite.com and use this variable in every links and forms. Change the BASE_URL value between http and https depending upon the protocol ($_SERVER['HTTP_HOST'])
3. Check  inside javascript function whether it is calling any non-secured url. (For example, sometime you may use full url inside Javascript). Check using if condition to decide, which protocol to use, like what Google Analytic does.
   eg:  (“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
4. Check if there is any flash content which tries to load data from non-secured url. There is a chance to load some xml configuration files using http protocol
5. Also change the codebase parameter value in object tag (flash or other media) whether it is pointing http or https url. There is a chance for this url in flash content.
   codebase=”http://download.macromedia.com/pub/shockwave /cabs/flash/swflash.cab#version=9,0,115,0″
   Change this url to https://downoad…
   
   
6. If you are using facebook connect or such integration, check the javascript initialisation code.
   FB.init(“78bc8ffb87c41eabb6395a2045c76021″, “/xd_receiver.htm“);
   Inside the xd_receiver.htm file, the cross platform callback will be non secured url (http)
   Change this to xd_reciver_ssl.htm and use new code, which is available in Facebook documentation

Tools like Fiddler can be used to check which url is non-secured. Firebug cannot show all non-secure connections. If the above steps do not solve your problem, try disabling javascript files one by one to point out which call is making the problem. Also try this by disabling Flash objects one by one.

Good luck guys

Cheers

Sajith

I don’t need to explain anything about this game, sorry movie

Go to :http://www.bankrungame.com/

Here is the url: http://flexigrid.info/

If you are using Codeigniter, a good library is also available to integrate Flexigrid. You can download it from here

iPhone SDK

An SDK for iPhone development is released on 6^th March 2008. Using this SDK, developer can develop application is iPhone and iTouch devices. It came up with an iPhone simulator  to test application. SDK requires Apple Developer Licence to launch application on any iPhone device.  Like Mac operating system, iPhone OS also based on Xcode.  The main components of this SDK are:

1. Cocoa Touch
2. Media
3. Core Services
4. OS X kernal

MonoTouch

MonoTouch allows developers to create C# and .NET based applications that run on Apple’s iPhone and Apple’s iPod Touch devices, while taking advantage of the iPhone APIs and reusing both code and libraries that have been built for .NET, as well as existing skills. (MonoTouch, 2009).

PhoneGap

PhoneGap basically generates native wrappers for what are still web apps. What PhoneGap provides beyond that is a bridge between JavaScript and native device APIs. So, you write JavaScript against PhoneGap APIs, and PhoneGap then makes the appropriate corresponding native call. In that respect, it is different from deploying a plain old web app. (Stackoverflow, 2009).

Corona

Corono is web based application development for iPhone-based devices. It supports html, javascipt, action script (flash) and a good platform for highly graphic basic applications , games etc. This is very latest platform in iPhone development world and the team releases daily updates on this SDK. Research on increasing graphic speed and flash based application integration in iPhone is progress with the Corona team. This platform is not free. A limited feature trail version is available for free. For full SDK, you need to spend 99 dollars.

Appcelerator

Appcelerator Titanium is an open source platform for developing mobile and desktop applications using web technologies. Appcelerator Titanium is frequently compared to Adobe Air for developing desktop applications for Windows, Mac and Linux. The tool can deploy standalone applications for Mac, Windows, and Linux from any of those platforms. It does this by submitting the source files to a proprietary server-side solution which then returns the binaries. However, to develop an iPhone application using this tool you need a Mac Os and iPhone SDK.

Recently I created a sliding menu for a project using jQuery and ScrollTo functions.

See demo: Slider  Menu

We can use the jQuery function $(“.menubar”).scrollTo(id_of_element) to scroll any scrollable area to a particular location.

The idea behind every smooth sliding is using scroll function with overflow:hidden mode.

You can download the source code from : http://www.sajithmr.me/downloads/slider/slider.zip

Here div menu-bar is the scrollable div with overflow:hidden mode contains set of menu and a duplicate as a  buffer

At the bottom of the code, you can see a filler div, this is for filling the menu one by one to the right side menu-bar to make the sliding very smooth

The function setMotion(this) calls  the scroll function and it moves till the called DOM object’s id reaches

If you use an ajax call after the motion to load the content at the bottom, you can make this sliding menu for proper navigation purpose.

Thanks

Sajith

You can get the plugin from http://mail.google.com/videochat

But when you click on Install voice and video chat button, Some of you see the page which shows

“The installer should complete in seconds.

If you are having trouble with the download, click here. “ 

But some other see a auto installer page which downloads the Setup.exe file and automatically start installation and prompts you to restart the browser.

Who did this installation without any security problem or violation and we saw a different window which shows the progress bar of the installation. This happens only when , if you have google tool bar installed on your browser , or google desktop, or google gears. For those browsers if the above three is not present, the previous message gets result , and which provide the direct link of the GoogleVoiceAndVideoSetup.exe

It is http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe

My Chrome browser does not support automatic installation. Because it is a new guest for my OS and the google additional plugin installation happend before its arrival. So Only Download and manual installation works in that case.

Then what the script exectued behind is 

window.google.update.oneclick.install (install via click) 

and 

location.href =  http://dl.google.com/googletalk/googletalkplugin/GoogleVoiceAndVideoSetup.exe (install manually )

Note the first bit of script window.google , A new object for google, which is created as the result of any one of the above mentioned google services. My Chrome Browser (Since he is a new member) does not know about the window.google (he knows the default methods like window.location, window.document)

Thats allabout the installation part. 

Now About the Video Chat. Obviously it is a flash based video chat mechanism , but the difference is it uses rtcp and udp protocol for video /audio chatting. Did you check the speed of your video chat ? Amaze  rite ?

Then lets check about the video chat request.

When you request someone for a video chat, google ajax posts the following data

req4_jid c2143377409

req4_json            ["jc","xyz@gmail.com","c2143377409",[["192.168.1.100","3801","video_rtp","dgE9SG8VMVdQFrYo","gyB0pRw5dkoEtq21","1","udp","0","local","0"]]]

req4_type          j

req5_jid c2143377409

req5_json            ["jc","xyz@gmail.com","c2143377409",[["116.68.66.85","3784","rtcp","iqV9/3HhhqkjQ4kp","wMSi7BsiOVNtnbJR","0.9","udp","0","stun","0"]]]

req5_type          j

Here xyz@gmail.com is the person , to whom you are going to chat. It sends the video_rtp protocol parameters. To know more about rtcp and udp go to: http://www.javvin.com/protocolRTCP.html

Here 192.168.1.100 is my local area ip (LAN) and 116.68.66.85 is my internet IP address and the numbers starts in 3000 are the port number for the protocol

In addition to this, google also sends its usual parameters like mouse movement detector (To know the state of a chatter, idle or busy / normal )

It also sends the cpu speed info to google server to know about the video processing time. And your bandwidth and speed of internet is already there in google’s hand (See my post on Gmail Architecture to know about the 1pix speed calculation method of gmail)

count    3

req0_evtype       mousemove

req0_time          263866

req0_type          i

req1_focused     1

req1_type          cf

req2_jid

req2_json          ["mf","mf1.0","1.0.2.0",2,{"caps":7,"cpuSpeed":1664,"cpus":2}]

req2_type          j

Gmail sends request for every 3 seconds, and if your counterpart accepts the video chat invitation, your chat iframe loads with a flash object tag .

<embed id=”flash_yj_c_player2″ wmode=”window” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” seamlesstabbing=”false” allowfullscreen=”true” allowscriptaccess=”sameDomain” bgcolor=”#000000″ flashvars=”dbg=true&ap=player&nm=yj_c_player2&cb=Recv_yj_c_player2&os=windows&plugin=true&” src=”im/media-player.swf?ver=1.1.6″ style=”width: 100%; height: 100%;” name=”yj_c_player2″ quality=”high”/>

And this flash application does the later works.  This flash application communicate with google media server with Real Time Protocol and your video chat happens that way. The flash activex plugin support helps in accessing your webcam and mic.  Good day , have a nice chat … 

Mail Me for more information

Thanks and Regards

Sajith

Click the profile, it opens in new window as usual

Click on the down arrow button in the top right corner of the window, and you can see Go off the record link there.

And type any chat, say “hi”

You will get a red text showing the “person is offline , can’t receive the message right now ” implies the  person is offline

If this message does not appear, it means the user is invisible

To know more about gmail and gmail chat visit my post series

http://www.sajithmr.me/series/gmail-architecture/

Regards

Sajith

Do you wanna inform any important news or message to your readers ? Here is a simple plugin, WordPress Announcement Plugin.

Download the plugin from : http://downloads.wordpress.org/plugin/announcement.zip

Go to Admin > Plugin > and activate announcement plugin. After that, go to options and select Announcement. By default the plugin will be inactive. You have to set your announcement and activate the announcement by checking ‘Active’ checkbox.

Never Forgot to Run the Announcement. By Default the Announcement will be inactive

Enough !!! You visitors can now see your announcement. It will be displayed only one time for a particular user .

(If you want to see the announcement again, for testing purpose, Clear browser cookies, or atleast cookies from your blog. Otherwise you have to wait another 24 hours to play the announcement again)

The plugin is created with cute design and animation. It will never interrupt your blog reader.

Regards

Sajith