Archive for the ‘ facebook ’ Category

OmniAuth facebook/twiitter SSL certificate error

i have used Omniauth for facebook login . I followed this tutorial to integrate facebook login http://net.tutsplus.com/tutorials/ruby/how-to-use-omniauth-to-authenticate-your-users/

I followed all the steps of that tutorial but after authorizing the app and when redirect to /auth/facebook/callback fails with:
SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed

This error we get because Omniauth/Oauth wasn’t setting the ca_path variable for OpenSSL of their HTTP calls.OpenSSL did not find the root certificate for Facebook’s SSL certificate.As a result we got this error.

We can solve the issue by two ways .

  • One way is we can set SSL certificate path
  • anothe one is ignore the certificaiton verification

Let’s see what will we do if we want to ignore the certification:

  • you can fix this in CBA’s application-config.
  • Add the following line to your file config/omniauth.rb
  • OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE

So now config/omniauth.rb will be look like :


Rails.application.config.middleware.use OmniAuth::Builder do
OpenSSL::SSL::VERIFY_PEER = OpenSSL::SSL::VERIFY_NONE
provider :facebook, "apikey", "secretkey"
end

what will we do to set the certification path :

take a look at this link ruby on rails and ssl error

    • sudo port install curl-ca-bundle
    • modify the config/omniauth.rb files
    • set ca_path in the client options
    • Rails.application.config.middleware.use OmniAuth::Builder do :
      facebook, FACEBOOK_KEY, FACEBOOK_SECRET, {:client_options => {:ssl => {:ca_path => "/opt/local/share/curl/curl-ca-bundle.crt"}}}

Hopefully this two ways can be solved the SSL certificate issue.

end

Advertisements

Set Up a Local Facebook Development Environment with Virtual Host .

To create a facebook application  http://www.londatiga.net/it/how-to-create-facebook-application-with-php-for-beginner/ , you need a real domain for Canvas URL. For that reasons  I have faced a real trouble to develop Facebook application . I have to change the code on the local machine, uploading them to the server, testing it out in a browser and repeating the process until finish the application. So Even a little change i have to do all  above the process . So i am  looking  for the best way to set up facebook development Environment in local to avoid all irritating process  .And finally i found out of box solution at the leevio . Here i describe the out of box solution  .

Create Only  Virtual Host :

1. Just only  create a virtual host in the localmachine according to you canvas domain name.That’s it nothing need to do more . It will save all of your effort and time   Like you set canvas url “myfbapps” .

Here is the instruction to create a virtual hosts at ubuntu . But you can create virtual host for any os

1. Open a new file and write down the server configuration

Server configuration:

<VirtualHost *:80>
DocumentRoot /www/ myfbapps
ServerName local.myfbapps.com

# Other directives here

</VirtualHost>

2. Then save the file to /etc/apache2/sites-available. Give it a name like myfbapps

3. And then edit the file hosts under etc directory : /etc/hosts
4 . Open terminal and type the following command or copy and paste it.
sudo a2ensite smronju //change smronju to your file name.
5. Now you have restart your apache server the following command.
sudo /etc/init.d/apache2 restart

Few more reference link :
http://www.facebook.com/note.php?note_id=382450211283

Facebook IFRAME Application Issues : PART-1

While I switch one of my fb application  from FBML to iframe , I have faced some silly problem. But to solve those problems , I have to waste so many hours. After searching the forum, asking mates and friends and then find out the solution.  I am thinking Mahedi hasan to help me a lot. When I got the solution I found that it’s a very 1 or 2 min jobs.   I have found mostly these problem arise in the beginning of application and basic issues. I hope so you will share your iframe problem too .

Here are the problems that I have faced  while developing an iframe application:

1. POST Submission problem :

http://forum.developers.facebook.com/viewtopic.php?id=24430

While I submit the post data unfortunately I  do not get any post data. I have found that post field is empty. I am very surprised how my $_POST field is empty though it submit the action page.   I have given a sample form of my application.

