如何以Facebook身份显示评论,喜欢,分享,时间选项?
我创建了一个类似于Facebook的帖子系统,如下图所示(感谢SO个人):
I created a posts system that is similar to Facebook, it looks like the picture below [thanks to SO guys for this]:
我无法正确放置内容.在哪里以及如何调整?
I couldn't place the content properly. Where and how to adjust?
我希望它看起来类似于Facebook的帖子部分.
I want it to look similar to Facebook's posts section.
如何显示上述的评论,喜欢,分享选项?
代码: index.php:
Code: index.php:
<html> <head> <script type="text/javascript" src="ajax.googleapis/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#submit').on('click',function(e){ e.preventDefault(); input=$('#message').val(); var comment={}; comment.input=input; var commentdata=$("message").val(); $.ajax({ type: "POST", data:{ comment: commentdata }, url: "ajax.php", success: function(data, textStatus){ //alert(data); $("#commentsholder").append(data); $('#comments').append(comment.input); } },'html'); }); }); </script> </head> <body> <lable>Add post </lable><br> <textarea id="message" rows="4" cols="50" placeholder="Add post"> </textarea> <input type="submit" id="submit" value="share"> </input> <div> <div id="commentsholder"></div> <ul id="comments" ></ul> </div> </body> </html>ajax.php:
<?php $comment=$_POST['commentdata']; $con = mysqli_connect('127.0.0.1:3306', 'root', 'root', 'test'); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } $query= "select * from user_record where id=100005809179068"; $result = mysqli_query($con,$query); //build html format as you need it.. while($row = mysqli_fetch_array($result)){ echo '<div class="comment"><img src="'.$row ['picture'].'"/>'.$row ['name'].'</div>'; } ?>推荐答案
1..首先,为什么帖子和评论不能正确显示?!
1. First, why don't the post and the comment show properly?!
您应该将ajax调用更改为此:
You should change the ajax call into this:
$.ajax({ type: "POST", data:{ comment: commentdata, input: comment.input // Add your input as a parameter }, url: "ajax.php", success: function(data, textStatus){ $("#commentsholder").append(data); } },'html');您的ajax.php:
Your ajax.php:
$input = $_POST['input']; echo '<div class="comment"><img src="'.$row ['picture'].'"/>'.$row ['name']. '<p>'.$input.'</p></div>';现在应该可以工作了.您的头像将始终与您的评论保持一致.
It should work now. Your avatar will always stay in the same block with your comment.
2..其次,添加赞" |评论|分享. 您可以在服务器端ajax或客户端中执行以下操作(我重复使用成功回调):
2. Second, add Like | Comment | Share. You could do this in your server-side ajax or client-side like below (I reuse the success callback):
success: function(data, textStatus){ $("#commentsholder").append(data); // This should append the divment $('ment').append(comment.input); // Not $('#comments') var likeLink = '<a href="www.facebook/plugins/like.php?href=[YOUR_POST_URL]&width=100&height=80&colorscheme=light&layout=standard&action=like&show_faces=true&send=false&appId=[YOUR_APPID]">Like</a>'; var shareLink = '<a title="send to Facebook" href="www.facebook/sharer.php?u=YOUR_URL" target="_blank">Share</a>'; $('ment').append(likeLink).append(shareLink); }您可以在此处使用小提琴: jsfiddle/karmiphuc/SDSwk/
You could use the fiddle here: jsfiddle/karmiphuc/SDSwk/
关于帖子评论,您必须使用FB Graph API发送和检索它们.
About the post comments, you have to use FB Graph API to send and retrieve them.
希望这会有所帮助.
更多推荐
评论系统:显示类似Facebook帖子部分的帖子
发布评论