1
BigKev73
Adding a LIke Feature to NEWBB
  • 2021/1/31 22:35

  • BigKev73

  • Just popping in

  • Posts: 13

  • Since: 2021/1/26


I was able to wire in a "Like" feature into the posts for NewBB. It shows a 'Thumbs' up icon if your a logged-in user and haven't liked that post yet. A 'thumbs down' icon if you already liked it, and want to un-like it. If your an anonymous user, then you don't see either.

If there are any likes, then it shows a count with a link to pop up a box that shows which users liked it.

It involves changes to Post.php, newbb_thread.tpl, and image.php, mostly to support adding the buttons to the $thread_action array.

Then there are 3 new small php files. like.php, unlink.php, and wholiked.php

Finally, there is a new table add called xoo_nebb_likes which has 4 cols; id, postID, UID, name

I'll share the changes with anyone interested. But I am sure there is a more elegant want to incorporate this. Especially the needs DB calls to make them more "core" to the post object. But since I build these changes for my own website, I tend to be more hardcoded in adding things.

Resized Image

2
heyula
Re: Adding a LIke Feature to NEWBB
  • 2021/2/1 5:29

  • heyula

  • Theme Designer

  • Posts: 596

  • Since: 2008/4/24


Nice plugin

I'd like to try when you share

Thanks

3
Mamba
Re: Adding a LIke Feature to NEWBB
  • 2021/2/1 11:35

  • Mamba

  • Moderator

  • Posts: 11409

  • Since: 2004/4/23


I'm happy to see some development being done on this.

This was my second module to work on, after finishing the work on Publisher. I'm still experimenting with it, and hopefully soon we'll have something generic, that could be easily ported to other modules. The one thing that still is open is the "Facebook Reactions", and then make it generic enough, so it works in other modules.

Take a look at the Publisher, and see if you can help, so it works for other modules too...
Support XOOPS => DONATE
Use 2.5.11 | Docs | Modules | Bugs

4
alain01
Re: Adding a LIke Feature to NEWBB
  • 2021/2/2 9:47

  • alain01

  • Just can't stay away

  • Posts: 536

  • Since: 2003/6/20


Hi BigKev73,

take a look to this tutorial (in French language): Integrate xmsocial's social media into its module

This tutorial was produced by Gmage.

5
alain01
Re: Adding a LIke Feature to NEWBB
  • 2021/2/2 9:52

  • alain01

  • Just can't stay away

  • Posts: 536

  • Since: 2003/6/20


If you want to see the result, you can test with existent modules.

Go to github to download the dev version for xmsocial and xmcontent for example.
https://github.com/GregMage.

If you get any problem, please write a feedback here.

6
BigKev73
Re: Adding a LIke Feature to NEWBB
  • 2021/2/3 14:54

  • BigKev73

  • Just popping in

  • Posts: 13

  • Since: 2021/1/26


Let me try to clean up the code a bit to make it a tad easier to reuse.

Currently, I hacked this into my website as proof of concept and it's just HTML/PHP. So the page refreshes and scrolls back to the post in question after a like/unlike is clicked. The proper way would be to do it with javascript so that a page refresh is not required.

Let me noodle on it, and then I will post the code.

7
BigKev73
Re: Adding a LIke Feature to NEWBB
  • 2021/2/5 1:05

  • BigKev73

  • Just popping in

  • Posts: 13

  • Since: 2021/1/26


Ok, I made some significant changes. Take a look at this screen shot:

Resized Image


Basically in the footer section of each post in NEWBB, you will see 6 different "Reaction" icons. If you're a logged-in user, you can choose one. It will only allow you to select one at a time. The selected one becomes larger to show that is the one you selected for that particular post. If you select the same one again the in un-selects it. Also, you see the Reaction count to the right change as you make a selection. Clicking on the count shows the pop-up that shows the reactions that have been set for that post. You can click on a user there and it will take you to their profile page.

If you are not logged in (an anonymous user) then it will still show the icons, but you cant select any of them aka they do nothing, But, they can still see the Reaction count and view the pop-up.

It appears to work great, I'll have my users play with it for a bit. I figured out how to splice it into NEWBB with only a few minor manual changes. I still need to write some code to create the DB table automatically.

I rewrote this to be agnostic. The DB table has an ID, a Module ID, an Item ID, UID, ReactID and a Date

This allows it to work for any module. In the case of NEWBB it sets it Module ID, and then the Item ID is the Post ID. The React ID is the code for the reaction 0 = Like, 6 = Hate, etc.

It uses a couple of new PHP Class files and a JS file that wires up all the Reaction buttons so no page refresh is required when a user makes a section. The buttons are wired to call into the JS file and pass ItemID and ReactID assigned to the button. The JS code then checks to see if any other reaction for the post from that user was already chosen. If so, it resets it and updated the DB via a call to a PHP page that handles that. The JS code then takes care of updating the page buttons and react count as appropriately, without having the refresh the page. Once this is wired into NEWBB with the few minor changes, it should be possible to add more reaction choices without any further code changes in NEWBB as really new thinks it's only adding a single button. But it really injects an HTML form with all the buttons that are part of it. So from that standpoint, it's extendable. Also, the same thing should work for just about any other module as well.

I'm going to let my users beat it up for a few days which I get the DB Table creation code written, then I'll post some files and instructions on how to wire it up.

8
BigKev73
Re: Adding a LIke Feature to NEWBB
  • 2021/2/5 18:35

  • BigKev73

  • Just popping in

  • Posts: 13

  • Since: 2021/1/26