Posting it via the server url:


<form action="http://myserver.com/appname" method="POST">
<input type="text" name="test1"></input>
<input type="submit" name="Submit"/>
</form>


Posting it via the app callback url:



<form action="http://app.facebook.com/appname" method="POST">
<input type="text" name="test1"></input>
<input type="submit" name="Submit"/>
</form>


After search in  facebook developer wiki,forum and blog , I have known that

while submit the form , iframe lost the session key as there is no session key passed . As a result it lost user id and lost all the post data. That’s why i have to set user_id. So below is the forum post link :

http://forum.developers.facebook.com/viewtopic.php?id=22929

And  here Is how I solve this issue . This my modified form where I added two  hidden fields. One is fb_sig_session_key and another one is user_id.

Posting via fb_sig_session_key and user_id

<form action="http://myserver.com/appname" method="POST">
<input type="text" name="test1"></input>
<input type="hidden" name="fb_sig_session_key" value=”<?php $_GET[‘fb_sig_session_key’]”></input>
<input type="hidden" name="user_id" value=”<?php $_GET[‘user_id’]”></input>
<input type="submit" name="Submit"/>
</form>

So after submit the form here I show how can I set_user and now find the post values.

</pre>
<?php

if (isset ( $_REQUEST ['kb_fb_sig_session_key'] )) {

$this->fb_sig_session_key = $_REQUEST ['fb_sig_session_key'];

}

if (isset ( $_REQUEST ['user_id'] )) {

$this->uid = $_REQUEST ['user_id'];

}

if ($this->uid != '') {

$this->facebook->set_user ($this->uid, $this->kb_fb_sig_session_key );

}

$this->facebook->set_user ($this->uid, $this->fb_sig_session_key );

?>

2 . Application  Link  problem :

While I click on any link in my iframe application , I have found that it reloads the whole facebook page again in the iframe canvas. I just use this type of code and found the problem load  .

<a href=”http://apps.facebook.com/MyApp/invite.php”>Invite</a&gt;

I found the solution in this thread : http://forum.developers.facebook.com/viewtopic.php?pid=208220

Only add the taget=”__top” into the anchor.

So I add target=”_top”. <a href=”http://apps.facebook.com/MyApp/invite.php”>Invite</a&gt;.   And now it work.

3.iframe size problem  :

I have faced problem to resize my frame application. Initially when page load the frame size is correct. But when I show the facebook profile photo of users , then find that it does not resize. I do not see the footer and it cut down. We have solve this problem by adding  javascript setTimer to resize the height. You have seen similar type problem here : http://forum.developers.facebook.com/viewtopic.php?pid=17541#p17541

4.  Setting issues :

I think to set up my application as an iframe application, I do not need to set up the connect url. But when I do not set up connect url I see blank page. So when I set up the call back url , I have found that my application working.

I think to set up my application as an iframe application, I do not need to set up the connect url. But when I do not set up connect url I see blank page. So when I set up the call back url , I have found that my application working.

I have few more issues and will be add next topics.

Virtual Bangla keyboard for facebook Application

So now we can write bnagla in Facebook by Virtual keyboard. Here is the demo application of virtual keyboard

http://apps.facebook.com/banglakeyboard/

After seeing the virtual keyboard(vc) from the hasin bhai blog, I have planned to do that in facebook application. But I hear that it can be used by iframe. So I think to do that in FBJS as a result it will be easily integrated in any facebook application. So work on the I have done the Virtual application by FBJS. Thanks Allah to do that very exciting work.

Also thanks hasin bhai to encourage me and Anis bhai, Emran Hasan who helped me lot to complete that.

You can see the demo here : http://apps.facebook.com/banglakeyboard/

After doing that I learn some beauty of FBJS .The next I will share the challenges I have faced to do that in fbjs .

Note : If you do not see the bangla  font  then you have to install the unicode, you can follow the instruction from there :

http://www.somewhereinblog.net/banglasettings

