How to get the total facebook friends in PHP

This is just a simple script that will retrieve the total facebook friends of specific user using the graph api. We will be using graph api along with the FQL to get the friend count of the user and by doing that we need the facebook id which we can retrieve by authorizing our app with facebook API.

The output is on JSON which we can decode via PHP, please see sample below.
{ "data": [ { "friend_count": 740 } ] }

<?php 
$fbUserId = <your facebook id>;
$json = file_get_contents("https://graph.facebook.com/fql?q=SELECT%20friend_count%20FROM%20user%20WHERE%20uid=$fbUserId");
$json = json_decode($json);
echo @$json->data[0]->friend_count;
?>

Hope this helps, please leave a comment if you like this post.

How to save data url into file on PHP

I have a simple script below written on PHP that will save the data url in a file. The example below will save the file on PDF and PNG file. You will notice here that the only difference are the file type and the file name which should comply with the file type you are saving. From the script below, you should be able to figure out how to save the other file types.

This is for saving an image file "PNG", you can also try "JPEG" and other image files.

<?php

$base_url = 'http://www.example.com/';
$file_type = 'image/png';
$file_base = $_POST['dataurl'];
$file_name = "file-".time().".png";

$file_base = str_replace('data:'.$file_type.';base64,', '', $file_base);
$file_base = str_replace('[removed]', '', $file_base);

file_put_contents(getcwd()."/files/$file_name", base64_decode($file_base));
echo $base_url."files/$file_name";

?>

The script below is for saving an application data "PDF" file.

<?php

$base_url = 'http://www.example.com/';
$file_type = 'application/pdf';
$file_base = $_POST['dataurl'];
$file_name = "file-".time().".pdf";

$file_base = str_replace('data:'.$file_type.';base64,', '', $file_base);
$file_base = str_replace('[removed]', '', $file_base);

file_put_contents(getcwd()."/files/$file_name", base64_decode($file_base));
echo $base_url."files/$file_name";

?>

Hope this will help a lot with your development. Happy coding guys!!

How to create multiple row carousel on FlexSlider

I am using flexslider on one of the page I'm working on but got in to problem when the carousel would need to be in two(2) rows. The problem is that there's no available option on flexslider to do it. So, what I did is to do a work around on my own. Please see below of what I did.

First, I set the basic carousel config on flexslider, this is the carousel in one(1) row. Please take note that you need to load the flexslider plugin on your page, you can download it here - http://www.woothemes.com/flexslider/.

$(window).load(function() {
    var itemCnt = 5; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt
    });
});

Next, is to create a function that will create 2 rows from the basic 1 row slider carousel and this will be called on start function of the slider.

function make2Rows(iWidth) {
    var iHeight = parseFloat($('.flexslider .slides > li').height());
    $('.alliance-list .slides > li').css('width', iWidth+'px');
    $('.alliance-list .slides > li:nth-child(even)').css('margin', iHeight+'px 0px 0px -'+iWidth+'px');
}

$(window).load(function() {
    var itemCnt = 5; // this will be the number of columns per row
    var iWidth = parseFloat($('.flexslider').width() / itemCnt);
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 1000,
        animationSpeed: 300,
        animationLoop: false,
        directionNav: false,
        slideshow: false,
        touch: true,
        itemWidth: iWidth,
        minItems: itemCnt,
        maxItems: itemCnt,
        start: make2Rows(iWidth)
    });
});

That's it and hope this would help anyone who are using flexslider as carousel.

External links to open InAppBrowser or System Browser in Phonegap webView application

I had a problem in my phonegap application that open external link within my application. The problem is that my webview page was replaced by external link. What I wanted is that my external link should open up on safari or system browser instead.

So, to resolve the issue here's what I did.

First, we need to add cordova.js in all our pages. The latest cordova.js or phonegap.js can be downloaded from the phonegap website - http://www.phonegap/install.

<script src="js/cordova.js" type="text/javascript"></script>


You might need to install the inappbrowser plugin if needed but I believe on the latest cordova version, this was already part of the framework but just in case you needed, you can execute this command via console on your application directory to install the plugin.

phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Next, is to add the 2 javascript function below. I have here 2 function to choose from whether you want the link to open InAppBrowser or System Browser.

<script type="text/javascript" charset="utf-8">
    function openURLInApp(href) {
        var w = window.open(href, '_blank');
        w.opener = null;
        w.document.write('<META HTTP-EQUIV="refresh" content="0; url='+href+'">');
        w.document.close();
    }

    function openURLToBrowser(href) {
        var url = encodeURI(href);
        window.open(url, '_system');
    }
</script>


Finally, we need to call the function above on every external link we want to open on either system browser or in app browser. Please see below.

<a href="#" onclick='openURLInApp("http://www.google.com");'>Google</a>


Hope this will help a lot on developing device application. Happy coding!!