Facebook Style Like - Want to share Javascript Tutorial

hello friends. :slight_smile:

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 :smiley:

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

<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.

<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…

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. :slight_smile: