For the first time, you probably feel doubt about it. But you can make this with 5 to 10 minutes by following bellow scripts which I provided.
Try this to giving extra look your web design project. This project highlights your facebook profile on the project. Wish you want to use my facebook page or view Facebook profiles on the template you should try this script.
Read Also:
1. How To Make Login PHP Form With PHP Login Script And Jquery
2. Make Facebook Style Notification Popup Using CSS and Jquery Codes
3. How To Make Live Character Count Meter with Jquery
4. Games With HTML Codes: Make A Snake Game With Notepad
Facebook Like Profile With Jquery
So, let’s see the facebook script for create facebook like a profile on web-based software.
Database Design:
In this part, you should place user table contains user_id, username, password and profile:
CREATE TABLE `users` (
`user_id` INT NOT NULL primary key AUTO_INCREMENT ,
`username` VARCHAR(45) NULL unique,
`password` VARCHAR(45) NULL ,
`profile` TEXT,
);
PHP
updateprofile.php
Contains javascript, PHP code, and HTML code:
<script type=”text/javascript” src=”http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function()
{
//Edit link action
$(‘.edit_link’).click(function()
{
$(‘.text_wrapper’).hide();
var data=$(‘.text_wrapper’).html();
$(‘.edit’).show();
$(‘.editbox’).html(data);
$(‘.editbox’).focus();
});
//Mouseup textarea false
$(“.editbox”).mouseup(function()
{
return false
});
//Textarea content editing
$(“.editbox”).change(function()
{
$(‘.edit’).hide();
var boxval = $(“.editbox”).val();
var dataString = ‘data=’+ boxval;
$.ajax({
type: “POST”,
url: “update_profile_ajax.php”,
data: dataString,
cache: false,
success: function(html)
{
$(‘.text_wrapper’).html(boxval);
$(‘.text_wrapper’).show();
}
});
});
//Textarea without editing.
$(document).mouseup(function()
{
$(‘.edit’).hide();
$(‘.text_wrapper’).show();
});
});
</script>
//body part
<div class=”mainbox”>
<a href=”#” class=”edit_link” title=”Edit”>Edit</a>
// Displaying profile data from the users table
<?php
include(“db.php”);
$user_id=$session_id;
$sql=mysql_query(“select profile from users where user_id=’$user_id'”);
$row=mysql_fetch_array($sql);
$profile=$row[‘profile’];
?>
<div class=”text_wrapper”><?php echo $profile; ?></div>
<div class=”edit” style=”display:none”>
<textarea class=”editbox” cols=”23″ rows=”3″ ></textarea>
</div>
</div>
update_profile_ajax.php
Contains PHP code at users table:
<?php
include(“db.php”);
if($_POST[‘data’])
{
$data=$_POST[‘data’];
$data = mysql_escape_String($data);
$user_id=$session_id;
$sql = “update users set profile=’$data’ where user_id=’$user_id'”;
mysql_query( $sql);
}
?>
Database configuration file With PHP Codes.
db.php
<?php
$mysql_hostname = “localhost”;
$mysql_user = “username”;
$mysql_password = “password”;
$mysql_database = “database”;
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die(“Opps some thing went wrong”);
mysql_select_db($mysql_database, $bd) or die(“Opps some thing went wrong”);
?>
CSS Codes
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.mainbox
{
width:250px;
margin:50px;
}
.text_wrapper
{
border:solid 1px #0099CC;
padding:5px;
width:187px;
}
.edit_link
{
float:right
}
.editbox
{
overflow: hidden;
height: 61px;
border:solid 1px #0099CC;
width:190px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding:5px
}
Your projects are now ready for use. I am sure that now you can make facebook like profile and edit with jquery in 5 minutes. If you have any question for about it pls don’t avoid the comment option. I will try to solve your problems with this project.