Lil Josh

A tech blog about web development with PHP, MySQL, jQuery, CSS3 and various other programming languages. You will not find anything about ColdFusion, ASP.NET, C# on this blog.

Facebook Page JSON & RSS Feed

March 13, 2012

Ever wanted to put a Facebook page’s feed into your website? Every Facebook page has an RSS & JSON feed. In this tutorial I will show you how to use PHP and JSON to pull the feed from Facebook without authentication.

  1. Make sure your Page is published and visible to the public. This can be done under the Page settings. Publish Page
  2. You will need your page ID. You can get this from https://graph.facebook.com/yourpage for example https://graph.facebook.com/HoosierHeights If your page does not have a username, you can visit your page and copy the last numbers in the URL for example:
    https://www.facebook.com/pages/HoosierHeights/163276271689  NOTE: If you’re page is not published (step 1) then you’ll get this error [php]{
    “error”: {
    “message”: “Unsupported get request.”,
    “type”: “GraphMethodException”,
    “code”: 100
    }
    }[/php]
  3. Now that you have your page ID you can view the JSON feed at this URL:
    http://www.facebook.com/feeds/page.php?id=163276271689&format=json
    (replacing the number with your page ID). NOTE: You can get the RSS version by replacing format=json with format=rss20 for example https://www.facebook.com/feeds/page.php?id=163276271689&format=rss20
  4. Here is the PHP code to pull the JSON feed into your site. (Be sure to replace the URL with your own).
    [php]
    //replace the Page ID with your own
    $url = "http://www.facebook.com/feeds/page.php?id=163276271689&format=json";

    // disguises the curl using fake headers and a fake user agent.
    function disguise_curl($url)
    {
    $curl = curl_init();

    // Setup headers - the same headers from Firefox version 2.0.0.6
    // below was split up because the line was too long.
    $header[0] = "Accept: text/xml,application/xml,application/xhtml+xml,";
    $header[0] .= "text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5";
    $header[] = "Cache-Control: max-age=0";
    $header[] = "Connection: keep-alive";
    $header[] = "Keep-Alive: 300";
    $header[] = "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7";
    $header[] = "Accept-Language: en-us,en;q=0.5";
    $header[] = "Pragma: "; // browsers keep this blank.

    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_USERAGENT, 'Mozilla');
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
    curl_setopt($curl, CURLOPT_REFERER, '');
    curl_setopt($curl, CURLOPT_ENCODING, 'gzip,deflate');
    curl_setopt($curl, CURLOPT_AUTOREFERER, true);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_TIMEOUT, 10);

    $html = curl_exec($curl); // execute the curl command
    curl_close($curl); // close the connection

    return $html; // and finally, return $html
    }

    // uses the function and displays the text off the website
    $text = disguise_curl($url);

    $json_feed_object = json_decode($text);

    foreach ( $json_feed_object->entries as $entry )
    {
    echo “

    {$entry->title}

    “;
    $published = date(“g:i A F j, Y”, strtotime($entry->published));
    echo “{$published}“;
    echo “

    {$entry->content}

    “;
    echo “


    “;
    }

    /* * * * * * * * * * * * * * * * * *
    * Below is the XML version *
    * assuming you used the XML *
    * format in the Facebook feed URL *
    * You’ll need to uncomment to use *
    * * * * * * * * * * * * * * * * * */
    //$xml = new SimpleXMLElement($text);
    //foreach ( $feed->item as $entry )
    //{
    // echo “

    ” . (string) $entry->title . “

    “;
    // $published = date(“g:i A F j, Y”, strtotime($entry->pubDate));
    // echo “{$published}“;
    // echo “

    ” . (string) $entry->description . “

    “;
    // echo “


    “;
    //}

    ?>
    [/php]

That’s it! Easy right? I would like to give credit to @mdlamar for providing help with this idea.

facebook facebook page integrate Facebook feed JSON feed PHP RSS feed

CSS3 Google Button WordPress Plugin

February 25, 2012

I’ve created a plugin to allow you to easily plug CSS3 Google Buttons into your blog posts using shortcodes.

Download the plugin here or search “CSS3 Google Button” from your WordPress dashboard:

http://wordpress.org/extend/plugins/css3-google-button/

Here is a shortcode sample:

[GOOGLEBUTTON target="http://liljosh.com" color="orange"]Button Caption[/GOOGLEBUTTON]

Please, please, please give my plugin 5 stars. :] Enjoy!

css3 google button wordpress plugin

CSS3 Google Buttons

February 23, 2012

In this tutorial, I’ll show you how to make Google buttons using CSS3. First here’s a demo:



The HTML

[html]



[/html]
Right click and save this search icon: 

The CSS3

I’ve separated the CSS into 3 sections (for each color).

Orange

