packetcode logo
Facebook Wall Design

Facebook Wall Design

5284 views 2 years ago Tutorials HTML & CSS

After the advent of facebook, the design of pages has been drastically changed, be it a webpage or blog post or even a text feed people are tending towards a social wall design. This tutorial covers a detailed explanation on how to design a facebook wall like page with some front end functionalities using jquery ajax functions. This is purely design implementation (no backend)

What you Learn

  • Styling the page like facebook wall
  • Pushing data from textbox to webpage
  • Smooth animation slide effect
  • Removing/Deleting feeds on page

This tutorial goves you an undertanding on how to implement the facebook like wall design..just design not the backend sql...also some jquery functions to work with front end elements in html

Introduction Video
This is a video demostration of how the implementation looks like

Demo and Download

Have an hands on experience on the code here with the live demo. Also download a copy of the code and test it...and your feedback in the comments would be greatly appreciated.

Start of Code

Create a folder wall-design with index.php then pick up a predefined bootstrap template, here we shall use jumbotron narrow. Dump the code into the index.php and be sure with the css links used, point them to the absolute address. Then remove the unnecessary elements like the menu and jumbotron, then add the title to the page ‘Facebook wall design’.


	<!-- File: index.php -->
	<!-- Segment: Meta Data inclusion -->
	<!DOCTYPE html>
	<html lang="en">
	  <head>
		<!-- Meta info -->
		<meta charset="utf-8">
		<title>Facebook Wall Design</title>
		..
		.
		<!-- Javascript -->
		<script src="http://code.jquery.com/jquery-latest.min.js">
		</script> 
		<!-- CSS styles -->
		<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/
					css/bootstrap-combined.min.css" rel="stylesheet">
		...
		..
		

Grid elements

Now comes the feed posting element which has a user image on to left and textarea on the other end with 20:80 ratio for this we gonna use bootstrap grid elements which has syntax as below where the row represents the single slice of grouped elements and ‘col-’ represents the elements placed in the row with column proportions. Bootstrap grid has 12 columns for our app we shall use 12 columns in ration 2 +10.


	<!-- File: index.php -->
	<!-- Segment: body data: Feed element -->
	<div class="row">
		<div class="col-md-2">col left</div>
		<div class="col-md-10">col right</div>
	</div><!-- /grid row -->
	<!-- new bootstrap 3 col's are replaced with span -->
	<!-- like instead of col-md-2 now its span2 -->
	

Rounded image, textarea and post button

we add the image into the left grid column, then to make the image display in circle shape we shall use the class name as ‘img-circle’ as per bootstrap syntax alternatively we can use a rounded corner or thumbnail version you can refer the syntax here. Now the right grid column add the textarea elements followed by a button as shown in the below syntax.


	<!-- File: index.php -->
	<!-- Segment: body data: Feed element updated-->
	<div class="row">
		<div class="col-md-2">
			<img src="http://www.gravatar.com/avatar/
			5e8288077a04f460b1a0af197226673d"
			class="img-circle" width="100%" />
		</div>
		<div class="col-md-10">
		 	<textarea  rows='3' cols="60"></textarea>
			<button class="btn "type="button" style="float:right"> 
			post
			</button>
		</div>	
	</div>
	

Feed design

we shall use the same grid elements as above just that we gonna change the textarea with the feed element as follows. In the right grid column we shall few div elements like user’s name, feed and a timestamp. To keep it tidy we shall bold the name then bootstrap class ‘muted’ for timestamp which changes the color to ash which is encapsulated in html tag small. Lastly we shall add a div element with content delete within the div ‘name’ , and we shall add a class ‘pull-right’ to push the element to right corner


	<!-- File: index.php -->
	<!-- Segment: body data: Feed element updated -->
	<div class="row">
		<div class="col-md-2">
			<img src="http://www.gravatar.com/avatar/
			5e8288077a04f460b1a0af197226673d"
			class="img-circle" width="100%" />
		</div>
		<div class="col-md-10">
		 	<div><b>Krishna Teja</b>
				<div class="pull-right muted"><small>delete</small></div>
			</div>
			<div>This is a sample feed</div>
			<div class="muted"><small>12 min ago</small></div>
		</div>	
	</div>
	
Html and CSS Design
This video covers the code for the webpage design using bootstrap css

Add script files

To enable the ajax functions, add the jquery cdn file to the index.php. Then create a file by name script.js where we gonna write out js code. We shall use the jquery event trigger ‘click’ on the button element. For that name the button element i would used id as ‘button’, when the user clicks the button our jquery function will execute where i would capture the data and do the operations.Also its important to note that we need to call the preventDefault() function to stop the execution of normal operation and allow only ajax function

	
	<!-- File: index.php -->
	<!-- Segment: Meta data: script files -->
	
	<!-- Javascript -->
	<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
	<script src="js/script.js"></script> 
	

	// File: script.js 
	// Segment: main code 
	$(document).ready(function(){

		//Click Event Trigger
		$(document).on("click","#button",function(e){
			alert("Button has been clicked");
			e.preventDefault();
		});

	});
	

Pull data and insert in the document

Firstly i would name the textarea as ‘feedbox’, when the click trigger is executed we gonna pull the data from the ‘feedbox’ element using the function val();. Here we also need to ensure there is some data in the textarea,if not we would just alert error message. When we capture the feed into the variable we shall use insertAfter() function to push the data into document. In order to push the data we should have a space when the data can sit so we shall create an empty div tag with ‘insert’.


	// File: script.js 
    // Segment: event trigger
	$(document).on("click","#feedpost",function(e){
		var feed=$("#feedbox").val();
		if(feed=="" || feed==" ")
		{
			alert("Enter Some Text");
		}else{
			$('<p>'+feed+'</p>').insertAfter('#insert');
		}
	  	e.preventDefault();
    });

Markup for the new inserted elements

In the last step we just tried to insert the feed into the html div.Now lets try to add some markup so that its more neat and clean. Here we would be adding a multiline text where we need to backslashes at the end of sentences to convey that the statement is split to newline. Once the content is inserted we should also empty the textarea for which we gonna use empty value in val() function;


	// File: script.js 
    // Segment: event trigger updated
	$(document).on("click","#feedpost",function(e){
		var feed=$("#feedbox").val();
		if(feed=="" || feed==" ")
		{
			alert("Enter Some Text");
		}else{
			$('<div class="row">\
			<div class="col-md-2">\
			<img src="http://www.gravatar.com/avatar/\
					  5e8288077a04f460b1a0af197226673d" \
			class="img-circle" width="70px" rel="tooltip" \
			title="first tooltip" id="example" />\
			</div><div class="col-md-10" >\
			<div><b>Krishna Teja</b>\
			<div class="pull-right muted"><small>delete</small>\
			</div></div><div>'+feed+'</div>\
			<div class="muted"><small>12 min ago</small></div>\
			</div>'
			).insertAfter('#insert');
		}
	  	e.preventDefault();
    });

Element Transitions

if you have observed the elements are being added a blink and its some what clumsy so to ease the eye we gonna add a smooth transition of slidedown. For this we shall use slideDown() function of jquery

Delete Elements

Lastly lets implement the delete functionality. Here delete refers to removing the element from the page. For this we shall use the remove() jquery function and this would happen when the user clicks on the delete link on the feed. For this we shall write an event trigger on delete hyperlink which has an id=’delete’. when the user clicks on it we gonna pick up the nearest feed element and just remove it.

im krishna Teja, im a computer science engineer by qualification, a physics teacher by profession and a programmer by interest. I'm an expert in building visually stunning web apps using javascript, ...