Create a facebook post to wall system using PHP and jQuery Part 2

• Tweet

• Tweet

If you have not read my previous post on creating a Facebook post to wall system then you should read it first. In this article, I will explain how I added code behind the “Share button” so that when clicked, it will post the content of the text area as wall post.

How it works ?

When you click on “share” button :

1. The file insert.php is called via ajax to save message in database
2. if message is saved successfully , then add message to the unordered list like below

<ul id="posts">
<li>My wall post message </li>
</ul>

Jquery code below is used to add the message as list :

$('ul#posts').prepend('My wall post message');

3. The textarea message is then cleared

  $('textarea#wall').val('');

4. If another message is shared on the wall , it is added on the dom like this :

<ul id="posts">
<li>This is my second post </li>
<li>My wall post message </li>
</ul>

Basically , this is how the post to wall system works .Below is the complete code when user clicks on share button . I have added the comments inline .

 $('#shareButton').livequery("click", function () { //if user clicks on share button
        var textarea_content = $('textarea#wall').val(); // get the content of what user typed ( in textarea )
        if (textarea_content != '') { // if textarea is not empty
            var sitetitle = $('label.title').html(); // then get external site title (if there's any )
            if (sitetitle == null) {
                sitetitle = ' ';
            }

            var siteurl = $('label.url').html(); // get site url ( if there's any )
            if (siteurl == null) { // if no value retrieved
                siteurl = ' '; //set to blank to prevent 'null' or 'undefined' displayed on page
            }
            var sitedesc = $('label.desc').html(); // get external site description ( if there's any)
            if (sitedesc == null) { // if no value retrieved
                sitedesc = ' '; //set to blank to prevent 'null' or 'undefined' displayed on page
            }
            var current_image_id = $('input#current_img').val(); // get the current image thumbnail id (if there's any)
            // we need that id to post the correct image chosen by user in  wall post
            if (current_image_id != '') { //make sure id is retrieved successfully
                var current_image_url = $("img#" + current_image_id).attr("src"); // get the current image displayed in thumbnail url in "src" tag
                if (current_image_url != '') { //if there's an image url
                    var image_html = '<div class="img_attachment"> <img class="external_pic" width="90" height="67"  src="' + current_image_url + '">'; // prepare image url 'embeded with appropriate html
                } else {
                    var image_html = ''; //No image to display ( it means that no image url was retrieved from external website , ( ignoring <div class = 'img_attachement> .. </div>
                }
            } else {
                var image_html = ''; // set to nothing
            }

            var wall_post = '<li> <img src="image/avatar.jpg" class="avatar">    <div class="status">     <h2><a href="#" target="_blank">Hyder Abbass</a></h2>  <p class="message">' + textarea_content + '</p> ' + image_html + '<div class="data"><p class="name"><a href="' + siteurl + '" target="_blank">' + sitetitle + '</a></p><p class="caption">' + siteurl + '</p><p class="description">' + sitedesc + '</p></div></div> </div><p class="likes">5 hours ago ·            100 Likes </p></li>';
      var message_wall = $('#message_wall').attr('value');

            $.ajax({
                type: "GET",
                url: "insert.php",
                data: "message_wall=" + wall_post,
                success: function () {
                    $('ul#posts').prepend(wall_post);

                }
            });

            //Add the prepared html to add in div with id = wallz
            //After adding the post wall ,
            $('textarea#wall').val(''); // remove text in the textarea
            $('#ajax_content').empty(); // empty the div with id = ajax_content ( contains previous content fetched via ajax )
            $('#fetched_data').hide(); // hide the div
            $('#ajax_flag').val(0); //reset  this to zero
        } else {
            alert('Enter some text ! '); // just in case some morons try to click on share witout writing anything :)
        }

    });

Wrap up

In this article ( Part 1 and part 2 ) we learnt how to create a Facebook post-to-wall system that allows a user to post whatever he or she type in the text area. If the text area contains a link to an external website, the page title, description and thumbnails contained on this external page is automatically fetched and displayed. User can choose which thumbnail to post as wall post. When user clicks on the share button, the application triggers an Ajax call to insert.php (in which you should write code to save it to your database). if you have any question/problem , I had love to answer you in the comments below.

Related Posts

1. Create a facebook post to wall system using PHP and jQuery Part 1
2. Facebook and Google Plus style of introducing new features using jQuery
3. Create fancy contact form with CSS 3 and jQuery
4. An Alternative to Pagination : Facebook and Twitter Style

Tagged as: Facebook