I have created a Flickr Portfolio application which can be linked to your Flickr account, display all your latest Flickr photos and incorporate Facebook like and comments with it.
This application is small, simple and code is well formatted so that you can edit it. All the instructions are provided in the readme.txt file and you can edit the settings in config.php file and instantly get a portfolio live π
homepage screenshot
Inner page screenshot
To download the source code, please go to http://photography.ofhas.in and find the download link in the footer.
This application is completely free, open source and you don’t even have to give any attribution to me at all π
Long story short, I was developing a Facebook page application which runs from inside a page tab. Such applications runs inside an iframe on Facebook Fanpage. Everything was going perfectly, until, we started checking it in IE!! The symptoms were simple, PHP Session is not working when user logs in. The application works perfectly in Safari, Opera, Chrome and Firefox and only the Elite of the Elites Internet Explorer is not accepting any cookie generated from the application.
I was hungry, almost lunch time – client was kicking my ass, so I couldn’t even think to grab a bite. I was VERY HUNGRY, clueless, lost and I was feeling like yelling at everything that walks in front of me. Oh boy, I was absolutely clueless about what was done wrong to satisfy this King Blue E.
After discussing my problem with Uncle G for over 5 hours, trial and error, do this and that, I realized that the problem is actually related to p3p privacy policy and how Internet Explorer deals with it. It doesn’t accept any cookie from any web application which is running inside an iframe within another application. Let me clarify
1. Web application A with domain a.com has an iFrame in one of its page
2. Inside that iFrame, it loads another web application B with domain b.com
3. Now Internet Explorer doesnt accept any cookie which generates by Web Application B, resulting a catastrophe, a real disaster.
The Solution: send the following header in your web application which runs inside the iFrame.
and it fixes this weird behavior of Internet Explorer. Freaking p3p! wastage of 6 hours, remaining hungry, missing lunch, get kicked on the ass and what not.
I hate you Internet Explorer. You are the worst thing ever made in the history of web development. I sincerely hate you. And Microsoft, with all the Blue E fan-boys out there, GO TO HELL and let us live our life.
Graph API from Facebook is a very interesting project based on open graph protocol. Facebook is gradually setting Graph API as the standard and deprecating the use of their old REST based APIs. To start working with Graph API doesnt need an extensive knowledge on how Facebook API works but its always good to have a sound knowledge on that. Graph API uses oAuth based authentication mechanism and using the auth token, they can identify who is making the API calls. I have been working on Facebook events using Graph API for last couple of days and I will be sharing my experience in this series of two or three posts where I am going to cover the following topics
1. Authenticating a user
2. How to create a Facebook Event with picture
3. How to post on Events Wall
4. How to manage users
5. How PHP SDK can be a life saver in some cases π
Authenticating a user
Its very important that you know how to authenticate an user against Facebook and ask for appropriate permissions to be granted. To work with public events in Facebook, you need to ask for “create_event” permission from your visitors. Otherwise, in case of private events, you need to be granted permission for “user_events” and “friend_events”. For now, lets consider that we will be creating public events and we will ask for only “create_event” permission.
Lets create a new application in Facebook which will point to our working url. The following screenshot will show you which informations are necessary to create such an app. Once you are done, save the API_KEY/APP_ID and SECRET_KEY safe in somewhere for later use.
Facebook App Properties
Now you are done with creating a Facebook app, its time to code π The following codeblock will prompt any visitor to log in with Facebook and grant the application some permissions. We are using our JS-SDK. We are also saving the auth token. You will soon find out why that would be necessary.
FB.getLoginStatus(function(response) {
if (response.session) {
var session = FB.getSession();
fbtoken = session.access_token;
fbuserid = session.uid;
}
else{
loginFB();
}
});
function loginFB() {
FB.login(function(response) {
if (response.session) {
var session = FB.getSession();
fbtoken = session.access_token;
fbuserid = session.uid;
}
}, {perms:’create_event’});
}
function logoutFB() {
FB.logout(function(response) {
// user is now logged out
});
}
</script>
</body>
</html>
[/sourcecode]
Now when you visit your application url, for example http://ev.tekzon.net in our case, you will be prompted an authentication windows like this
Authentication Dialog
So now users are successfully authenticated to our new Facebook application, lets move to the next part
Creating a Facebook event using JS-SDK
To create a Facebook event, we need to pass the following parameters to “/me/events” graph url.
name: Name of the event
start_time: Start time of the event in UNIX timestamp format, or in “mm/dd/yyyy H:i” format π
end_time: End time of the event in UNIX timestamp format, or in “mm/dd/yyyy H:i” format π
location: Location of the event, as a string
description: Description of the event
picture: Profile picture for the event, we can not use that with JS SDK.
privacy: either “OPEN” or “PRIVATE”, we will use “OPEN” in this example
So, here is a Javascript function which can create this event. In the following codeblock you will find a wrapper javasript function “createEvent()” to create this event and an example function to use that createEvent() function
[sourcecode language=”javascript”]
function createEvent(name, startTime, endTime, location, description) {
var eventData = {
"access_token": fbtoken,
"start_time" : startTime,
"end_time":endTime,
"location" : location,
"name" : name,
"description":description,
"privacy":"OPEN"
}
FB.api("/me/events",’post’,eventData,function(response){
if(response.id){
alert("We have successfully created a Facebook event with ID: "+response.id);
}
})
}
function createMyEvent(){
var name = "My Amazing Event";
var startTime = "10/29/2011 12:00 PM";
var endTime = "10/29/2011 06:00 PM";
var location = "Dhaka";
var description = "It will be freaking awesome";
createEvent(name, startTime,endTime, location, description);
}
[/sourcecode]
Now once you invoke this “createMyEvent()” function, it will show you the event id of your newly created event, if successful. Lets see how that would look like.
Ok, so now we know how to create a Facebook Event using JS-SDK and Graph API. But there is a major problem in creating a Faceboko event using JS-SDK and that is, you cannot attach any Profile Picture with this event. And you have to use a server side SDK (we will be using PHP-SDK in the following example) to do that. Lets see how can we create a Facebook event with a profile picture.
Creating a Facebook event with Profile Picture
We need to post the event parameters (use Ajax) to our server side script. Lets assume that the image file we are planning to use as the Profile Picture for our Facebook event resides in “/path/to/my/image.jpg”.
Here is a very important information for you and that is such an image’s minimum width MUST BE 100px – There is no documentation on that, and apparently I had to waste almost 4 hours to find what is the problem with my code. I just wish Facebook API documentation were better mentioning such things which may lead developers to waste huge time.
Ok, in the following codeblock, we will be using a new javascript function “createMyEventWithPHP()” which will post the event data to our server side php script event.php – Before that, download the PHP-SDK of Facebook from http://github.com/facebook/php-sdk, unzip and place in the same path where you are keeping this “events.php”
[sourcecode language=”javascript”]
function createEventWithPHP(name, startTime, endTime, location, description) {
var eventData = {
"access_token": fbtoken,
"start_time" : startTime,
"end_time":endTime,
"location" : location,
"name" : name,
"description":description,
"privacy":"OPEN"
}
$.post("/events.php",eventData,function(response){
if(response){
alert("We have successfully created a Facebook event with ID: "+response);
}
})
}
[/sourcecode]
When we will invoke createEventWithPHP() javascript function, it will post all the event data to our PHP script. Then PHP script will create that event with Facebook PHP-SDK and print the newly created event id. Say for example, this newly created event id is 129312137169841, so we can go to http://facebook.com/events/129312137169841 and see how it looks with the profile picture
Facebook event with profile picture
So thats for today, folks. I will be coming back with more of Facebook Events and Graph API in my next part. Stay Tuned.
Shameless Promotion π : By the way, if you are looking for a beautiful Admin Panel Theme for your PHP based projects/web-applications, you may want to check out Chameleon Circuit, which is developed by our Themio Team π Chameleon Circuit - Full Featured Admin Theme from Themio
jShutterBox is a jQuery plugin I have developed two or three months ago. But I didnt release it because It was complex and users had to supply content for every animated images. Though it was ok with me that time, but last week I thought that I could make it even simpler to use. For example, just a <div> containing an image and an anchor can be converted into an animated content box π
to use jShutterBox is simple. Just download the package from Box.net, include jshutterbox.js in your page, and run the following code π
You can configure other options, like “height”, “width”, “duration”, “borderWidth”, “borderColor”, “slide”. You can pass “random” as a value of “slide” to see the random animation. You can also specify any value of the “up,”down”,”left”,”right”,”up-left”,”up-right”,”down-left”,”down-right”for “slide” to see any specific animation too π
Shameless Note π : By the way, if you are looking for a beautiful Admin Panel Theme for your PHP based projects/web-applications, you may want to check out Chameleon Circuit, which is developed by our Themio Team π
I am a longtime user of Springloops, since 2008/2007 for all my PHP applications. I love their plans and features so much that I had upgraded to a paid plan and using that for last 1.5 years. Now, they have introduced the plan2 which looks strange and funnier to me. Let me tell you why.
I am using the Flowerpot plan of their old version 1, which has the following features
Storage: 2GB
Number of Projects: 10
Servers per project: 3
Number of users: unlimited
Price: $9/mo
Now, the new Flowerpot plan in version 2 offers the following
Storage: 3GB
Number of Projects: 10
Servers per project: 1
Number of users: 4
Price: $15/mo
Springloops V2 has Tickets and Milestones feature in V2, included with all plans. But for that, you will have to pay an extra $6 than what you were paying currently. And the funny thing is that not only the number of active servers decreases from 3 to 1, but also number of users will be reduced from unlimited for AWFUL 4? You gotta be kidding me, eh?
One of the springloops employee ( Szymon Szczepankowski ) had emailed me why do I hate v2 of springloops and didnt opt-in to upgrade to v2 from my v1 plans, immediately after I twitted about my frustration. And this blog post is written just in reply of that.
Stay in V1, enjoy a beautiful springloops. Never upgrade π
Public/private key based encryption is very popular because of the strength it sets in encryption, specially above 1024 bits. Now there are external library to encrypt data using RSA encryption like RSA in phpclasses.org – the fun is we were also using this library in one of our ZF based project. But last week I’ve found that there is a hidden gem in the Library/Zend/Crypt folder (Zend_Crypt_Rsa) which can do the same thing using openssl library. The bad thing is that there is no official documentation on how to use this library π Thats why I’ve decided to write a blog post to show you how to use Zend_Crypt_Rsa and encrypt your data with your public/private key and decrypt to get it back in original form.
Step 1: Create your RSA public/private key using ssh-keygen
[sourcecode lang=”bash”]
cd /path/to/keyfolder/
ssh-keygen -t RSA
[/sourcecode]
When it will ask for the path of the key file, input “./id_rsa” . It will then prompt for passphrase which actually works like a password and you cant retrieve your data if you forget this. So input something like “MySecretWord” – This will output something like this
[sourcecode lang=”bash”]
ssh-keygen -t rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/hasinhayder/.ssh/id_rsa): ./id_rsa
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in ./id_rsa.
Your public key has been saved in ./id_rsa.pub.
The key fingerprint is:
c8:dc:cd:a8:90:98:67:42:65:45:20:f8:58:39:74:66 [email protected]
The key’s randomart image is:
+–[ RSA 2048]—-+
| oo.E+o |
|. +B |
| +.. |
|…o + o + |
| + = + S o |
| + . . |
| . |
| |
| |
+—————–+
[/sourcecode]
After a while you will see that there are two files in the same directory named “id_rsa” and “id_rsa.pub”. First one is your private key and the second one is the public key.
Step 2: Encrypt data using your public key
As we have our RSA public and private keys in our hand, its time to start playing with these. We will now encrypt our data with our public key. In that way you can only decrypt it with your private key. I hope it is clear now that why we should encrypt using public key only? If now, let me clarify it a bit more. Your public key is “public” to the world. Now if you encrypt your data with your private key, anyone will be able to decrypt it with your public key – so that’s plain meaningless π
[sourcecode lang=”php”]
public function encAction(){
$this->_helper->viewRenderer->setNoRender();
$this->_helper->layout->disableLayout();
$zrsa =new Zend_Crypt_Rsa(array("passPhrase"=>"MySecretWord","pemPath"=>"/path/to/your/keyfolder/id_rsa")); //thats the path to the private key file
$string = "Yeah, this is my SECRET MESSAGE";
$enc = $zrsa->encrypt($string, $zrsa->getPublicKey(),Zend_Crypt_Rsa::BASE64);
echo "Secret Message: {$enc}";
}
[/sourcecode]
In the code above, we are generating output in BASE64 format, because that is readable to everyone π – after you execute this action in your browser, you can see something like the following (it will differ based on your key)
Now it will output the original message “Yeah, this is my SECRET MESSAGE” π
So here is everything together π
[sourcecode lang=”php”]
public function encAction(){
$this->_helper->viewRenderer->setNoRender();
$this->_helper->layout->disableLayout();
$zrsa =new Zend_Crypt_Rsa(array("passPhrase"=>"MySecretWord","pemPath"=>"/path/to/your/keyfolder/id_rsa")); //thats the path to the private key file
$string = "Yeah, this is my SECRET MESSAGE";
$enc = $zrsa->encrypt($string, $zrsa->getPublicKey(),Zend_Crypt_Rsa::BASE64);
echo "Secret Message: {$enc}";
echo "<hr/>";
$dec = $zrsa->decrypt($enc, $zrsa->getPrivateKey(),Zend_Crypt_Rsa::BASE64);
echo $dec;
}
[/sourcecode]
Hope you’ve enjoyed this article. I just wish that the documentation team of Zend Framework would have added this in the manual of Zend Framework for the rest of us π
Shameless Note π : By the way, if you are looking for a beautiful Admin Panel Theme for your PHP based projects/web-applications, you may want to check out Chameleon Circuit, which is developed by our Themio Team π
Last night while browsing Dribbble, I’ve seen a beautifully crafted iPhone UI project done by Josh Helmsley, which was part of his SkyLedger project. It was just fantastic.
SkyLedger
So I tried to clone the same UI using Titanium and finally done something similar π
Just a test project. No interaction, just plain simple UI done using Titanium. You can download this Appcelerator titanium project by clicking on the following link. Let me know if you like it.
If you hover mouse over your Facebook profile, you will notice a nice configuration panel appears at the top right corner of your profile picture, saying “Change Picture”
Configuration panel at the top right corner of your profile picture
Now if you want to add nice and flexible configuration panels like this to your DOM container elements like
you can do it easily with jQConfigurator jQuery plugin. This plugin allows you to add text or images based panel items and manage their “click” events easily. Here is a screenshot of what it will look like, once added
Or may be one like this
For an extensive documentation and working demo + download, check the jQConfigurator plugin from http://scripts.ofhas.in/jqconfigurator . jQConfigurator is released under New BSD license.
If you are familiar with css grid frameworks like 960 or 1kbgrid, then you already know that designing the layout is just repeating the container divs in a specific pattern. These grids made our page layout design into a easy job. But if you are one lazy ass like me and dont want to write that much(?) at all, then grab yourself a piece of cake and use the following snippet.
Say you are using 1kbgrid and your grid layout contains 3 rows,
1st row contains 2 spans where1st span is 8 column wide, 2nd span is 4 column wide
2nd row contains 3 spans which has a width of 3 column, 3 column and 6 column respectively
3rd row has 2 spans where 1st span has 6 column and 2nd span has 6 column
4th row has only one span of 12 column width
Now lets write a pattern like the following
8+4.3+3+6.6+6.12
If you look carefully then you will see that “.” is used as a row separator, and in each row spans are separated by a “+” sign following their width in column π
Now if you run the following code, it will generate the complete grid for you.
[sourcecode lang=”php”]
$pattern = "8+4.3+3+6.6+6.12";
echo parseTo1KbGrid($pattern);
[/sourcecode]
The output will be like this
[sourcecode lang=”html”]
<div class=’row’>
<div class=’column grid_8′><p></p></div>
<div class=’column grid_4′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_3′><p></p></div>
<div class=’column grid_3′><p></p></div>
<div class=’column grid_6′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_6′><p></p></div>
<div class=’column grid_6′><p></p></div>
</div>
<div class=’row’>
<div class=’column grid_12′><p></p></div>
</div>
[/sourcecode]
For 960 CSS grid framework, use the following routine
[sourcecode lang=”php”]
function parseTo960Grid($pattern) {
$grid ="";
$rows = explode(".", $pattern);
foreach ($rows as $row) {
$grid .= "<div class=’container_12′>\n";
$spans = explode("+",$row);
foreach($spans as $span) {
$grid .= "<div class=’grid_{$span}’><p></p></div>\n";
}
$grid .="<div class=’clear’></div>\n";
$grid .="</div>\n";
}
return $grid;
}
[/sourcecode]
Designing grid layout for 1kbgrid and 960 is now even easier, eh?
MiproappsβThe newest service around, Miproapps allows users to design a fan page by simply dragging & dropping elements to the center of the page. I found it to be one of the best services Iβve tried so far because it really is very easy to use, and it only took me a few minutes to create an interactive fan page.
A chart on that page will help you to quickly understand how each of these services differ from others. I am sad that MiproApps missed a quick point on “Custom Tab” which actually is there in MiproApps, just the process is not automated. It is possible only by request. All you have to do is open a support ticket and our engineers will take action as soon as they are in office.
We are working on this issue to make this process fully automated.
Facebook is changing all their page width to 520 px from 760px, effective from today. So if you haven’t worked on your page, it is your chance to get your hands dirty π
Note: MiproApps is developed using PHP on top of Zend Framework, Memcache and External web services. Right now we are providing a whooping collection of 35 widgets in total, which you can add instantly on your facebook fanpage and they will work from your pages without any problem. The drag-n-drop style designer will make your job even easier π
Supported Widgets (categorized):
1. Static Content category Static Images, Static Text, Link Builder and Contact-us form
2. Blogs category Posterous, WordPress, Tumblr and Blogger
3. Status Services category Tiwtter and Google Buzz
4. Video category Youtube, Vimeo, UStream, Any external video in flv format
5. Photo sharing category Flickr and Picasa
6. File sharing category Box.net
7. Audio category Last.fm and any externally uploaded mp3 audio
8. Facebook tools category Comments, LiveStream and Invite-Friends
9. Bookmark services category Digg, Delicious, Stumbleupon, Reddit and Technorati
10. Miscellaneous category Paypal Donation, Google Maps, External flash file, RSS feeds, IFrame, Poll, Image Slider (carousel) and SlideShare
Hope you will enjoy MiproApps, a nice application developed using Zend Framework :). MiproApps has been brought to you by my small startup Leevio
