SitePoint Sponsor

User Tag List

Results 1 to 1 of 1
  1. #1
    SitePoint Member
    Join Date
    Sep 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up Facebook Style Like - Want to share Javascript Tutorial

    hello friends.

    i'm creating facebook style like system using JSON and JS. i create and want to share with everyone.. so better, then i can publish it on some tut. websites

    i create structure in php.. and dump little part of it for check.

    HTML Code:
    <script type="text/javascript">
    
    var data =
    
    [
    
    {
    
    "likes": [
    
    {
    
    "like_id": "1001",
    
    "you_like": 0,
    
    "from": {
    
    "user_name": "ABC",
    
    "user_id": "1"
    
    }
    
    },
    
    {
    
    "like_id": "1002",
    
    "you_like": null,
    
    "from": {
    
    "user_name": "Kamal",
    
    "user_id": "2"
    
    }
    
    },
    
    ],
    
    "likes_count": 2
    
    }
    
    ]
    
    </script>

    The structure is based on, which user is currently logged and check his user_id in likes array on server side. if match you_like = 0. which denote you like this post. else you_like variable hold null value.

    if(current_user_id == likes[user_id])

    you_like = 0

    else

    you_like = null

    and push it on the very first index in array.

    and also facebook show only 3-4 names in like and then show other people likes this.

    so hold the total likes in post.. which is likes_count.

    i use Javascript Stack - array.

    HTML Code:
    <script type="text/javascript">
    
    // CREATE A DIV
    
    var likeDiv = document.createElement('div') ;
    
    likeDiv.setAttribute('id','some_id') ;
    
    // ASSIGN ARRAY
    
    var like = new Array() ;
    
    var you = new Array() ;
    
    var other = new Array() ;
    
    var you_like= data[0].likes[0].you_like ; // getting you_like value
    
    var like_length = data[0].likes.length ; // getting the length of likes array
    
    // LIKE IMPLEMENT THROUGH STACK.
    
    // CHECK IF YOU LIKE EXIST.
    
    if(you_like == 0)
    
    {
    
     if (data[0].likes_count <= 1 || data[0].likes_count >= 5)
    
     {
    
     like.push('You');
    
     }
    
     else
    
     {
    
     you.push('You and ');
    
     }
    
     // GETTING OTHERS NAMES
    
     // Variable i value start with 1.. on index 0 assign to you_like.. so not need to get the name on index 0,
    
     // var i start with 1.
    
     for(var i = 1; i < like_length; i++)
    
     {
    
     like.push('' + data[0].likes[i].from.user_name + '') ;
    
     }
    
    }
    
    else
    
    {
    
     // GETTING OTHERS NAMES IF YOU LIKE NOT EXIST.
    
     for(var i = 0; i < like_length; i++)
    
     {
    
     like.push('' + data[0].likes[i].from.user_name + '') ;
    
     }
    
    }
    
    // CREATE OTHERS LIKES LINK IF COUNT IS GREATER THAN 4
    
    if(data[0].likes_count > 4)
    
    {
    
    var otherLength = parseInt(data[0].likes_count - data[0].likes.length) ;
    
    other.push(' and ' + otherLength + ' others') ;
    
    }
    
    likeDiv.innerHTML = you + like.join(", ") + other + " likes this." ;
    
    document.body.appendChild(likeDiv) ; // Append DIV to body
    
     
    
    </script>
    it show you : You and Kamal likes this.



    test with more likes...



    Code JavaScript:
    var data =[
     
    {"likes": [{"like_id": "1001","you_like": 0,"from": {"user_name": "ABC","user_id": "1"}},{"like_id": "1002","you_like": null,"from": {"user_name": "Kamal","user_id": "2"}},{"like_id": "1003","you_like": null,"from": {"user_name": "XYZ","user_id": "3"}},{"like_id": "1004","you_like": null,"from": {"user_name": "1234","user_id": "4"}}],"likes_count": 5}]


    it will show : You, Kamal, XYZ, 1234 and 1 others likes this.

    any comments will be appreciated. as i'm not much expert.
    Last edited by Mittineague; Dec 8, 2010 at 23:55. Reason: reformatting bbcode tags


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •