Whenever I think about facebook post publishing system, then i have got one thing how they developed it. Today i have tried to develop another post publishing system like facebook. It will be helpful for everyone who want to develop a micro – blogging system on their website.
Here below i have used these technologies to developed it PHP, AJAX, JQUERY, CSS, MYSQl.
Structure of post publishing system:
With using below code Make Facebook like post publishing system
[CODE]
root directory/
images
dbconnect.php
index.php
statusupdater.php
result.php
[/CODE]
First i have develop a database table.
[CODE]
CREATE TABLE IF NOT EXISTS `statusupdater` (
`status_id` int(45) NOT NULL AUTO_INCREMENT,
`post_date` datetime NOT NULL,
`status_content` mediumtext COLLATE utf8_bin NOT NULL,
`user` varchar(45) COLLATE utf8_bin NOT NULL,
`post_status` varchar(1) COLLATE utf8_bin NOT NULL,
PRIMARY KEY (`status_id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT=’status Updater For demo’ AUTO_INCREMENT=40 ;
[/CODE]
Once you have create a database table structure then you need to create a connection with mysql database. I Have created a database connection using this file dbconnect.php. Here below is the code of this file.
[CODE]
<?php
//file:dbconnect.php
$con=mysqli_connect(“localhost”,”root”,””,”rudb”);
// Check connection
if (mysqli_connect_errno())
{
echo “Failed to connect to MySQL: ” . mysqli_connect_error();
}
?>
[/CODE]
Make an index file where you will show your publishing system. I have created a file name with index.php. Here i have used jquery script to work post publishing form.
[CODE]
<?php
//status updater
//Developer:Rahul Negi
//Dev Url: www.infotheme.in
include_once(‘dbconnect.php’);
?>
<!DOCTYPE html>
<html>
<head>
<title>Facebook like post publishing system – Demo Status Updater</title>
<meta name=”description” content=”see demo of facebook like demo status updater system using php, mysql and ajax- Developed by rahul negi”/>
<meta keywords=”facebook status updater, facebook like status upldate system, facebook like publishing system, post publish system using php, facebook like status update”/>
<link rel=”stylesheet” href=”style.css” type=”text/css”/>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”>
</script>
<!–jquer ajax call to status updater script–>
<script type=”text/javascript”>
$(document).ready(function(){
$(“#statusUpdate”).click(function(){
$.post(“http://localhost/demos/status-updater/statusupdater.php”,
{
user:$(“input:text”).val(),
status:$(“textarea”).val()
},
function(data,status){
if(status == “success”)
{
$(“#msg”).replaceWith(“<div id=msg><img src=images/loader.gif><br/>Loading Your Status…</div>”);
setTimeout(function(){
$(“#msg”).replaceWith(“<span id=msg>”+data+”</span>”);
},5000);
setTimeout(function (){
$(‘#feed’).load(‘result.php’).fadeIn(“slow”);}, 7000);
}
});
});
setInterval(function (){
$(“#msg”).replaceWith(“<div id=msg><img src=images/loader.gif><br/> Loading Your Friend’s Feeds…</div>”);
setTimeout(function (){
$(“#msg”).replaceWith(“<div id=msg></div>”);
$(‘#feed’).load(‘result.php’).fadeIn(“slow”);}, 3000);
},19000);
});
</script>
</head>
<body>
<header>
<img src=”images/rappLogo.jpg” alt=”R Apps – A Rahul Negi’s Production”/>
</header>
<div id=”entry-title”><h1>Demo Status Updater</h1>
<h2>How To Make Facebook like post publishing system.</h2>
</div>
<section>
<div id=”statusBar”>
<form action=”<?php $_SERVER[‘PHP_SELF’];?>” name=”statusUp” method=”post”>
<input type=”text” name=”user” id=”user” value=”Your Name” onfocus=”if(this.value==’Your Name’)this.value=”;” onblur=”if(this.value==”)this.value=’Your Name’;”/>
<textarea name=”status” id=”status” onfocus=”if(this.value==’What`s On Your Mind?’)this.value=”;” onblur=”if(this.value==”)this.value=’What`s On Your Mind?’;”>What`s On Your Mind?</textarea>
<div id=”sbtbar”><input type=”button” name=”post” id=”statusUpdate” onclick=”statusUpdate()”value=”Share”/><div class=”clear”></div></div>
<div class=”clear”></div>
</form>
</div>
<div id=”bottomCol”>
<div id=”msg”></div>
<?php include_once(‘result.php’);?>
</section>
<footer>
© <?php echo date(‘Y’); ?> 2014 R APPS <small>A Rahul Negi’s Production</small>
</footer>
</body>
</html>
[/CODE]
When you have call a status updater script i have used here mysql insert query which insert user data to database.
[CODE]
<?php
//status updater
//Developer:Rahul Negi
//Dev Url: www.infotheme.in
include_once(‘dbconnect.php’);
$msg=””;
if(empty($_POST[‘user’]) || $_POST[‘user’]==”Your Name”)
{
$msg=”Please Must Enter Your Name.”;
}else{
$user=$_POST[‘user’];
}
if(empty($_POST[‘status’])|| $_POST[‘status’]==”What`s On Your Mind?”)
{
$msg=”Please Say What’s On Your Mind?”;
}else{
$status=$_POST[‘status’];
}
if(empty($msg))
{
$date=date(‘y-m-d h:i:s’);
mysqli_query($con,”INSERT INTO statusupdater (`post_date`, `status_content`, `user`, `post_status`)
VALUES (‘$date’,’$status’,’$user’,’O’)”);
$msg=”Successfuly Posted On Your Wall”;
}
?>
<?php if(!empty($msg))
{?>
<div id=”msgBar”><?php echo $msg;?></div>
<?php }?>
[/CODE]
After that you need to make a css( castcading stylesheet ) to design your webpage. below the code of style.css file
[CODE]
/*style sheet*/
*{margin:0; padding:0;}
body{background:#eee;font-family:verdana;}
header{display:block; width:100%; background-color:#333; background-size:42px; position:fixed; color:#f9f9f9; text-align:center;background-image:url(‘images/rappLogo.jpg’); border-bottom:2px solid #1b1b1b; box-shadow:0 0 40px #000;}
header img{width:82px;}
#entry-title{display: inline-block;padding: 4px;background: #222;font-size: 10px;color: #fff;text-align: center;text-shadow: 2px -2px 0 #5E5E5E;border-bottom: 1px solid #000;margin-top: 84px;width: 100%;}
section{display:block; padding:10px; max-width:800px; margin:0 auto; border-left:1px solid #333; border-right:1px solid #333; min-height:470px;}
.clear{clear:both}
#statusBar{display: block;max-width: 600px;width: 100%;margin: 6px auto;padding: 7px;border: 1px solid #000;}
#statusBar input[type=”text”]{display: block;max-width: 300px;width: 100%;font-size: 12px;padding: 6px;border: 1px solid #000;}
#msg{display:block;width:100%;text-align:center;font-size:12px;}
#msg img{width:20px;}
#statusBar input[type=”button”]{display: block;float: right;padding: 4px 13px;border: 1px solid #000;background: #000;margin-top: 4px;color: #fff;border-radius: 3px;box-shadow: inset 0 0 3px #A8A59E;cursor: pointer;}
#statusBar textarea{display: block;width: 97.8%;font-size: 13px;padding: 1%;margin-top: 6px;border: 1px dashed #000;border-bottom: 3px solid #000;font-family:verdana;}
#sbtbar{background: #D8D8D8;padding: 3px;border: 1px solid #000;}
#msgBar{display: block;max-width: 594px;text-align: center;font-size: 11px;background: #DACC97;padding: 10px;border: 1px solid #70612F;border-radius: 3px;margin: 15px auto;}
#bottomCol{display: block;max-width: 594px;min-height: 200px;width: 100%;background: #FFFFFF;padding: 10px;margin: 0 auto;border: 1px solid #333;}
#feed{display:block;text-align:center;padding: 6px;border: 1px solid #666;font-size: 12px;line-height: 16px;background: #f9f9f9;margin: 10px 0}
.feedtop{display: block;}
.date{display: block;padding: 2px;margin-top: 4px;color: #505050;border-top: 1px solid #666;border-bottom: 1px solid #666;}
#s_content{display: block;padding: 4px;margin: 7px;font-size: 11px;}
.avatar{display: block;border: 1px solid #333;width: 48px;height: 48px;border-radius: 4px;box-shadow: 0 0 4px #000;margin:0 auto;}
.avatar img{border-radius: 4px;width:100%;height:100%;}
footer{display: block;text-align: center;border-top: 1px solid #333;font-size: 11px;padding: 9px 0;background: #000;color: #fff;}
[/CODE]
Here i have developed all script to make a mcrobloging system using php, ajax, css, html, mysql. Make your microbloging system today using this code. I will be back with another project here. Microbloging system is easy to develop as i know with this project. This is an open source project you can download it from our repository.
[CODE]
Developer: Rahul Negi(https://www.facebook.com/Mr.Rahul.Negi)
Production: R Apps( A rahul Negi’s Production)
Project Name: Microbloging system & facebook like post publishing system.
[/CODE]
Please, help me. Your script doesn’t work and an error:
Warning: mysqli_fetch_array() expects parameter 1 to be mysqli_result, boolean given in C:\xampp\htdocs\post-publishing-sytem-demo\result.php on line 4
What is the problem?
Thanks.
Hello,
Zlaya thanks for this question, i got the issue,
You need to create a database and create a table where you will store user’s post data.
$feedresult=mysqli_query($con,"Select * From statusupdater ORDER BY status_id DESC");while($result=mysqli_fetch_array($feedresult))
You are getting error from these 2 lines.
If you have connected database successfully then, you need to edit code
$feedresult=mysqli_query($con,"Select * From Table Name ORDER BY post id field name DESC");while($result=mysqli_fetch_array($feedresult))
Replace table name and field name with yours and then let us know.
Thanks & Regards
INFOTHEME DEVELOPERS
http://www.infotheme.in
OK, my fault.
In the file dbconnect.php I have not put the name of the base and therefore the error occurred. Everything else I have done: I’ve created a database and a table under your name and there was no error.
But now, another problem happens. When I write a post and click on the button share, post does not appear until I refresh page in the browser. Post was placed in the base, but not to appear. And if I refresh browser several times, then the post also appears several times.
And another one question: how to increase the time interval between the “Loading Your Friend’s Feeds …” (for example, 3 minutes)?
Thanks & Regards
ALL THE POST ACTION TRIGGERED THROUGH THIS CODE. Let us explain what we are doing here.
First we have fired a click action with this:
$("#statusUpdate").click(function(){//HERE WILL COME ACTION, WHICH WE WANT TO PERFORM
});
After doing it we have used $.post method of jquery to post our data to statusupdater.php file. Problem might be occur in your statusupdater.php go to network in inspect element (GOOGLE CHROME => press f12)
You can check your file is working fine or not you can check file response and posted data. If all is going well and you are getting “successfully posted on your wall” means all is going well with statusupdater.php
Now problem will be here in result.php
In this code we are getting data from result.php and problem might be occur in your result.php Please check result.php from network section when you are posting data. If you are getting new data in result.php, Means problem is in html you must check you have a div with id “feed” where content can load. If you still getting any error please contact us at : our email and we can make a hangout call . infotheme.in@gmail[dot]com
or support@infotheme[dot]com
you can increase loading feed time through this.
setInterval(function (){$("#msg").replaceWith("
Loading Your Friend's Feeds...
");
setTimeout(function (){
$("#msg").replaceWith("
");
$('#feed').load('result.php').fadeIn("slow");}, 3000);
},19000);
change 19000 to 300000 for increase time to load friends feed.
setTimeout(function (){$('#feed').load('result.php').fadeIn("slow");}, 7000);
The code you can find at index.html
If you still getting error please contact us at our email infotheme.in@gmail[dot]com we can make a skype call.
Thanks & Regards
Rahul Negi
Senior WebDev Infotheme
Infotheme Developers
http://www.infotheme.in