AJAX In Facebook

Now days Ajax is doing a very important rule .That’s in the face book application , it also very necessary .

In this section I will describe the ajax method for facebook application.

I assume that the rader will have an idea about the ajax and some idea of FBJS.

First I focus the categories of ajax method in facebook.

There are different ways you can perform ajax in facebook.

1. MOCK Ajax .(http://wiki.developers.facebook.com/index.php/Mock_ajax)

2. TypeHead Ajax. ( http://wiki.developers.facebook.com/index.php/FBJS/Examples/Typeahead/AJAX )

3. Using FBJS/ AJAX ( http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax )

I feel comfort for the last one, because it quite similar with jquery. (http://jquery.com/ ).

Also “FBJS is Face book’s solution for developers who want to use JavaScript in their Facebook applications. We built FBJS to empower developers with all the functionality they need, and to protect our user’s privacy at the same”

So let’s start with the FBJS/ AJAX

At first see the features of AJAX.

1. FBJS supplies a very powerful AJAX object

2. It supports retrieving JSON, FBML, or raw text from remote servers.

3. To use it, just instantiate a new Ajax class.

4. It has an event handler which fires when an AJAX call returns

5. It has an event handler which fires when an error occurs during an AJAX call

6. It can check whether user login.

7. Data send through post.

Now we look at the AJAX Method:

responseType

This can be Ajax.RAW, Ajax.JSON, or Ajax.FBML.

Ajax.RAW

The response from your server will be returned to your callback in its original form.

Ajax.JSON

The response from your server will be parsed as a JSON object and returned to your callback in the form of an object. Properties of your JSON object which are prefixed with “fbml_” will be parsed as individual FBML strings and returned as FBML blocks. These blocks can used on a DOM object with the setInnerFBML method.

Ajax.FBML

The response from your server will be parsed as FBML and returned as an FBML block. This block can used on a DOM object with the setInnerFBML method.

ondone

An event handler which fires when an AJAX call returns.

onerror

An event handler which fires when an error occurs during an AJAX call

requireLogin

If you set this to true the AJAX call will require the user to be logged into your application before the AJAX call will go through. The AJAX call will then be made with the regular fb_sig parameters containing the user’s identity. If they refuse to login, the AJAX call will fail.

post ( url, query)

Start an AJAX post. url must be a remote address, and query can be either a string or an object which will be automatically converted to a string.

Note: be careful about the url. Use the callback url . Do not write facebook url. Like ()

Like use this : http://www.piggymate.com/f8apps/freevideo/trunk/add_video.php

not to use : http://apps.facebook.com/freevideo/index.php

Now we start through step by step :

1. Create an instance of AJAX class. Like : var ajax = new Ajax();

2. Set the response type of ajax.

Like: if you use FBML then use

ajax.responseType = Ajax.FBML;

3. Set the require login. like : ajax.requireLogin = true;

4. Now you write the function that will handle the event after success of ajax call.

Like :

ajax.ondone = function (data) {

document.getElementById (‘message’).setInnerFBML(data);

}

Note: here data is the result of Ajax.

5. You can also set onerror for handling the error.

6. Call the url through post method .Like

var params={“user”:user_id,”video_id”:video_id}; //add parameters as comma separated “param”:value

ajax.post(‘callbackurl not facebook url l,params);

Well you see here you can see that post method has two parameter. post callbackurl,parameter);

There is useful links from where you can get the full example of ajax .

http://wiki.developers.facebook.com/index.php/Mock_ajax

http://wiki.developers.facebook.com/index.php/Mock_AJAX

http://wiki.developers.facebook.com/index.php/FBJS/Examples/Ajax

http://facebook-developer.net/2007/10/22/reducing-bandwidth-with-fbjs-dialogs/

http://facebook-developer.net/2007/10/26/how-to-display-a-loading-message-in-facebook-dialogs/

http://ajaxian.com/archives/richer-ajax-support-for-facebook