JSON Tutorial – examples & tips

json tutorial

What is JSON? JSON stands for JavaScript Object Notation JSON is lightweight text-data interchange format JSON is language independent * JSON is “self-describing” and easy to understand *JSON uses JavaScript syntax for describing data objects, but JSON is still language and platform independent. JSON parsers and JSON libraries exists for many different programming languages. … Read more

Responsive Table Designs using CSS

Responsive Table Design with CSS

Today I am going to share how to create a responsive table design using simple css. Sometimes, a nicely formatted table is perfect for making a point and making a lot of data available at a glance. If that sounds like something you need. Try live demo with different screen resolutions … Read more

App Store Button with CSS3

App Store Button using CSS3

Today I am going to tell how to create a App Store Button with css3. I have designed four buttons View Demo Download Apple App Store Button Iphone App Store Button Android App Store Button Blackberry App Store Button Windows App Store Button CSS3 Code HTML Usage Please don’t forget … Read more

Facebook Timeline Wall Script with PHP, Jquery, Mysql

Facebook Timeline Wallscript

Facebook Style Wall Script is very popular among web developers. So I would like to tell how to create Clean Facebook Timeline Wall Script with php, mysql, jquery, ajax, & css. This is version 1 with lots of features and its FREE!

Facebook Timeline Wall Script Version 2.0 – Updated Click here
  • Share Updates
  • Add / upload pictures
  • Share Youtube Videos
  • Automatically Highlight Posts
  • Delete Updates
  • Infinite Scroll
facebook timeline wall script
facebook timeline wall script

Database Design for Facebook Timeline Wall Script

post_table

Security wise I have added more features like

  • Fix urls with protocol (http://, https://)
  • Remove PHP, Javascript Tags, Clean Texts
  • Clickable Text Links –  convert text to url hyperlink

facebook timline wall script

Facebook Timeline Wall Script – Version 1.0 contains 4 folders

  • assets
    • Stylesheets
    • Javascripts
    • Images
  • Includes
    • config.php
    • security.php
    • SimpleImage.php – used to upload images
  • Uploads – all pictures are uploaded to this folder

All you have to do is simply download and upload the sql file. finally some minor changes to be done in config.php

Config.php

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'fb_wall'); //your database name
define('ImageUploadPath', 'uploads/'); // image upload path
$post_limit = 10;
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
mysql_query ("set character_set_results='utf8'");
$base_url='http://localhost/facebook-timeline-demo-1/'; //base url
$base_folder = "facebook-timeline-demo-1/"; //leave empty if you using root folder

Security.php

//remove php tags from input
function clean($text)
{
$return_text = strip_tags($text);
return $return_text;
}

//remove special character from text
function special_chars($str)
{
$str = htmlentities($str, ENT_COMPAT, 'iso-8859-1');
$str = preg_replace('/&(.)(acute|cedil|circ|lig|grave|ring|tilde|uml);/', "$1", $str);
return $str;
}

//fixing the urls
function fix_url($url)
{
if (substr($url, 0, 7) == 'http://') { return $url; }
if (substr($url, 0, 8) == 'https://') { return $url; }
return 'http://'. $url;
}

function _make_url_clickable_cb($matches) {
$ret = '';
$url = $matches[2];

if ( empty($url) )
return $matches[0];
// removed trailing [.,;:] from URL
if ( in_array(substr($url, -1), array('.', ',', ';', ':')) === true ) {
$ret = substr($url, -1);
$url = substr($url, 0, strlen($url)-1);
}
return $matches[1] . "<a href=\"$url\" rel=\"nofollow\" target=\"_blank\">$url</a>" . $ret;
}

function _make_web_ftp_clickable_cb($matches) {
$ret = '';
$dest = $matches[2];
$dest = 'http://' . $dest;

if ( empty($dest) )
return $matches[0];
// removed trailing [,;:] from URL
if ( in_array(substr($dest, -1), array('.', ',', ';', ':')) === true ) {
$ret = substr($dest, -1);
$dest = substr($dest, 0, strlen($dest)-1);
}
return $matches[1] . "<a href=\"$dest\" rel=\"nofollow\" target=\"_blank\">$dest</a>" . $ret;
}

