Home > selvabalaji > Create a facebook post to wall system using PHP and jQuery

Create a facebook post to wall system using PHP and jQuery

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
  3. <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');
  4. The textarea message is then cleared
  5.   $('textarea#wall').val('');
  6. If another message is shared on the wall , it is added on the dom like this :
  7. <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.

Categories: selvabalaji
  1. June 22, 2012 at 2:51 AM

    I look at web sites for one of 2 purposes; to find abilities regarding an idea or for out-and-out amusement. You deliver a little of both choices. I like your web site and visit quite often. With many voices demanding to be discovered in the blogging sphere, you rise above the masses.

  2. hi
    August 21, 2014 at 3:22 PM

    hi

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: