Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 22nd 2011, 3:16pm
In Example 4, I demonstrated how easy it was to change the ugly-looking +/- characters to images on the vote/reputation bar. This tutorial takes Example 4 to another level! Instead of an ugly "vote bar" inside the post content, you will now have a professional-looking "like/dislike bar" in the post header that is similar to what is found on sites like Yahoo.

Please note that this tutorial is only for phpBB3 and IPB2/Invision boards. It can be done in PunBB but will require significant modification of the viewtopic_body template as well as an additional script. In the very near future, I will post the procedure as a reply to this topic. As for the piece of garbage otherwise known as phpBB2, I wouldn't know whether it works or not because I refuse to look through garbage. :P

To install this new feature, make sure you have the Reputation system activated. ACP>Modules>Reputation, set "Activate Reputation System" to Yes, and click Save. Then create a javascript file and select the "In all the pages" option. Paste the board-specific script from this tutorial, and make sure to change the URLs of the images to the images you want to use. Finally, if you do not want the CSS in the script, remove that line from the script and add the CSS rule(s) to your system CSS. The CSS will need modification if you're using images larger than 16 pixels in height, or if your post area uses a dark background.

Here is the script for phpBB3 boards:

var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
$('#main-content').prepend('<style type="text/css">ul.profile-icons li.ddvote{height:20px;line-height:20px;background:#fff;color:#000;border:1px solid #a0b0c0;font-size:12px;font-weight:bold}ul.profile-icons li.ddvote a{display:inline}.postbody ul.profile-icons li.ddvote img{cursor:default;vertical-align:middle}.postbody ul.profile-icons li.ddvote a img{cursor:pointer}</style>');
var x=$('.vote').get();
for (i=x.length-1; i>=0; i--) {
var plus='0';
var minus='0';

var vplus='<img style="position:relative;top:-3px;margin-right:3px" title="Like" src="URL for your +/Like image goes here" />';
var vminus='<img style="margin:0px 3px 0px 10px" title="Dislike" src="URL for your -/Dislike image goes here" />';

var y=$(x[i]).find('.vote-button a').get();
for (j=0; j<y.length; j++) {
if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
else if (y[j].innerHTML=='-') {vminus='<a href="'+y[j].href+'">'+vminus+'</a>';}
}
var y=$(x[i]).find('.vote-bar')[0];
if (y) {
var z=y.title.split(' ');
var pct=parseInt(z[3].replace(/%/,''))/100;
var num=parseInt(z[4].replace(/\(/,''));
plus=String(Math.round(num*pct));
minus=String(num-plus);
}
if (x[i].parentNode.parentNode.parentNode.className=='module row1') {
$(x[i].parentNode).find('.profile-icons').prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
$(x[i].parentNode).find('.h3').css('border','none');
}
else {
$(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
}
x[i].parentNode.removeChild(x[i]);
}
});

And here is the script for IPB2/Invision boards:

