May

6

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

ZeeShaN    AJAX, Facebook, JQuery, PHP, Web Development     Facebook

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.

Fresh and more enhanced facebook style posting and comments system

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>

Related Posts :

How To: Update Your Twitter Status Using PHP....

Block FarmVille/MafiaWar news feeds on Facebo...

Send Email from your Gmail account Using Code...

CodeIgniter Tutorial: Upload and Convert vide...

Create jQuery Form with Progress bar and Inpu...

By HackingEthics

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 [...]