Facebook Javascript SDK: Security error "Permission denied" in IE while login

Facebook platform is really not friendly with IEs browsers and I'm sure that a lot of developers have many difficulties in IE while working with Facebook. Recently I've faced a troubles in IE7 and IE8 while calling method FB.login(); Authentication popup appears but after that security error popup is shown with text like:

Message: Permission denied
Line: 22
Char: 4250
Code: 0
URI: https://connect.facebook.net/en_US/all.js

In other browsers everything works fine. There is a hack that allows to avoid this error in IE. It is necessary to add some piece of code after calling FB.init() on client side:

  FB.init({
    appId:        'xxxxx',
    appSecret:    'xxxxxxxxx',
    status:        true
    cookie:        true
  });
  // this code solves the issue
  FB.UIServer.setLoadedNode = function (a, b) { 
    FB.UIServer._loadedNodes[a.id] = b; 
  };

The trouble is described in Facebook Bugzilla: http://bugs.developers.facebook.net/show_bug.cgi?id=20168 Hope, it will be fixed by Facebook soon.

Useful javascript snippets

Friquently used javascript snippets.

Replace substring by another one. To replace all occurrences of a string using javascript, 'g' modifier should be used in pattern:

function str_replace(search, replacement, highstack, option) {
     if(typeof(option) != undefined) {
          highstack = highstack.replace(search, replacement);
     } else {
          highstack = highstack.replace(/ + search + /g, replacement);
     }
     return highstack;
}

Usage:

// replace all occurrences in the string
highstack = str_replace(search, replacement, highstack);

// replace first entry of the string
highstack = str_replace(search, replacement, highstack, 'first');

Check if string is integer:

Object.prototype.isInt = function() {
    return parseInt(this) == Number(this) && this.indexOf('.') == -1;
}
var val = '123';
alert(val.isInt());

Shuffle array:

shuffle = function(o){
    for(var j, x, i = o.length; i; 
         j = parseInt(Math.random() * i),
         x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

Check if email address is valid:

function isEmailValid(email) {
   var reg = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
   return reg.test(email);
}

Check if date is valid:

// date format dd:mm:yyyy
function isValidDate(sText) {
    var reDate = /(?:0[1-9]|[12][0-9]|3[01])\/(?:0[1-9]|1[0-2])\/(?:19|20\d{2})/;
    return reDate.test(sText);
}

Using javascript and CSS styles with Smarty

Placing CSS styles and some javascript code containing braces can cause some troubles when Smarty is used as template engine. This template engine shows the error like "Fatal error: unrecognized tag" in this situation.

There are some methods that allow to avoid Smarty errors like described bellow.

First method: the CSS styles or javascript code with braces are needed to be enclosed in Smarty tag {literal}...{/literal}. Template engine doesn't try to parse the code inside these tags and the code and styles will be shown in the HTML document successfully.

There is another way to avoid the errors. Another method is that if after opening braces white space or the end of the line symbol follows so these code is not needed to be placed inside the tags literal and it will work too.

Example:

<style>
   .some_class {color: red;}
</style>

This code will cause the Smarty error, but next example will work without any troubles:

{literal}
<style>
.some_class {color: red;}
</style>
{/literal}

But I'm not sure that this method works in all versions of Smarty. I checked it using Smarty engine version 3.0.7.

Facebook fan page: pass parameter to the application via url

Some times while developing the application as page tab it is necessary to pass some parameters to the application. For example it is needed to determine what the page is requested or stuff like that. The Facebook documentation contains the description of the parameter app_data which can help to do it.

This parameter is a JSON string and is usually specified when the application needs to pass some data to itself. The example of the usage:

http://www.facebook.com/somedummypage?sk=app_xxsome
appcodexx&app_data=somedata

If this parameter is specified in url of the page tab on the server side of the application it will be available as a part of signed_request ($_REQUEST['signed_request']). So, in the example above this parameter will be available as $_REQUEST['signed_request']['app_data'].

Facebook graph API: locale dependent user info

Sometimes it is necessary to get the data that are already translated to certain language. For example it can be fields such as gender, relationship status, etc. By default, these fields are translated to language that is set in user profile.

The new graph api allows to pass the parameter that points to the language in which the data should be translated.

The example shows how to get my friends info in necessary locale (currently in Danish):

$myFriends = $facebook->api('/me/friends?fields=gender,location,
relationship_status&locale=da_DK');

So, looks simple.

HTML over the flash object

Many times I've got the troubles with HTML\CSS while the adding flash objects on the sites. Trying to display CSS popup or stuff like that above the flash object drives me crazy. I've tried even to hide the block that contains object to make it works. But to my surprise to solve this issue was very easy - just set the parameter wmode equal to opaque in object description tags. After that HTML on top of the flash starts working well.

Strange behavior of strtotime() function

Some of the PHP functions for date manipulation make me surprised. Working on the recent project I faced the problem using function strtotime(). I needed get the list of months one by one from current date.

Seems, everything is simple, I solved this calling the function date("m", strtotime("+ n month")) in loop and got the the list of months I needed. But all the interesting things started from the date 31th of January. I got the list of months with two Marchs.

First I was a loss but then started looking through the documentation for this function and read the comments described this strange behavior of this function.

Not evident behavior leads to big bugs. Be careful working with this function.

Delete video from Youtube with Zend Youtube API

A few weeks ago I was faced with problem of removing video from Youtube. Zend Youtube API was used for this purposes.

As the documentation describes, to delete a video it is necessary to get the video uploading channel for authenticated user and than invoke the delete method on the Zend_Gdata_YouTube service object, passing in the VideoEntry object that is being deleted.

The documentation and different web-dev blogs describes the process of the deleting video from Youtube using following code:

$videoEntryToDelete = $yt->getVideoEntry($videoId);
$yt->delete($videoEntryToDelete);

Looks simple, but the code example doesn't work. Method getVideoEntry doesn't provide the access to full control of the video.

To delete the video I used the method getFullVideoEntry() to get the videoEntry. The code example show how it can be done:

$videoEntry = $yt->getFullVideoEntry($videoId); 
$yt->delete($videoEntry) 

Change iframe src attribute in Facebook applications

Sometimes it is necessary to change source of the iframe on facebook applications dynamically. In Facebook applications iframe can be created only using tag "fb:iframe" and Facebook doesn't allow access to iframe attributes. Of course we can create a set of fb:js string variables for all cases that we need. But it is not very good solution.

One of the solutions that can be used looks as follows.

At first create iframe using fbml:

<fb:js-string var="iframe_element">
  <fb:iframe id="fb-iframe" src="http://your.iframe.location" />
</fb:js-string>

Than we should have an html element that will be a container for iframe:

<div id="iframe-block"> </div>

Next step is to display iframe. This can be done using fbml method setInnerFBML:

document.getElementById('iframe-block').setInnerFBML(iframe_element);

After this we can get access to iframe attributes.

document.getElementById('view-iframe-element').setSrc('http://your-new-url');

So, the only way to change the src of iframe that I could find is to display the iframe and the change it attribute src.