function _make_email_clickable_cb($matches) {
$email = $matches[2] . '@' . $matches[3];
return $matches[1] . "<a href=\"mailto:$email\">$email</a>";
}

function make_clickable($ret) {
$ret = ' ' . $ret;
// in testing, using arrays here was found to be faster
$ret = preg_replace_callback('#([\s>])([\w]+?://[\w\\x80-\\xff\#$%&~/.\-;:=,?@\[\]+]*)#is', '_make_url_clickable_cb', $ret);
$ret = preg_replace_callback('#([\s>])((www|ftp)\.[\w\\x80-\\xff\#$%&~/.\-;:=,?@\[\]+]*)#is', '_make_web_ftp_clickable_cb', $ret);
$ret = preg_replace_callback('#([\s>])([.0-9a-z_+-]+)@(([0-9a-z-]+\.)+[0-9a-z]{2,})#i', '_make_email_clickable_cb', $ret);

// this one is not in an array because we need it to run last, for cleanup of accidental links within links
$ret = preg_replace("#(<a( [^>]+?>|>))<a [^>]+?>([^>]+?)</a></a>#i", "$1$3</a>", $ret);
$ret = trim($ret);
return $ret;
}

//function used to fetch youtube video id
function get_youtubeid($url)
{
$parse = parse_url($url);
if(!empty($parse['query'])) {
preg_match("/v=([^&]+)/i", $url, $matches);
return $matches[1];
} else {
//to get basename
$info = pathinfo($url);
return $info['basename'];
}
}

thats it. You are done.

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

Verison 2
Facebook Timeline Wall Script Version 2.0 – Updated Click here

CSS3 Facebook Style Buttons

Creating Facebook style Buttons using simple CSS & CSS3 Buttons To create the default “button” add a class of uibutton to any appropriate element. To create the blue variant include an additional class confirm. To create the green variant include an additional classspecial. Grouped buttons To created grouped buttons wrap them in an … Read more

CSS Search Box Design – Windows Metro Style

I am going to share simple css search box design with html & css code. Its looks like window metro style search box. CSS Code Html Usage [php] &lt;form method=&quot;get&quot; id=&quot;search&quot; action=&quot;http://w3lessons.info/&quot;&gt; &lt;input type=&quot;text&quot; class=&quot;search&quot; value=&quot;Type and hit enter&quot; onblur=&quot;if(this.value == ”) { this.value = ‘Type and hit enter’; }&quot; … Read more

WhiteBoard Drawing Widget using HTML5

Literally Canvas is an extensible, open source (BSD-licensed), HTML5 Whiteboard drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery andUnderscore.js. The instance at the top of this page uses the resizable feature of jQuery UI for … Read more

Sliding Facebook FanPage, Like Box using Jquery & CSS

Sliding Facebook Fanpage/likebox panel

Hi guys, Today I am going to share some useful tips to increase your facebook followers in your website by adding this simple jquery and css code. This code is used to show Sliding Facebook Like Box using jQuery & CSS Let us called Facebook FanPage Slider – both right … Read more

Developing Desktop Applications using Javascript

AppJS is an SDK for developing desktop applications using Node.js combined with Chromium(providing the JS, HTML5, CSS, SVG, WebGL). Developing desktop applications with AppJS couldn’t be easier as it uses the same libraries and knowledge used to build websites. Homepage: http://appjs.org/ GitHub: https://github.com/appjs/appjs

Responsive Images using Jquery

Responsive Img is a jQuery plugin that swaps an image’s src attribute based on its container’s width when the DOM is ready and when the browser is resized. Using a PHP file, Responsive Img creates new images on the fly the first time they’re needed and puts them on your server. Therefore, you … Read more