Integrating social sign-ons in a web application can become a tedious task because you need to take care of different endpoints, credentials and finally manage the oauth dance to get the access token. However, using HybridAuth package, this task can be easy as pie π Let’s have a look
In this example I will show you how to connect to Facebook and Twitter using HybridAuth. So you need to create two applications in Facebook and Twitter each. Save those app’s id and secret somewhere because we will need that in a minute.
Step 1: Install the Package via Composer
Composer is an excellent package manager for PHP apps. Let’s use that to install HybridAuth in our current projects scope. Add a composer.json file in your project path, or update it with the following contents if it already exists. But before that, make sure that you have composer installed in this machine.
Let’s make a good use of this HybridAuth. This time we need to create two files, fb.php and hybrid.php. Make sure that your facebook app’s callback url points to this hybrid.php. FOllowing is the code of fb.php (more…)
Postman Flickr to Facebook Groups photo sharing service
We were working to develop a new utility web application for last couple of days which will help us, the photographers, to easily share photos from our flickr photostream to multiple Facebook groups that we are subscribed to. There was a reason why we wanted to develop this app in the first place. Every time we had to upload the same photo to each of these groups and needless to say that Facebook’s image compression routine still thinks that we live in medieval age, probably King Arthur’s reign. Anyway, the process is boring and time consuming. Another quick and dirty way was to share the photo by Facebook’s group email feature but not every group supports it. So we had to find a way to make it easy for the greater part who uses both Flickr and Facebook to share their photos.
So we’ve developed Postman, a nice little app which does the job very well. Here is what/how it works.
Authenticate users against Flickr and Facebook and gathers necessarily permissions (read for Flickr, publish_stream and user_groups for Facebook Connect)
Display last 100 photos from user’s Flickr stream in a selectable grid, with the option to load more.
Download the 1024px version of the selected photo from Flickr Stream to our server
Post that photo to selected Facebook groups using FB PHP-SDK one by one.
Delete the photo from server
It actually solved the big problem for us. Postman made it easy for everyone of us (the photographers) and everyone literally loved it. There is one more reason to love WordPress and that is Flickr’s compression algo is really good. So when we download the 1024px version of user’s photo and then push it to Facebook, luckily FacebookΒ doesn’t do much on that and the photo looks really good. And we used AppFog to host Postman which ultimately proved to be very good choice.
If you are a photographer who uses Flickr to host his photos and then share to multiple Facebook groups, please give POSTMAN a try and we are sure that you will love it.
And last but not the least, Postman can post photos to your Facebook pages too. So Postman is a handy application photographers, by photographers. Use it and enjoy. You can find postman at http://postman.im
Shameless Plug
We develop beautiful Admin Panel templates for the web application developers. Our recent product is “Bolt” which is responsive and built on top of Twitter’s bootstrap. Give it a try and let us know how do you like it.
Bolt Responsive Admin Panel Template for Developers
Ok, Facebook Groups has a huge security flaw by which any group member Β can pretend to be anyone else in that group, and post in the group on behalf of that user. It is FATAL. I’ve reported to Facebook and I hope they should take immediate action for it.
I had disclosed it in details hoping that they will notice it and fix it quickly, and taking it down again. So if any Facebook official wants to know in details, drop me a mail to hasin_at_leevio_dot_com or better check today’s submitted bug reports with a “MASSIVE SECURITY FLAW” text inside it.
Peace.
*update:Β submitted this again to facebook.com via their whitehat program and someone named Alex contacted me. He asked me a few questions on how to reproduce the flaw and he said that they are looking into it.
Pinterest has gained lots of attention lately and became popular in the photographer’s and designers community from the very beginning. And once something is popular, people copy (and sometime with improvement) their beautiful user interface ideas into their own project. Last week i’ve seen quite a traction when friendsheet was released. They allow you to browse photos from your Facebook news feed in a nice and organized way.
When we saw friendsheet last week – me and Rifat were discussing that it could be a nice demonstration if we develop a image gallery with our revolutionary project LightBulb (seriously, someday something’s gonna change the world – so keep dreaming big).
LightBulb is an extensive wrapper of Facebook Open Graph objects sitting on top of their JS SDK. You can interact unbelievably easily with graph objects using a wrapper like LightBulb without worrying too much about underlying technology and the core API itself. LightBulb is stable, easy to use, there are already lots of examples within it. Hasn’t been officially released yet but we are planning to do so in a week or two. Stay in touch.
So back to the point, our main intention was to show LightBulb’s capability of pulling FB graph objects and show them in a nice way like FriendSheet. The final output looks similar to that of Pinterest/Friendsheet and guess what, for only 10-15 lines of JS π with another couple of lines added in the stylesheet block.
Demo: http://demo.projectlightbulb.net – For download link of source code, keep reading π . If you dont see the gallery (or sometime see a little overlapping sometime) please refresh and it will work like a charm. It’s fully compatible and responsive with your mobile device.
Shameless Promotion
If you want to outsource your Facebook application development to us, feel free to contact us here. Why? Because we know Facebook app development and their open graph objects inside out π
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
It started in a funny way rather than a typical project plan, and finally turned into an important project for us in Leevio. Everyone in our team was so much excited to release our first flagship product, a web based service (mashup you can say) we called MiproApps. It is a visual designing tool for Facebook fanpages.
MiproApps
Facebook fanpages are popular media to publish your company information, portfolio or upcoming events on Facebook. To make your product outreach a massive amount of users, it is a popular tool that works good. While creating our fanpage for Leevio, we found that we are limited by available applications to decorate and present a page “really” well. What we could do is design our page in an ordinary way, like writing FBML tags and and embed those in a tab. Or we could develop an application and embed it’s tab to another tab on our page. Which one did we go with? NONE!
We thought that it would be really interesting if we can develop a service (some sort of a visual designer for such pages) by which everyone (anyone, seriously) can design and decorate their fanpage with some data they really want to deliver to their audience. So we did a quick meeting to find out if it was really possible by us, and the challenges we found are the followings
1. Limited canvas size,
2. Works with different data sources
3. Drag and drop friendly, with proper layering.
4. Compatible with major browsers (Firefox, Safari, IE, Opera and Chrome)
5. Proper caching and storing widget data
We decided to develop this project in a “release early, release often” fashion. We didnt want to deliver a HUGE giant bloated with too many widgets and services after working for tons of hours. Instead we wanted to deliver a working barebone skeleton for our users which performs it’s job pretty well, and then to add feature s gradually in a regular interval. It would also help us to decide quickly how users are reacting with our project.
We four developers worked really hard for next couple of weeks to make it work, in short sprints and milestones. And now it is available for your use – you can check it out at http://miproapps.com. There are more than 25 pretty useful widgets to help you designing your fanpage impressively. We’ve also added tutorials and screencasts for you. Lets see how did we work with all our challenges.
MiproApps Design Canvas
1. Limited Canvas Size
To make sure users still be able to design his page easily, we keep three pre defined size for each widgets. Width of these three sizes are designed in such a way so that anyone can design multi-column page, easily.
2. Works with different data sources.
The core of MiproApps are external data sources and a very well designed parser to parse those data source in an unified way. Guess what, most of these data source are ready to be pulled out. Almost all of them offers valid RSS/Atom feeds. And that saved us HUGE (GIGANTIC cud be more appropriate) amount of work to do by ourselves. We just collect username for each of these data sources (like twitter, youtube) and then we pulled out feeds for that specific user. Everything is about public data, and that also saved us from some pain about treating private and sensitive information. Except one widget (I will come to that later) we just asked for plain username from users. And for twitter, we had to deal with oath based authentication system so that we can pull out user’s timeline using their token. These tokens are for read-only access to be more trusted by our users. We set a caching time of 10 minutes so that we have to call only 6 times max for an user in an hour. Do you kno what is the current rate limit per user per hour in Twitter? it’s only 75!
Configuration Editor
3. Drag and drop friendliness
We choose jQuery UI as we are very good at jQuery. And I must confess, that was a very good decision indeed. The excellent support of managing draggable and droppable components in jQuery UI made our life really easier. The only thing we found tricky was to persist the draggable state of each component on “Design Canvas”. But anyway, it was done very effectively and is working really great. You should check this out at http://miproapps.com
And oh, by the way, the z-index layering was quite a UI challenge for us. On a Facebook page canvas area, the internal Facebook components has maximum z-ndex of “101”. So we had to deal with that to keep our components z-index lower than that, to avoid an overlay over any internal Facebook item (a dialog box, for example, or the notification dropdown π )
4. Compatible with major browsers
Oh boy, we were doomed in hell with a monster called IE and that really made our day terrible every minute!. However, we tamed the beast quite good and now it works well with MiproApps. Another friendly monster betrayed us at last minute, has a name “Chrome”. we are working on that subtle UI issues and hope to deliver some updates pretty soon.
5. Proper caching and storing user data
Now that was a major challenge we dealt with. Each user can use hundreds of widgets, which colt actually pull data from hundreds of different data sources out there. So caching is a very important step we’d taken care of from the first day. We used Memcached. And we designed the architecture to cache data from every widget separately, not as a page in a whole. And it was challenging to deal with failsafe condition (you remember twitter’s fail whale, right?). Some widgets needed to be dealt with extra care for the caching technology of Facebook itself. But in overall it was a good architecture and worked impressively well. We are proud of it!
Useful set of widgets
Lets have a look at the tools, libraries and services we use for MiproApps
1. Subversion, definitely a life saver version controlling system.
2. Springloops as a subversion repository and deploy manager. It’s deploy manager is really awesome!
3. Lighthouse for Issue Tracking
4. Netbeans as our IDE, Mac OSX and Ubuntu as development OS. PHP and ZendFramework. For oAuth, we used PECL oAuth library. Memcached was used for caching.
5. jQuery and jQuery UI. The image slider you see on the front page was done using the brilliant Coin Slider.
6. Screencast was recorded by Screenium. Tutorial screenshots were taken using Jing.
7. Icons came from MediaLoot and legendary Silk by Famfamfam.
So that’s It – have a look at MiproApps at http://miproapps.com. Currently the application is in beta mode (all plans are free during beta – beside that, there will always be a free plan for everyone) and we are adding exciting widgets everyday. Hope you will like it.
It was a nice evening with more than 100 tech people and I really enjoyed it. As I’ve said over there, you can download the presentation from the following link. It is a zip file containing a powerpoint 2007 slide of today’s session.
facebook cookbook, what is that? well first thing first – this is not something related with “facebook cookbook” published by o’reilly. usually you know cookbook is a term commonly used to describe books which focus mainly on problems and their solutions. these cookbooks contains quick solutions of common and frequently used programming problems.
so i am planning to star writing an open book (right now it is a blog, when we will have thousands or recipes we will make it a book) which will follow cookbook approach for facebook application developers. i will highlight common problems (there are numbers of problems with no solutions in their wikis) and their solutions which i’ve learned in my last one and half year journey as an application developer on facebook platform.
so the journey began, i’ve started writing on facebook cookbook. you will find it at http://fbcookbook.ofhas.in
if you are interested to participate and share your snippets or right an article for the rest of us, you are very welcome.