[css]
button.orange, a.orange, input[type=submit].orange {
padding: 10px 30px;
-webkit-border-radius: 2px 2px;
border: solid 0px rgb(153, 153, 153);
background: #d64937; /* Old browsers */
background: -moz-linear-gradient(top, #d64937 0%, #d14836 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d64937), color-stop(100%,#d14836)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d64937 0%,#d14836 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d64937 0%,#d14836 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d64937 0%,#d14836 100%); /* IE10+ */
background: linear-gradient(top, #d64937 0%,#d14836 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d64937′, endColorstr=’#d14836′,GradientType=0 ); /* IE6-9 */
color: #fff;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-size:11px;
line-height: 1;
}

button.orange:hover, a.orange:hover, input[type=submit].orange:hover {
padding: 9px 29px;
border: 1px solid #b0281a;
background: #dd4b39; /* Old browsers */
background: -moz-linear-gradient(top, #dd4b39 0%, #c53727 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd4b39), color-stop(100%,#c53727)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dd4b39 0%,#c53727 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dd4b39 0%,#c53727 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dd4b39 0%,#c53727 100%); /* IE10+ */
background: linear-gradient(top, #dd4b39 0%,#c53727 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#dd4b39′, endColorstr=’#c53727′,GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0 1px 1px #333333;
-moz-box-shadow: 0 1px 1px #333333;
box-shadow: 0 1px 1px #333333;
}

button.orange:active, a.orange:active, input[type=submit].orange:active {
padding: 9px 29px;
border: 1px solid #b0281a;
-webkit-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 8px 4px rgb(197, 55, 39), 0 1px 0 0 #eeeeee;
}
[/css]

Gray

[css]
button.gray, a.gray, input[type=submit].gray {
padding: 10px 10px;
-webkit-border-radius: 2px 2px;
border: solid 1px #dadada;
background: #f4f4f4; /* Old browsers */
background: -moz-linear-gradient(top, #f4f4f4 0%, #f1f1f1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* IE10+ */
background: linear-gradient(top, #f4f4f4 0%,#f1f1f1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f4f4f4′, endColorstr=’#f1f1f1′,GradientType=0 ); /* IE6-9 */
color: #555;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
font-size:11px;
}

.gray:hover {
border:1px solid #c6c6c4;
background: background: #f8f8f8; /* Old browsers */
background: -moz-linear-gradient(top, #f8f8f8 0%, #f1f1f1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#f1f1f1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* IE10+ */
background: linear-gradient(top, #f8f8f8 0%,#f1f1f1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f8f8f8′, endColorstr=’#f1f1f1′,GradientType=0 ); /* IE6-9 */
color: #222;
-webkit-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
-moz-box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
box-shadow: 0px 1px 1px 0px rgba(10, 10, 10, 0.4);
}

.gray:active {
border:1px solid #c6c6c4;
color: #222;
-webkit-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 2px 4px #f1f1f1, 0 1px 0 0 #eeeeee;
}
[/css]

Blue

[css]
button.blue, a.blue, input[type=submit].blue {
padding: 10px 30px;
-webkit-border-radius: 2px 2px;
border: solid 1px #3079ed;
background: #4d90fe; /* Old browsers */
background: -moz-linear-gradient(top, #4d90fe 0%, #4787ed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%); /* IE10+ */
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#4d90fe’, endColorstr=’#4787ed’,GradientType=0 ); /* IE6-9 */
color: #fff;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-size:11px;
line-height: 1;
}

button.blue:hover, a.blue:hover, input[type=submit].blue:hover {
border: 1px solid #2f5bb7;
background: #4d90fe; /* Old browsers */
background: -moz-linear-gradient(top, #4d90fe 0%, #357ae8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%); /* IE10+ */
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#4d90fe’, endColorstr=’#357ae8′,GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0 1px 1px #333333;
-moz-box-shadow: 0 1px 1px #333333;
box-shadow: 0 1px 1px #333333;
}

button.blue:active, a.blue:active, input[type=submit].blue:active {
border: 1px solid #377cea;
-webkit-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
-moz-box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
box-shadow: inset 0 0 2px 2px #377cea, 0 1px 0 0 #aaa;
}
[/css]
If you like this tutorial please show me some love! Thank you. :]

CSS css3 design google buttons tutorials

Use PDO Not MySQLi

February 21, 2012

In NetTuts+ most recent tutorial, they discuss the advantages of using PDO over MySQLi to make database connections from PHP. “The core advantage of PDO over MySQLi is in its database driver support. At the time of this writing, PDO supports 12 different drivers, opposed to MySQLi, which supports MySQL only.” Dejan Marjanovic See the full tutorial and start using PDO today:

http://net.tutsplus.com/tutorials/php/pdo-vs-mysqli-which-should-you-use/

Here is another great tutorial from NetTuts+ as to why you should be using PHP’s PDO for database access:

http://net.tutsplus.com/tutorials/php/why-you-should-be-using-phps-pdo-for-database-access/

database mysql nettuts PDO PHP tutorials