Ok here is the DL link for the Reaction Plug and here are the instructions for installing it (also included in the zip file). Please read through the entire thing before starting. I think its a pretty easy add and i've tested it on my website which is running :

XOOPS Version XOOPS 2.5.11-Beta1
PHP Version 7.4.14
mySQL Version 5.5.68-MariaDB

That being said, use at your own risk and peril.

ReactionPlugin Download



Instructions for installing the Reactions Plug-In:

These instructions are for installing into NEWBB, but the premise and file locations should be similar for each module. Please adapt as you see fit and test this on a non-production website before deploying.

Copy this entire directory to the root of the /modules/newbb folder

So it the files should end up in the following locations:

/modules/newbb/Reaction.php
/modules/newbb/class/ReactionDBCreator.php
/modules/newbb/class/ReactionEntry.php
/modules/newbb/class/ReactionUsers.php
/modules/newbb/class/ReactUpdate.php
/modules/newbb/class/ReactionEntryHandler.php
/modules/newbb/class/ReactionInfo.php
/modules/newbb/include/AddReact.js
/modules/newbb/images/Like.png
/modules/newbb/images/Love.png
/modules/newbb/images/Hug.png
/modules/newbb/images/Laugh.png
/modules/newbb/images/Wow.png
/modules/newbb/images/Sad.png
/modules/newbb/images/Hate.png

You can modify the ReactionInfo.php file to add additional reaction or remove ones you don't want by modifying the define("ReactionNames", array("Like","Love","Hug","Laugh","Wow","Sad","Hate")); constant. The names much match the base names in the images folder.

You can change the DB Table name by modifying the define("ReactionTableName", "reaction_entry");
The table prefix is automatically added. Only 1 table is needed regardless of how many modules may be using it. So this is why the table name does not include a module name.

Once you have the DB Table name how you want it, run the /modules/newbb/class/ReactionDBCreator.php to create the table. This only had to be done once. You can delete this file afterward if you wish. But it checks if the table already exists and bails out if it does. So there is no danger to leaving it.


We need to manually modify 2 of the newbb files to support this. Please backup your files in the event you need to roll back or want to remove this plugin.


Modifications needed to NEWBB files:


In file: /modules/newbb/include/images.php , around 46 change it from:

$forumImage['previous'] = $forumImage['next'] = $forumImage['right'] = $forumImage['down'] = $forumImage['up'] = $forumImage['printer'] =  $forumImage['new_forum'] =


To:

$forumImage['previous'] = $forumImage['next'] = $forumImage['right'] = $forumImage['down'] = $forumImage['up'] = $forumImage['printer'] = $forumImage['react'] =  $forumImage['new_forum'] =


Make sure the = (equal) signs are present above at the end of the line.



In file: /modules/newbb/class/Post.php ,around line 648 insert the following line:

//Added to support Reaction    
    
include_once($GLOBALS['xoops']->path('modules/newbb/Reaction.php'));
    
$thread_action['react']['text'] =  BuildButtonsForm($post_id);


So when done it should look something like the following.

if ($topicHandler->getPermission($forum_id$topic_status'print')) {
            
$thread_action['print']['image']  = newbbDisplayImage('printer'_MD_NEWBB_PRINT);
            
$thread_action['print']['link']   = XOOPS_URL '/modules/newbb/print.php?form=2&forum=' $forum_id '&topic_id=' $topic_id;
            
$thread_action['print']['name']   = _MD_NEWBB_PRINT;
            
$thread_action['print']['target'] = '_blank';
  }

 
//Added to support Reaction
 
include_once($GLOBALS['xoops']->path('modules/newbb/Reaction.php'));
 
$thread_action['react']['text'] =  BuildButtonsForm($post_id);
            
 if (
$GLOBALS['xoopsModuleConfig']['show_sociallinks']) {
            
$full_title  $this->getVar('subject');
            
$clean_title preg_replace('/[^A-Za-z0-9-]+/''+'$this->getVar('subject'));


Basically, we are inserting it on the post footer between the print button and the social links. But if you wanted to move it, you could.

And that should be it. Once this is all in place, you should see the row of reaction icons at the bottom of each post when viewing a thread. Anytime a post has a reaction to it, it will show a (#) after the row icons to show how many reactions it has. Click on that opens a pop-up that shows what users reacted to it and how they reacted.

If you are a logged-in user, you can click any of the Icon to set your reaction to a post. That icon should show about 1/3rd larger to denote that if your reaction to it. If click another reaction on the same post, then it will reset to the new one. If you select the denoted icon, remove your reaction. You can only have 1 reaction to a single post.

If you look at the code added to the Post.php, the call to BuildButtonsForm does all the work for building the icons. You pass in the PostID that is how it knows what post you are on and uses that to store the value in the database.

So this can easily be added to another module. The code automatically detects what module it is installed under and uses that module's ID when storing reactions in the database. so only one table is needed regardless of the number of modules using it.

Hope this is helpful

-BigKev73

9
BigKev73
Re: Adding a LIke Feature to NEWBB
  • 2021/2/5 21:17

  • BigKev73

  • Just popping in

  • Posts: 13

  • Since: 2021/1/26


I've updated the zip file. I found a minor issue in the ReactionUsers.php where the image links were not correct in the "users popup", after some late changes I made. That has now been corrected. Thanks!

10
BigKev73
Re: Adding a LIke Feature to NEWBB
  • 2021/2/6 4:26

  • BigKev73

  • Just popping in

  • Posts: 13

  • Since: 2021/1/26


Curious to hear any feedback on this if you are able to test.

Thanks!

Login

Who's Online

373 user(s) are online (242 user(s) are browsing Support Forums)


Members: 0


Guests: 373


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Nov 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits