Hashtags on forum

Hello. Does anyone know how to add hashtags on my forum? I always wanted to add hashtags on my forum

Forum Version: PunBB

Thanks!

Hi

Try reading through these:

1. http://www.avacweb.com/t1026-hashtag-system?highlight=hashtag
2. http://www.avacweb.com/t1156-hashtag-system-for-punbb?highlight=hashtag

Regards,
Pizza Boi

I checked both of them but none works.

Εdit: Do you know what codes i must use. Because there, they have a million codes and i got confused. Thanks

Hi

You can actually use these:

#1

Code:

$(function() {
var a = $('.post').get();
for (i=0; i<a.length; i++) a[i].innerHTML = a[i].innerHTML.replace(/#(.*?)\s/g, '#<a href="/search?search_keywords=$1" target="_blank">$1</a>');
});

#2

Code:

$(function() {
var a = $('.post').get();
for (i=0; i<a.length; i++) a[i].innerHTML = a[i].innerHTML.replace(/#(.*)\s/g, '#<a href="/search?search_keywords=$1" target="_blank">$1</a>');
});

And

#test blah blah blah /* Has to be modified properly as in a string or whatever */

Important: You have to change the codes to punBB version please.

Regards,
Pizza Boi

So i have to add both codes?

Hi

You can just choose between the 2. The second one was modified for the poster so it would look okay. See the 'And' there? After that is a CSS code, you have to modify that portion in the CSS so it can be styled properly. I just forgot to divide it .-.

Regards,
Pizza Boi

I entered the first one but it doesn't work. Instead it makes all the links in my forum with some codes behind them...

Hi

Hmm... cuz the selector's .post. So far, this the best I can produce:

Code:

$(function () {
    for (var a = $('.pun .entry-content'), i = 0, l = a.length; i < l; i++) {
        for (var b = a[i].getElementsByTagName('code'), c = 0, d = b.length; c < d; c++) b[c].innerHTML = b[c].innerHTML.replace(/#/g, '#');
        a[i].innerHTML = a[i].innerHTML.replace(/#(.*?)\s/g, '#<a href="/search?search_keywords=$1" target="_blank">$1</a> ');
    }
});

That was a revision from Dom's code including bypassing the [.code] tags. It already has the pun content there already and I attempted to change $1 but apparently, that symbolizes (.*?) which is for the hash tag. Removing _blank removes the link text as well.

The main problem I was not able to fix is the class="clear" thing. Try rummaging through these:

1. http://www.avacweb.com/t1026p75-hashtag-system?highlight=hashtag
2. http://www.avacweb.com/t428-13-create-new-bbcodes-with-new-lgbb#6591

I'm still working on the code and that's what I got so far.

Regards,
Pizza Boi

Hi dear all,
I have tried these codes too, but I dont understand how can I make them to work. I think something is going wrong in the js. Lets see someone can help us to fix it.

Regards,
Dark-Avenger

The LGBB that LGForum provided are for the BBcodes and not for the tags. I entered all the codes they told us to but it doesn't work.

Hi

I tried removing g and replaced it with w but it doesn't seem to work '-' ... there really is a bit of a bug in the script because it appears as a <div <a>> stuff type for me. Try removing the < and > in the ahref tag and see if it works because as of now, I'm asking AvacWeb for the answer.

Regards,
Pizza Boi

Look if someone knows some tutorial that works with "easier" steps please let me know! I am so into these hashtags! Thank you!

bump

Hello all,
Try this script:

Code:


$(function() {
        var a = $('.post-entry .entry-content div'); // For post content of punBB forums
        for (var i = 0; i < a.length; i++) {
          a[i].innerHTML = a[i].innerHTML.replace(/#(\w*)/g, "<a href='/search?search_keywords=$1' target='_blank' class='hashtag'>#$1</a>");
        };
        });


Best Regards,
Dark-Avenger

Solved

I think its not solved there are some problems in this script because when it is enabled the image resizer is not working and the tables are not show in the posts. Marios leave it open because someone can help us to fix these issues.

Best Regards,
Dark-Avenger

You can use this and all images are like old times!

Code:

.postbody img {max-width:500px;
  max-height:200px;
}

Edit: this code makes all the colors different to my forum.

Dark-Avenger wrote:I think its not solved :(there are some problems in this script because when it is enabled the image resizer is not working and the tables are not show in the posts. Marios leave it open because someone can help us to fix these issues.

Best Regards,
Dark-Avenger

It is because the script replaces the post HTML after the images have been resized. Instead of relying on jQuery to run the function, you could try setting your own interval to do that for you.

Placement should be in the topics only.

Code:

var check = setInterval('postReady()',100);
function postReady() {
    if ($('.entry-content').length) {
        window.clearInterval(check);
        hashTags();
    }
}

function hashTags() {
    var a = $('.post-entry .entry-content div');
    for (var i = 0; i < a.length; i++) {
       a[i].innerHTML = a[i].innerHTML.replace(/#(\w*)/g, "<a href='/search?search_keywords=$1' target='_blank' class='hashtag'>#$1</a>");
    };
}

Ange Tuteur wrote:

Dark-Avenger wrote:I think its not solved :(there are some problems in this script because when it is enabled the image resizer is not working and the tables are not show in the posts. Marios leave it open because someone can help us to fix these issues.

Best Regards,
Dark-Avenger

It is because the script replaces the post HTML after the images have been resized. Instead of relying on jQuery to run the function, you could try setting your own interval to do that for you.

Placement should be in the topics only.

Code:

var check = setInterval('postReady()',100);
function postReady() {
    if ($('.entry-content').length) {
        window.clearInterval(check);
        hashTags();
    }
}

function hashTags() {
    var a = $('.post-entry .entry-content div');
    for (var i = 0; i < a.length; i++) {
       a[i].innerHTML = a[i].innerHTML.replace(/#(\w*)/g, "<a href='/search?search_keywords=$1' target='_blank' class='hashtag'>#$1</a>");
    };
}

Hi Ange,
First of all the image resizing has been fixed successfull. I have substitute the JS with yours but I am still facing problem when I am adding this kind of table

Code:


[table style="background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png') no-repeat 6px #effeb9; border: 1px solid #9ac601; color: #4F8A10; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

in the posts the table loosing the format due hashtags script like this http://prntscr.com/3ad614 , is there a way to keep the format of the table and the hashtags script?

With Best Regards,
Dark-Avenger

Dark-Avenger wrote:Hi Ange,
First of all the image resizing has been fixed successfull. I have substitute the JS with yours but I am still facing problem when I am adding this kind of table

Code:


[table style="background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png') no-repeat 6px #effeb9; border: 1px solid #9ac601; color: #4F8A10; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

in the posts the table loosing the format due hashtags script like this http://prntscr.com/3ad614 , is there a way to keep the format of the table and the hashtags script?

With Best Regards,
Dark-Avenger

Ηello Dark Avenger,
Did you try changing the code a bit? At first i see a box shadow that places "inset| which should be like "outset". Also, by trying the codes, did not face any problem with those but instead i had problems with the colors. It made all my colors blue and red.

Hi Marios,
I have substitute the inset with outset but the problem still remains

Code:


[table style="background: url('http://cdn3.iconfinder.com/data/icons/fatcow/32x32_0020/accept.png') no-repeat 6px #effeb9; border: 1px solid #9ac601; color: #4F8A10; padding: 6px 6px 6px 40px; width: 99%; text-shadow: 0 1px 0 #FFFAF1; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) outset; font-weight: bold; border-radius: 3px 3px 3px 3px;"][tr][td]Content goes here...Content goes here...Content goes here...Content goes here...Content goes here...Content goes here... [/td][/tr][/table]

Is correct the above code?

The problem is that the code replaces anything that is followed by a hash. So if you're using hex that will be turned into a link. So codes with id's, colors, ect.. that use a hash will be replaced.

Hi Ange,
Is there a way to fix it?

I would have to think on that. You would most likely have to work on rewriting the regexp, but I'm not really sure right now.

Hi all,
Ange how can I handle the regexp to fix the colors?

just reminding!

bump

what is hashtag btw?!!

The hashtags is the system that someone can simply write
#tutorial
and automatically this system will make the word tutorial a link where whoever presses it sees all the posts in the forum that contain the word. (something like Facebook)

Hi

@OP: Install LGBB and just use the hashtag code.

Regards,
Pizza Boi