[phpbb3] Like system that shows who liked a post

The content in this test is experimental, and all instructions SHOULD be READ and FOLLOWED. Failure to do so may cause unwanted side effects. USE WITH CAUTION !!

As many people want a like system to show who liked posts, I'll give you the chance to test it. You should know already that our forums do not have databases which we can interact with and the majority have no idea how to use a database. This plugin will make use of a topic as a database to store like information. This will require a group with moderation privileges. Before you continue, please take note of the following.

• This was developed for phpbb3 and is not guaranteed to work on other versions
  
• The method to store data is not secure, and can be overwritten or deleted ( it's recommended to keep backups of DBs )
  

This test should help you achieve the following, if done correctly.



Creating a new table

To create a new table in your database, you first need to follow the installation process here : https://fmdesign.forumotion.com/t281-fa_db-database-installation

If you followed the tutorial above, paste the code below as the topic contents. Otherwise if you've already set your database up, click "edit database" and scroll down to the quick reply to add a new table.

Code:

[table class="database_table" id="fa_likes"][tr][td]Post ID[/td][td]Users[/td][/tr][/table]

Installation

So our like button has a style go to Administration Panel > Display > Colors > CSS stylesheet, and paste the following codes.

Code:

/* START fa_like */
.fa_like_row { margin-top:6px }
.fa_like_list { font-style:italic; min-height:25px; }
a.fa_like_button, .fa_like_button, .fa_liked { color:#FFF; font-size:10px; background:#6A6; border:1px solid #686; border-radius:3px; display:inline-block; padding:3px 6px; cursor:default; }
.fa_liked { cursor:default; opacity:0.3; }
a.fa_like_button:hover { background:#3A3; border:1px solid #383; cursor:pointer; }
/* END fa_like */

Finally the last part you've been waiting for, the like system. Create another script :

Title : fa_likes
Placement : In the topics

Code:

$(function(){
  var pid = 270,
  i = 0,
  lang = {
    like : 'Like',
    loading : 'Loading...',
    people : 'People like this post.',
    person : 'Person likes this post.'
  };
 
  $('.post').each(function() {
    var plus = $(this).find('.vote-button:first a'), id = $(this).attr('id').slice(1), clear = $(this).find('.clear'), votes = 0, text = lang.people;
 
    if (plus.length) clear.after('<div class="fa_like_row"><a class="fa_like_button" href="'+plus.attr('href')+'">'+lang.like+'</a></div>');
    else clear.after('<div class="fa_like_row"><span class="fa_liked">'+lang.like+'</span></div>');
 
    if ($(this).find('.vote-bar').length) {
      votes = Number($(this).find('.vote-bar').attr('title').replace(/.*?\((\d+)\s.*/,'$1'));
      if (votes == 1) text = lang.person;
    }
 
    $(this).find('.fa_like_row').append('<div class="fa_like_text">'+votes+' '+text+'</div><div class="fa_like_list" id="fa_like_list'+id+'">Loading...</div>');
    $(this).find('.vote').remove();
 
  i++;
  if (i==$('.post').length) {
      $.get(_database.tid, function(data) {
      $('.post').each(function() {
        var id = $(this).attr('id').slice(1), dblikes;
          $('#fa_like_list'+id).html('');
          if ($('#fa_likes #likes'+id,data).length) {
            dblikes = $('#fa_likes #likes'+id,data).text().replace(/likes=\{(.*?)\}/,'$1').split(',');
            for (var i=0; i<dblikes.length; i++) {
              var comma = ', ';
              if (i==dblikes.length-1) comma = '';
              $('#fa_like_list'+id).append(dblikes[i].replace(/^(.*?):(.*?)$/,'<a href="/u$1">$2</a>'+comma))
            }
          }
      });
    });
  }
  });
 
  $('.fa_like_button').on('click', function() {
    var id = $(this).attr('href').replace(/^.*?p\_vote=(\d+)$/,'$1');
    $(this).after('<span class="fa_like_button">'+lang.loading+'</span>').hide();
    $.get($(this).attr('href'), function() {
    _database.post({
        pid : pid,
        tableid : 'likes'+id,
        update : ['\\[td id="likes'+id+'"\\]likes=\\{(.*?)\\}\\[/td\\]','[td id="likes'+id+'"]likes={$1,'+_userdata.user_id+':'+_userdata.username+'}[/td]'],
        newRow : '[tr][td]t'+window.location.pathname.replace(/\/t(\d+).*/,'$1')+'p'+id+'[/td][td id="likes'+id+'"]likes={'+_userdata.user_id+':'+_userdata.username+'}[/td][/tr]',
        reload : true
      });
    });
    return false;
  });
});

You must make sure to change the pid to your database table ID. To do that, edit the post which contains your like table, and copy / paste the following portion of the URL as the PID value.


When finished, it should look like the following, except a different ID.

Code:

pid = 270,

Save the script, and it should now be setup if you followed all steps correctly !! Go like some posts and the database should then update with a new table row for posts that haven't been liked. When you visit posts, they should display who liked them if it's logged within the database.


If you have any questions or comments you may leave them below. Have fun with this experimental system !

i think the table is not working on phpbb2
the like button shows inactive and wont press
i did not try phpbb3 yet
too lazy to change

Yes, that's because it was developed on phpbb3. After I'm finished updating the database for v1.02 I'll optimize it for all versions.

The view count module is currently the first to work on all versions. Oh, and the shoutbox, when it's released with v1.02.

Does this work for PunBB too? If not can you give me the PunBB version code, many thanks.

Luke Spike wrote:Does this work for PunBB too? If not can you give me the PunBB version code, many thanks.

At the moment this plugin is only for phpbb3. However, I will optimize it after the release of Database v1.02.

I can not wait

You will need to

I will try it soon too

I know a lot of people want this feature, so It takes priority. I will probably start optimizations soon, since the database is almost ready. The shoutbox will follow shortly after...

Can I try modify code for chatbox for my forum, and if I got it, give you to check? I have phpBB 3, but new design will be at punBB so I will try for it

still not working with me phpbb3

as you see the post by other name is same as my post name states
by the way the translating is almost finished
im looking now for how to change the menu box to be at the right side instead of the left
when i used the Arabic forum most of text bugs are fixed

Have you activated the reputation system ?

This is nice...

I want to know... Is it any chanse to change like button with thanks button?
Thanks!

Regards & Respect!

smejker wrote:This is nice...

I want to know... Is it any chanse to change like button with thanks button?
Thanks!

Regards & Respect!

You're referring to the text, correct ?

If so, you can modify the language object :

Code:

  lang = {
    like : 'Like',
    loading : 'Loading...',
    people : 'People like this post.',
    person : 'Person likes this post.'
  };

Change or translate the texts to what you want.

lol im such an idiot
reputation was off
worked now
after translated there is 3 weird letters
NaN

this is the part i changed

Code:

$(function(){
      var pid = 32,
      i = 0,
      lang = {
    like : 'اعجبنى',
    loading : 'تحميل....',
    people : 'معجبون بالمشاركة',
    person : 'معجب بالمشاركة'
  };

@Michael_vx

Try replacing this :

Code:

votes = Number($(this).find('.vote-bar').attr('title').replace(/.*?\((\d+)\s.*/,'$1'));

By this :

Code:

votes = Number($(this).find('.vote-bar').attr('title').replace(/^(\d+).*/,'$1'));

 
nope
still the NaN appears

Michael_vx wrote: 
nope
still the NaN appears

I'll look over this when I work on optimizations.

For reference NaN = Not a Number

I think it could be a problem with getting the number string from the title and converting it to a number in Arabic language. If there's a string that isn't a number character it would result in NaN.

For example :

Code:

Number('10') // converts the string and returns a number
Number('Hello') // Returns NaN, because Hello isn't a number

 
im a bit confused
but as long as you will look after it then ill wait i guess
you are super genius
and im super dumb

I like this... So I wonderer, it's possible to make hidden content...

Like this:

Code:

You mast click Thanks (Like) to see link!

and if users click on Thanks (Like) button, then the link cold be seen...

I think that be wonderful.

Regards & Respect!

 
are you trying to burn the topic

i was thinking about something like that but i dont think its possible i think it might need custom layout 
or lets see our Master Ange
im sure he can find a trick
 
because im a dumb bull

smejker wrote:I like this... So I wonderer, it's possible to make hidden content...

Like this:

Code:

You mast click Thanks (Like) to see link!

and if users click on Thanks (Like) button, then the link cold be seen...

I think that be wonderful.

Regards & Respect!

Since it's reliant on JavaScript, it wont be ideal. We would either have to hide the content by JavaScript or CSS. If by JavaScript, the content could be seen with JS disabled. If by CSS, the member wont be able to see the content with JS disabled even when they like the post.

You could perform a quick check in the liked users list to see if their username, or id is present. If not, the content will remain hidden. You can't use the default hide bbcode, because that requires a reply. Instead I'd recommend using a table with a classname. Like :

Code:

[table class="hidden"][tr][td]Content here[/td][/tr][/table]

That's hidden by CSS.

Code:

.hidden {
  display:none;
  visibility:hidden;
}

And a new question

Is it possible to add an icon as like-button? For example:

For me its look better with an icon !

im here again to see how is the progress about NaN problem because its still in the testing platform

@Grow you should be able to make this modification via the language object. You'll have to use HTML like this :

Code:

  lang = {
    like : '
<img src="http://www.urologyatkumed.com/Repository/5/Image/Facebook-Like-Button.png" alt="Like"/>',
    loading : 'Loading...',
    people : 'People like this post.',
    person : 'Person likes this post.'
  };

You'll most likely have to remove some of the CSS because the green button may still be present.


@Michael_vx At the moment I've not started work on rewriting the like system, but it's on the list..

im guessing your list is a bit long list
at least you told me that you will
i can wait because i know coding is a ***** hard

for even just translating is bit hard and i get some falls in it since im a fast reader person so i miss some words while im reading xD reading a lot make me fell sleepy