var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
$(function() {
$('#main-content').prepend('<style type="text/css">ul.post-info li.ddvote{height:20px;line-height:20px;background:#fff;color:#000;border:1px solid #a0b0c0;font-size:12px;font-weight:bold;}</style>');
var x=$('.vote').get();
for (i=x.length-1; i>=0; i--) {
var plus='0';
var minus='0';

var vplus='<img style="position:relative;top:-3px;margin-right:3px" title="Like" src="URL for your +/Like image goes here" />';
var vminus='<img style="margin:0px 3px 0px 10px" title="Dislike" src="URL for your -/Dislike image goes here" />';

var y=$(x[i]).find('.vote-button a').get();
for (j=0; j<y.length; j++) {
if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
else if (y[j].innerHTML=='-') {vminus='<a href="'+y[j].href+'">'+vminus+'</a>';}
}
var y=$(x[i]).find('.vote-bar')[0];
if (y) {
var z=y.title.split(' ');
var pct=parseInt(z[3].replace(/%/,''))/100;
var num=parseInt(z[4].replace(/\(/,''));
plus=String(Math.round(num*pct));
minus=String(num-plus);
}
$(x[i].parentNode.previousSibling.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
x[i].parentNode.removeChild(x[i]);
}
});

Make sure to add your images in the "URL for your XXXXXX image goes here" placeholders. That's it! Enjoy your new like/dislike bar!
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 22nd 2011, 11:28pm
This example for PunBB is provided AS-IS. If you need help installing it, please find someone who can do it for you. I will provide NO assistance.
____________________________________________

Here is the procedure for installing Example 10 on a PunBB board. First, go to the viewtopic_body template and add the following code to the very bottom:

<style type="text/css">div.ddvote{float:right;margin-left: 20px; height:20px;line-height:20px;background:#ffffff;border:1px solid #a0b0c0;font-size:12px;font-weight:bold;}</style>
<script type="text/javascript">
//<![CDATA[
var CopyrightNotice = 'Professional like/dislike bar for forumotion IPB2/Invision boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use and/or modification of this script is allowed, provided this entire copyright notice remains in the original or modified script. Distribution is not allowed without written consent from Dion Designs.';
var x=$('.vote').get();
for (i=x.length-1; i>=0; i--) {
var plus='0';
var minus='0';

/***************************************************

I thought people would be smart enough to remove the line below when they
replaced the URLs. I was wrong. So I'll make it clear.

REMOVE THIS BLOCK OF TEXT WHEN YOU REPLACE THE URLs.

// add your images in the next two lines

***************************************************/

var vplus='<img style="margin-right:3px" title="Like" src="URL for your +/Like image goes here" />';
var vminus='<img style="position:relative;top:-2px;margin:0px 3px 0px 10px" title="Dislike" src="URL for your -/Dislike image goes here" />';

var y=$(x[i]).find('.vote-button a').get();
for (j=0; j<y.length; j++) {
if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
else if (y[j].innerHTML=='-') {vminus='<a href="'+y[j].href+'">'+vminus+'</a>';}
}
var y=$(x[i]).find('.vote-bar')[0];
if (y) {
var z=y.title.split(' ');
var pct=parseInt(z[3].replace(/%/,''))/100;
var num=parseInt(z[4].replace(/\(/,''));
plus=String(Math.round(num*pct));
minus=String(num-plus);
}
$(x[i]).replaceWith('<div class="ddvote"> ' + vplus + plus + vminus + minus + ' <div>');
}
//]]>
</script>

Make sure to add the URLs for your like/dislike images. Now find the vote block in the template:

<!-- BEGIN switch_vote_active -->
<div class="vote gensmall">
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
<!-- END switch_vote -->
<!-- BEGIN switch_bar -->
<div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
<!-- BEGIN switch_vote_plus -->
<div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
<!-- END switch_vote_plus -->
<!-- BEGIN switch_vote_minus -->
<div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
<!-- END switch_vote_minus -->
</div>
<!-- END switch_bar -->
<!-- BEGIN switch_no_bar -->
<div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
<!-- END switch_no_bar -->
<!-- BEGIN switch_vote -->
<div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
<!-- END switch_vote -->
</div>
<!-- END switch_vote_active -->

Delete the entire vote block from the template. You will be using the code in the above CODE block in a moment to replace the vote block you just deleted, so don't worry! Now find this line in the template:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead"{postrow.displayed.THANK_BGCOLOR}>

and replace it with this:

<div id="p{postrow.displayed.U_POST_ID}" class="posthead clearfix"{postrow.displayed.THANK_BGCOLOR}>

Finally, paste the vote block that I provided in the CODE block above, immediately below this replaced line. Save the template, then click the "+" icon to publish the template.

That's it! A lot more difficult than on phpBB3 or Invision boards, but that's what happens with an inferior board. ;)
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 7:42am
Wow, great, i think its most forumotions members dream haha!

Haha you proper rip it out of phpbb2... love it! lol
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 12:24pm
Thanks for joining!

You tried to put the code in your CSS, and it doesn't belong there. If your board is phpBB3 or IPB2/Invision, you need to create a Javascript File by going to your Admin Control Panel, and clicking Modules, then Javascript Files Management. Then follow the instructions in the first post. If your board is PunBB, then use ACP>Display, click General under the templates heading, and click the "gear" icon to modify the viewtopic_body template. You would then follow the instructions in the second post in this topic.

You can find all sorts of "Like" images by doing a Google Image search with the term "facebook like icon". I hope this helps!

EDIT: This was a reply to a post from "JDC", who apparently deleted their post.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 12:38pm
Great! I will work on it and update you on my status.

*I deleted my post because I thought I was mistaken :P*
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 12:55pm
If you remove the parentheses in the two IMG tags where you entered the images, the script will work. The SRC attribute in the IMG tags should look like this:

src="http://upload.wikimedia.org/wikipedia/commons/b/b1/Not_facebook_not_like_thumbs_down.png"

not this:

src="(http://upload.wikimedia.org/wikipedia/commons/b/b1/Not_facebook_not_like_thumbs_down.png)"

I can see how this happened, and I will edit the tutorial to remove the parentheses.

EDIT: I looked on your board, and it appears as though you didn't paste the entire script from here. Please make sure to take the entire phpBB3 script, and add your image URLs following the instructions in this post.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
1
#7
Example 10: A professional-looking like/dislike bar! (phpBB3
Posted July 24th 2011, 2:00pm
Beautiful. My problem is solved. Thanks a million!

Image
φ
Posts: 122
Joined: July 23rd 2011, 11:00pm
Likes Received: 1
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 2:21pm
Does this code need acompanied with the code from example 4?
or is it complete on its own?

Becuase it still isn't working with me. I have copied this code in to a new javascript, removed the brackets and added my image urls. I have activated the reputation, but all i see is the rubbishy + and - sign of forumotions.

Any tips or suggestions?
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 2:27pm
All that's needed is in either the first or second post in this topic.

I don't know if there's a problem with cut/paste in this forum, but two people have had problems with losing the last two characters of the phpBB3 and Invision scripts. If your board is one of those two types, make sure the last line in your script is:

});

Otherwise, if you provide a URL to your forum, I'll check to see whether the script is properly installed.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 2:35pm
My board is phpbb3, and it hadn't copied the little bit you mentioned.

after adding that in however im still only seeing the + and -

My site is www.leopardgeckoforum.com
let me know if you need to have a look in the admin panel.

PS reputatio system has been deactivated just for now, since i dont want members playing with it lol. But if you need me to activate for you to have a look i will obviously.

Thanks for your help.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3
Posted July 24th 2011, 3:34pm
OK, I just looked at your forum, and you don't have the full script. It is getting cut off at the point of the images being defined. Try using this script instead:

var CopyrightNotice = 'Professional like/dislike bar for forumotion phpBB3 boards. Copyright © 2011 by Dion Designs. All Rights Reserved. Use, modification, and/or distribution of this script is allowed, provided this entire copyright notice remains in the original, copied, or modified script.';
$(function() {
$('#main-content').prepend('<style type="text/css">ul.profile-icons li.ddvote{height:20px;line-height:20px;background:#ffffff;border:1px solid #a0b0c0;font-size:12px;font-weight:bold}ul.profile-icons li.ddvote a{display:inline}.postbody ul.profile-icons li.ddvote img{cursor:default;vertical-align:middle}.postbody ul.profile-icons li.ddvote a img{cursor:pointer}</style>');
var x=$('.vote').get();
for (i=x.length-1; i>=0; i--) {
var plus='0';
var minus='0';

var vplus='<img style="position:relative;top:-3px;margin-right:3px" title="Like" src="URL for your +/Like image goes here" />';
var vminus='<img style="margin:0px 3px 0px 10px" title="Dislike" src="URL for your -/Dislike image goes here" />';

var y=$(x[i]).find('.vote-button a').get();
for (j=0; j<y.length; j++) {
if (y[j].innerHTML=='+') {vplus='<a href="'+y[j].href+'">'+vplus+'</a>';}
else if (y[j].innerHTML=='-') {vminus='<a href="'+y[j].href+'">'+vminus+'</a>';}
}
var y=$(x[i]).find('.vote-bar')[0];
if (y) {
var z=y.title.split(' ');
var pct=parseInt(z[3].replace(/%/,''))/100;
var num=parseInt(z[4].replace(/\(/,''));
plus=String(Math.round(num*pct));
minus=String(num-plus);
}
$(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');
x[i].parentNode.removeChild(x[i]);
}
});

Make sure to add the URLs for your images.

The only difference between this script and the one in the first post is that I removed the comment line to insert the image URLs. There are bugs in the Javascript Files feature, and who knows, maybe we just found another one...
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 3:52pm
That seems to have worked thankfully :)

its odd how the scripts seem to be cut off... ah well its only natural for forumotion updates to come with bugs.

Thanks a lot for your help and the addition of a great feature.

I feel like i've mooched off of you, and wish i could give something back.. but .. there's not much i can give :P
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 4:08pm
"bugs" and "forumotion" seem to go hand-in-hand. :P I have removed the comment lines from the two scripts because I do believe this is yet another bug in the Javascript Files feature.

There is indeed something you can give back! Look closely at all the scripts here, ask questions, and in the process, learn to write scripts on your own.

That is the reason I created this board -- to teach people to write their own scripts. In that way, people might be able to solve their own problems as opposed to always looking for "code" they can paste into their board.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 24th 2011, 5:52pm
I have to admit, i have learnt quite a bit already to be honest.

Not enough to be able to write my scripts fully, not nearly that much. But this board has definitely helped me understand a lot of things.
And those links you posted in a thread about where to learn javascript are helping out too!

I'll definitely be around this place and using it to gain a better understanding.

and i thank you for that. :)
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3
Posted July 27th 2011, 7:39am
So say i wanted to turn this into just a 'Like' system. So getting rid of the negative vote.

There is this CSS for that
.vote .vote-button, .vote-no-bar {
display:none;
}
.vote .vote-button:first-child {
display:block;
}


But i mean, that wouldn't change it at all really would it, with this script in place, it would all still look the same.

So i mean obviously i could just delete all the variables that refer to minus/dislike/negative vote, but im kinda scared of just hacking away at the script haha.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3
Posted July 27th 2011, 10:48am
To remove the dislikes, all you need to do is change this line in the script:

$(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + vminus + minus + ' <li>');

to this:

$(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + ' <li>');
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 27th 2011, 1:52pm
Thanks :)

so the various variables can just stay in?

This '.propend()' bit, is this similar to a document.writeln() and basicaly what you've done above is not included the variables to do with negative/dilike in this?
Am i right?

All the information in terms of votes, where is it stored? I mean i knows it stored in a database and an SQL we won't have access to, but is there anyway to sort of retrieve this information?
and so thus create some sort of list, sort of like a recent topic list, but 'Recent Likes' list? Or is that beyond the realms of a free forum?
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3
Posted July 27th 2011, 2:24pm
This line:

$(x[i].parentNode.childNodes[0]).prepend('<li class="ddvote"> ' + vplus + plus + ' <li>');

is identical in function to this line:

x[i].parentNode.childNodes[0].innerHTML='<li class="ddvote"> ' + vplus + plus + ' <li>'+x[i].parentNode.childNodes[0].innerHTML;

The only similarity to document.write() is that both techniques use variables. And you are correct, all I did was remove the dislike variables from the above line of code.

A "recent likes list" is beyond the realms of any forumotion forum. That would require a detailed PHP script, and there is no PHP access on forumotion -- or on any other free forum host.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 27th 2011, 4:59pm
Okay thanks for the clarification.

I also own a forum which is actual phpbb, not a free forum host. So i have access to the DB's and php scripts and what not, do you reckon there is anyway that can be used to my advantage on my forumotion forum?

In terms of the subject we are on, of course.
φ
Posts: 509
Joined: July 9th 2011, 11:00pm
Location: England
Likes Given: 15
Likes Received: 26
Example 10: A professional-looking like/dislike bar! (phpBB3/Invision/PunBB)
Posted July 27th 2011, 5:16pm
Jordan said:
I also own a forum which is actual phpbb, not a free forum host. So i have access to the DB's and php scripts and what not, do you reckon there is anyway that can be used to my advantage on my forumotion forum?

You could write a PHP script that accepts form data from your forumotion forum, save the data in a database, and make the data available to your forumotion forum through a second PHP script. Matter of fact, there's a tutorial on Zetaboards (competitor of forumotion) for setting up an offsite like/dislike system, but it would require extensive modifications due to the differences between the two services. However, it's MUCH better than starting from scratch.
φ
Posts: 1599
Joined: March 12th 2009, 11:00pm
Location: Uncertain due to momentum
Likes Given: 26
Likes Received: 357

Who is online

Users browsing this forum: No registered users and 0 guests