Build a website fast with GoDaddy.com! - 125x125
May
6

Facebook Style TextArea with Wall Posting Script using jQuery PHP and Ajax.

Author ZeeShaN    Category AJAX, Facebook, JQuery, PHP, Web Development     Tags

Here is a script for you to create facebook wall style post inserting techniques and expandable text area like facebook. I have used jquery-elastic
and watermarking plugin of jquery to create this awesome effects.

Fresh and more enhanced facebook style posting and comments system

Basically, i here is a simple text area example with ajax posting in facebook style.

Table Structure:

CREATE TABLE `facebook_posting` (
  `p_id` int(11) NOT NULL auto_increment,
  `f_name` varchar(50) NOT NULL,
  `post` varchar(255) NOT NULL,
  `f_image` varchar(50) NOT NULL,
  `date-created` datetime NOT NULL,
  PRIMARY KEY  (`p_id`)
)

Javascript Code: Ajax Call with Watermarking Text Area

$(document).ready(function(){	
 
	$('#shareButton').click(function(){
		var a = $("#watermark").val();
		$.post("posts.php?value="+a, {
		}, function(response){
			$('#emailInfo').fadeOut();
			$('#posting').html(unescape(response));
			$('#posting').fadeIn();
		});
	});
	$('textarea').elastic();
 
	jQuery(function($){
	   $("#watermark").Watermark("What's on your mind?");
	});
	jQuery(function($){
	   $("#watermark").Watermark("watermark","#369");
	});
	function UseData(){
	   $.Watermark.HideAll();
	   //Do Stuff
	   $.Watermark.ShowAll();
	}
});

Text Area HTML:

<form method="post">
<div class="UIComposer_Box">
	<span class="w">
		<textarea id="watermark" class="input" cols="60" name="watermark"></textarea>
	</span>
<div style="padding: 10px; height: 30px;">
			<label id="shareButton" class="uiButtonLarge uiButtonShare"> Share</label></div>
</div>
</form>

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

16 to “Facebook Style TextArea with Wall Posting Script using jQuery PHP and Ajax.”

  • Anil Thakur May 8, 2010 at 12:05 pm

    Nice work thanks ZeeShaN.

  • Jay May 13, 2010 at 3:19 pm

    Nice Work its great!!!

    Can u put a delete button on there ! to delete the wall posts!

    Thanks

  • ZeeShaN May 13, 2010 at 5:23 pm

    Thanks Jay,
    I will add this delete option soon.. Keep following

  • 140+ Fresh Categorized Articles for Web Designers and Developers | tripwire magazine May 15, 2010 at 7:30 am

    [...] Facebook Style TextArea [...]

  • 140+ Fresh Categorized Articles for Web Designers and Developers | tripwire magazine May 15, 2010 at 7:30 am

    [...] Facebook Style TextArea [...]

  • mike snyder May 15, 2010 at 9:37 am

    hey ZeeShaN wasup got a question for you i cant seem to make this work on my site can find this issue was wondering if you would be willing to help me add this to my existing social network site? not asking you to do the work but maybe give me ideas on what to try

    my info is
    table name – friends
    table name – member_profile (where user profile info is ex. user_name and password)
    want to make it so on the users profile friends can post to wall and it shows them posting it,

    or at least where the user can update their own status i tried adding this and using my username check which would be [var.user_name] and thats not working for some reason

    website is http://myspacezonex.com
    login details
    Id: mysite
    pass: soccer

  • mike snyder May 15, 2010 at 9:37 am

    my email addy is mjsnyder22@yahoo.com

  • Usman May 15, 2010 at 11:01 am

    Thnaks ZeeShan

  • Facebook Style TextArea with Wall Posting Script using jQuery PHP and Ajax | RefreshTheNet May 17, 2010 at 7:58 am

    [...] Face­book Style TextArea with Wall Post­ing Script using jQuery PHP and Ajax. | 99Points [...]

  • 140+ Fresh Categorized Articles for Web Designers and Developers May 20, 2010 at 8:16 pm

    [...] Facebook Style TextArea [...]

  • PHP Geek Mark May 29, 2010 at 12:32 am

    Hi ZeeShaN ;)

    This script is brilliant, thank you for making it available here! I have been looking at JQuery for a while and your script here is actually something I understand. Super work, plus I will attempt at integrating this into one of my sites.

    Thanks again,

    Namaste

    Mark

  • Ali July 6, 2010 at 12:13 pm

    But there is no refresh/update in other pages, I meane if I have 2 windows and I submit a string in window the other window is static and there is no referesh.

  • ZeeShaN July 6, 2010 at 5:38 pm

    @Ali, Hi ali, Can you explain your query a little bit? thanx

  • Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax July 29, 2010 at 8:11 pm

    [...] system. Try a new reloaded version of demo which is almost similar to facebook style. My previous facebook style posting system was not so much like original facebook posting style and also there is no commenting system [...]

  • Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax | TechnoForum August 24, 2010 at 8:12 pm

    [...] system. Try a new reloaded version of demo which is almost similar to facebook style. My previous facebook style posting system was not so much like original facebook posting style and also there is no commenting system [...]

  • Facebook Style Wall Posting and Comments System using jQuery PHP and Ajax | Programmer Heaven September 1, 2010 at 9:59 am

    [...] system. Try a new reloaded version of demo which is almost similar to facebook style. My previous facebook style posting system was not so much like original facebook posting style and also there is no commenting system [...]

Post comment



Enter your Email:

Click Here for Popular

Who Am I

Zeeshan Rasool

Software Engineer - PHP
Lahore - Pakistan
Skype: zeeshan-rasool
gTalk: zishan.rasool85

Categories

Archives

Tags

99points adobe AJAX ajax pagination ajax rating ajax tutorial captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials curl dreamweaver cs5 Facebook Facebook. PHP. JQuery facebox farmville ffmpeg flv google api hacking image gallery Joomla JQuery jQuery Sliding Jquery tutorial mafia war Mootools MySQL Payment PHP php curl Poll System recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter Web XSS youtube

Comments