Youtube API tutorial PHP - Setup in xampp

In this blog We're gonna see how to set up youtube api environment in php xampp. Google clearly gives the documentation for this here. But still I'm stuck at the middle somewhere. Because I've never configured this before. So this is absolutely for beginners.

Download the Google Data Client Library files from the zend website, as we use Zend Gdata for Youtube API. We dont have to install zend framework for this to work. Just download Zend_Gdata from the above link which is located at the bottom of the Zend framework page.

Extract the folder and add the location of the library folder to your PHP path. We can set the path by 2 ways. One by using set_include_path() method and other by using setting path using php.ini file. For me it is located in C:\xampp\php. Open php.ini and search for include_path variable. I extracted Zend_Gdata in C:\xampp\ and rename the folder as ZendGdata.

Now edit the include_path variable by including this path C:\xampp\ZendGdata\library. Make sure there is a library folder in that path. Now restart your apache server and test whether the script works by going to this script. It is installation checker script for this. If all the scripts were passed then it'll show no errors found. I got one error when running this script. It is openssl error. We can solve it by uncommenting ;extension=php_openssl.dll to extension=php_openssl.dll in php.ini file and restarting the apache server. Then I got no errors.

Now run the demo files in the demo folder of Zend_Gdata folder(copy the demo folder to htdocs folder). Thats It! It'll work like charm!

 

How to use ajax using jQuery load method for appending data with fade in effect?

Usually we use $.ajax or $.post to use ajax in our script. But now we are gonna use load() to send ajax requests to server.

var offset = 0;   
$("#button").click(function(){      
        offset = offset+5;
    $("#morePosts").load("/post.php?offset="+offset, function(data) {   
    if($(data).is(':empty')){
            $(data).hide().appendTo('#morePosts').fadeIn("slow");           
    }else{
     $("#button").attr({"disabled":"disabled", "value":"No more posts to display"});   
    }
});
        return false;
});

I've used this in wordpress to load more posts in ajax. It'll display 5 posts each time when we click #button.

In the first parameter we are giving URL with offset as parameter to post.php(GET request).
Second parameter is the callback function used to get the data from the post.php after processing GET request.

 data is the returned data from post.php and we are checking whether the data is empty or not
using is(':empty') and appending that data to #morePosts div.

Then we are using appendTo() where we first hide the data and appending it to #morePosts div and then showing it by fadeIn()

If the data is empty we disable the button attribute using attr({"disabled":"disabled"}).

Thats it!

How to toggle with fade effect in jQuery?

Sometimes you need to toggle with fade in and fade out effects in jQuery. Toggle allows you to perform click and revert that click, or you can assign different functions to every click like this:

$('p').toggle(function(){
        alert("First click");
},function(){
       alert("Second Click");
},function(){
        alert("Third click");
});

In the above code we are using <p> tag as selector and if we click for the first time, it'll alert "First click" and if we click it for the second click, it'll alert "Second click" and so on.

fadeOut() will hide the content by fading it out and fadeIn() will show the hidden content. We are gonna use these effects to toggle content with fade effect.

$(':button').toggle(function(){
        $('img').fadeOut("slow");
},function(){
        $('img').fadeIn("slow");
});

The above code will hide and show images in your page when you clicked that button($(':button') ), with fade effect. Thats It!