Best jQuery Other API Plugins & Tutorials with Demo

Adding Facebook Comments to a jQuery Lightbox

Adding Facebook Comments to a jQuery Lightbox

In order to display facebook comments on your page you would normally follow the instructions on this page. This works great if you just have a single page that you want to comment on, but for my scenario I wanted the comment box to appear fresh for each photo that the lightbox displayed.  In order to do this, the first thing you’ll need to do is omit the 2nd bit of code that Facebook generates for you on the afore mentioned page:

Chirp.js : Simply Tweets on your website with Javascript

Chirp.js : Simply Tweets on your website with Javascript

Chirp.js is a simple way to Tweets on your website with javascript.Chirp js ia very lightweight, Templating and Client-side caching features.

Dynamic TinyURL Links Generator using jQuery

Dynamic TinyURL Links Generator using jQuery

There are so many web applications available for shortening URLs to share online. TinyURL is one of the originals and has been around longer than I can even remember. Their service is always online and it works perfectly for translating into tweets or posts on Facebook.

In this tutorial I want to build a mini-app which will generate tiny URLs right from your web browser. You could install this script on any domain and you’ll be able to generate dynamic links using Ajax without even refreshing the page! Their service doesn’t have a detailed API but it’s enough that we can pass a full URL and get the tiny version back as a result. And that’s just enough functionality for this app to hold some value when hosted on a 3rd party website.

Flickr Badge v2 : Displaying your flickr photos

Flickr Badge v2 : Displaying your flickr photos

Displaying your flickr photos without leaving or slowing down your web site.Here you can download a script to add a flickr badge like the following to any HTML document or blog with some HTML and a JavaScript include.

To add a badge all you need to do is add the link inside a DIV with the class flickrbadge and the script does the rest for you. You can use as many badges as you want in the same document. You can also only show pictures of your photo stream tagged with a certain tag.

Create a Stylish Tweet Book with jQuery and CSS

Create a Stylish Tweet Book with jQuery and CSS

In this tutorial I am going to create a stylish Tweet book to keep your best friends and view their Tweets. As you complete this tutorial you will gain knowledge in working with jQuery and CSS to create a stylish book design. You will also learn to work with the Twitter API using jQuery and AJAX.

jQuery Searchable Map Template with Google Fusion Tables

jQuery Searchable Map Template with Google Fusion Tables

You want to put your data on a searchable, filterable map. This is a free, open source tool to help you do it.

Features :

  • clean, full screen layout
  • new mobile and tablet friendly using responsive design
  • address search (with variable radius)
  • geolocation (find me!)
  • new RESTful URLs for sharing searches
  • results count (using Google’s Fusion Tables API)
  • ability to easily add additional search filters (checkboxes, sliders, etc)
  • all done with HTML, CSS and Javascript – no server side code required

TwitStream : jQuery, AJAX, and the Twitter Search API

TwitStream : jQuery, AJAX, and the Twitter Search API

I was perusing the Web looking for some quick and dirty Javascript I could use with the Twitter Search API to display a list of recent tweets containing a particular keyword. I came across the monitter.com widget, which was almost exactly what I had in mind, except that it includes some really great, rich features that were well beyond what I needed. I adapted and simplified the monitter script to:

  1. Fix an issue with unescaped characters, e.g. hashes, in the search query.
  2. Fix an issue with ampersands in links in the linkify() function.
  3. Replace some deprecated HTML tags, e.g. <b>, and fix other XHTML validation issues, e.g. using self-closing img tag.
  4. Fetch search results only once, rather than every few seconds (since Twitter sets a rate limit of 100 requests per-hour per-user, I found this to be necessary).
  5. Specify the number of tweets to return using an additional class.
  6. Remove the fade-in effect.
  7. Hyperlink each user’s profile image to their timeline.

Just like monitter, TwitStream utilizes the jQuery framework. Because jQuery is awesome.

geo autocomplete : jQuery plugin to autocomplete location using Google Maps v3 API

geo autocomplete : jQuery plugin to autocomplete location using Google Maps v3 API

geo-autocomplete converts any input field on a web page into an autocomplete field that suggests locations in real-time as you type, including a little thumbnail to help you quickly choose the right location. It’s like Google Instant for your Maps.

The Google Maps V3 API now incudes an autocomplete feature that will adapt any text input field to autocomplete locations &/or Places. It doesn’t show thumbnails yet but the addition of Places will be great for some use cases.

Flickrshow : Simple Javascript slideshow for Flickr

Flickrshow : Simple Javascript slideshow for Flickr

Flickrshow is a very simple Javascript slideshow for Flickr. It doesn’t require any web-development expertise, any particular Javascript frameworks, (although it works with all of them), or any hosted web space. It works in all modern web browsers, and Internet Explorer 6.Flickrshow can display the latest images uploaded to Flickr in less than 40 characters.

Although Flickrshow does not require jQuery, if JQuery is detected Flickrshow will add a convenient wrapper function allowing you to use Flickrshow as you would any other JQuery plugin.