Facebook PopUp Authentication Window Using PHP & Javascript

Create facebook style javascript base popup authentication window using your own php and javascript code. You can also use this article’s javascript and php technique to create twitter, linkedin or your own authentication popup window. Read Full Article

Graph Api & Javascript Base Facebook Connect Tutorial

Using facebook’s latest graph api and javascript sdk learn how to develop facebook connected site, how to call facebook graph api using javascript sdk. Also learn fql query from javascript, wall post publishing and status update application development. Read Full Article

15 exceptional jQuery photo gallery and slider plugins

15 exceptional jQuery photo gallery and slider plugins

Posted using ShareThis

15 exceptional jQuery photo gallery and slider plugins

15 exceptional jQuery photo gallery and slider plugins

Posted using ShareThis

Facebook – Friends selection custom component

For 1 of my facebook application, I was  needed a custom friends selector. The purpose was, I’ve a page from where I’ve to select multiple friends and then I’ll submit those selected friend ids using ajax call without refreshing the page.

Then I searched the documentation of fbml. In facebook component, there are 2 types of friends selector

1. http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector
2. http://wiki.developers.facebook.com/index.php/Fb:multi-friend-selector_(condensed)

But both of these are totally controlled by facebook and these components are used to send invitation or request to friends. I need a component like figure 2. The fbml code for the second component is below:


<fb:request-form method="post" action="http://yourdomain.com/submit.php" content="Select Friends" type="gifts" invite="true">
<div class="clearfix" style="padding-bottom: 10px;">
<fb:multi-friend-selector condensed="true" selected_rows="0" style="width: 220px;" />
</div>
<fb:request-form-submit />
</fb:request-form>

But I need a component that is fully controlled by me. So,  I developed a friends selection component and I’m sharing it. 🙂

Here is the outlook of my component:

Download Custom Friends Selector for Facebook Application

There are 3 parts in this code:

1. First part is CSS
2. Second part is Javascript
3. Third part is HTML + PHP
4. So changed the file extension to .php

Firebug – An essential tool for web developer

As a web application developer, sometimes we need to debug javascript code or need to make some css design. In Mozilla firefox web browser there is a plugin named Firebug, that integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

To install Firebug visit the Firebug download page. Click on the huge orange button half-way down the page on the right hand side. You can also download it from Mozilla’s FireFox Add-ons site. Install it. Restart FireFox, and you’re good to go.

Opening and Closing Firebug

Keyboard and Mouse Shortcuts for Firebug can be found at the Firebug Website. The three sets I use most often include:

• Open Firebug: F12 or clicking on the at the right of the right of the browser status bar.
• Close Firebug: 12 or clicking on the at the right of the right of the browser status bar or clicking on the in the upper right hand corner of the firebug window.

Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

Tweak CSS to perfection

Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.

Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast. Firebug provides the console object that has several methods usable for logging. Properties of console object include console.debug, console.info, console.warning, and console.error. When one of these methods produces an output, Firebug links to the line causing the output so you can quickly find the responsible code.

Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help
you get answers fast.

History.. PHP .. MYSQL .. JQUERY

PHP

“Rasmus Lerdorf” – The creator of PHP Scripting language.
http://en.wikipedia.org/wiki/Rasmus_Lerdorf
http://lerdorf.com/bio.php
http://www.oracle.com/technology/pub/articles/php_experts/rasmus_php.html

MYSQL

“Michael Widenius” – Founder and original developer of MySQL
http://monty-says.blogspot.com/

JQuery

“John Resig” – The creator and lead developer of the jQuery JavaScript library.
http://ejohn.org/about/
http://ejohn.org/blog/

JSON -A lightweight data-interchange format

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition – December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.

Visit: http://www.json.org/