Latest topics
» [HELP] About Profile Cover Code
by omarpop23 Yesterday at 06:39

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» Auto-suggest @mentions as You Type
by skouliki Wed 15 Nov 2017, 14:56

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Hello everyone this is Adam from France
by Adam Mon 13 Nov 2017, 13:32

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

» Post a message automatically when locking a topic
by ThunderTB Sun 12 Nov 2017, 13:51

» Control pannel issue
by Ange Tuteur Sun 12 Nov 2017, 09:49

» BUG... forum members birthday's
by Ape Sat 11 Nov 2017, 11:44

» Display a Preview of Groups on Hover
by ThunderTB Fri 10 Nov 2017, 21:56

» Search box only visible on hover
by Ange Tuteur Mon 06 Nov 2017, 09:57

» [GAME] Animal Game
by SLGray Sun 05 Nov 2017, 15:04

Recent Tutorials
Who is online?
In total there are 7 users online :: 0 Registered, 0 Hidden and 7 Guests :: 2 Bots

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

[phpbb3] Like system that shows who liked a post

Page 1 of 3 1, 2, 3  Next

View previous topic View next topic Go down

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 20 Jan 2015, 02:07

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 : http://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 ! Monster


Last edited by Ange Tuteur on Mon 16 Feb 2015, 00:45; edited 1 time in total
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Fri 06 Feb 2015, 08:37

i think the table is not working on phpbb2
the like button shows inactive and wont press
i did not try phpbb3 yet Very Happy
too lazy to change
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 06 Feb 2015, 09:30

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

The view count module is currently the first to work on all versions. Oh, and the shoutbox, when it's released with v1.02. Smile
avatar
Luke Spike
New Member
Title :
Design Addict
Gender : Male
Posts : 9
Points : 1026
Reputation : 0
Location : Paradise
Language : English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostLuke Spike on Fri 06 Feb 2015, 16:41

Does this work for PunBB too? If not can you give me the PunBB version code, many thanks. Smile
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 06 Feb 2015, 17:05

@Luke Spike wrote:Does this work for PunBB too? If not can you give me the PunBB version code, many thanks. Smile
At the moment this plugin is only for phpbb3. However, I will optimize it after the release of Database v1.02. Smile
avatar
brandon_g

Title :
Gender : Unspecified
Age : 20
Posts : 447
Points : 1691
Reputation : 63
Location : USA
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://broadcastingduo.forumotion.com

Postbrandon_g on Fri 06 Feb 2015, 17:13

I can not wait Smile
avatar
Ikerepc

Title :
Gender : Male
Age : 19
Posts : 170
Points : 1801
Reputation : 48
Location : Croatia
Language : English || Croatian
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://twitter.com/ikerepc

PostIkerepc on Fri 06 Feb 2015, 17:19

You will need to Smile

I will try it soon too Smile
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Fri 06 Feb 2015, 17:23

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... Smile
avatar
Ikerepc

Title :
Gender : Male
Age : 19
Posts : 170
Points : 1801
Reputation : 48
Location : Croatia
Language : English || Croatian
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile https://twitter.com/ikerepc

PostIkerepc on Fri 06 Feb 2015, 17:30

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 Smile
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Mon 16 Feb 2015, 14:15

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
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 16 Feb 2015, 15:29

Have you activated the reputation system ?
avatar
smejker

Title :
Maršal
Gender : Male
Posts : 28
Points : 1307
Reputation : 7
Location : Macedonia
Language : Macedonian, Serbo-Croatia
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

Postsmejker on Tue 17 Feb 2015, 03:49

This is nice...

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

Regards & Respect!

--------

If U asking, You'll have chanse to learning!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 17 Feb 2015, 04:40

@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. Smile
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 17 Feb 2015, 14:39

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 : 'معجب بالمشاركة'
  };
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 17 Feb 2015, 18:09

@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'));
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 18 Feb 2015, 02:33

Crying or Very sad 
nope
still the NaN appears
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 18 Feb 2015, 16:58

@Michael_vx wrote:Crying or Very sad 
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
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 18 Feb 2015, 18:27

Confused 
im a bit confused
but as long as you will look after it then ill wait i guess
you are super genius Very Happy
and im super dumb Very Happy
avatar
smejker

Title :
Maršal
Gender : Male
Posts : 28
Points : 1307
Reputation : 7
Location : Macedonia
Language : Macedonian, Serbo-Croatia
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : phpBB3
Awards :
View all awards
View user profile

Postsmejker on Thu 19 Feb 2015, 09:06

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!

--------

If U asking, You'll have chanse to learning!
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Thu 19 Feb 2015, 12:33

Suspect 
are you trying to burn the topic
Very Happy
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
cheers 
because im a dumb bull
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 19 Feb 2015, 16:35

@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;
}
avatar
Grow
New Member
Title :
Gender : Unspecified
Posts : 8
Points : 1111
Reputation : 2
Language : deutsch englisch
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile

PostGrow on Tue 03 Mar 2015, 09:20

And a new question Very Happy

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

For me its look better with an icon !
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Tue 03 Mar 2015, 13:39

im here again to see how is the progress about NaN problem because its still in the testing platform
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9585
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 04 Mar 2015, 00:24

@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.. Wink
avatar
Michael_vx

Title :
Gender : Male
Age : 25
Posts : 301
Points : 1743
Reputation : 75
Language : Arabic
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other
Awards :
View all awards
View user profile http://miccsoft.net https://www.facebook.com/Michaelvx2008

PostMichael_vx on Wed 04 Mar 2015, 13:42

im guessing your list is a bit long list Very Happy
at least you told me that you will
i can wait because i know coding is a ***** hard
Confused
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

Page 1 of 3 1, 2, 3  Next

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum