The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Two little add-ons for Hashtags

4 posters

Go down

Two little add-ons for Hashtags Empty Two little add-ons for Hashtags

Post by Wecoc March 21st 2018, 5:54 am

This time I want to share two little add-ons for Hashtags.

Hashtag counter


The first one is for customizing a bit how hashtags are displayed.
With this you can a counter for how many times that hashtag has been used.
It's very basic but a nice addition in my opinion.

Two little add-ons for Hashtags Hashta10

In my example I also added some other effects, as you can see.

First, add this javascript.
Title: Hashtag Counter
Placement: In all the pages

Code:
$(function(){
  var hashtags = $('a[href*="/tags/"]');
  hashtags.filter(function(){
    var href = this.href;
    this.innerHTML = '<div class="hashtag-block"><div class="hashtag-link" style="display:inline-block">' + this.innerHTML + '</div></div>';
    var hashtag_link = this.firstChild;
    $.get(href, function(d){
      localStorage.hashtag_count = $('h1.page-title', d)[0].innerHTML.match(/\d+/)[0];
      return true;
    }).done(function(){
      var count = JSON.parse(localStorage.hashtag_count), div_count = document.createElement('DIV');
      $(div_count).addClass("hashtag-count");
      div_count.innerHTML = count;
      hashtag_link.append(div_count);
    })
  });
});

Spoiler:

Now it's time for CSS customization.

- Use
Code:
.hashtag-block
for the complete hashtag block
- Use
Code:
.hashtag-link
for the default link (tag) part
- Use
Code:
.hashtag-count
for the new count part

Here is the one I used for the screen I showed before:

Code:
/* Hashtag customization */

.hashtag-block {
  display: inline;
  padding: 0 4px;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;
  border-radius: 3px;
}

.hashtag-count {
  background-color: #333333;
  border-radius: 3px;
  color: #ffffff !important;
  display: inline-block;
  font-size: 1.1rem;
  margin-left: 4px;
  padding: 0 4px;
  line-height: 1.3rem;
}

Twitter Hashtags


Maybe your site is very Twitter-based and you want your hashtags to redirect to the Twitter search instead of the forum internal search.
That's what this little Javascript does. You can search for tags in your forum as always, but specifically clicking a tag will redirect you to the Twitter results.

Title: Twitter Hashtags
Placement: In all the pages

Code:
$(function(){
  var hashtags = $('a[href*="/tags/"]');
  hashtags.filter(function(){
    var name = this.href.match(/\/tags\/(.*)/)[1];
    this.href = "https://twitter.com/hashtag/" + name;
  });
});

Side note:
Wecoc
Wecoc
Forumember

Male Posts : 144
Reputation : 111
Language : Catalan, Spanish, English

SarkZKalie and TonnyKamper like this post

Back to top Go down

Two little add-ons for Hashtags Empty Re: Two little add-ons for Hashtags

Post by Ange Tuteur March 21st 2018, 4:25 pm

Auto-suggesting hashtags does sound like a nice addition, but I'm not sure it would be as easy as the Auto-mention plugin. Mentions was possible, because we have a page like /memberlist where we can perform a search for usernames. Say the user inputs the text "An", we can send an asynchronous request to https://help.forumotion.com/memberlist?username=an to fetch all users who begin with the letters "An". While we can search tags, the problem is it doesn't return a list of tags, but a list of posts that contain the tag.. (ex: tag) Think

It's still possible though. For example, you could just let the admin define a list of tags that are popular on the forum, like..
Code:
var tags = [
  'JavaScript',
  'HTML',
  'CSS',
  'PHP'
];
Faster than AJAX, but it has to be maintained by a human. Two little add-ons for Hashtags Whistle Feel free to play around with the auto-mention plugin if you're ever up for it. It uses a Faux textarea (except for WYSIWYG mode) to identify mentions and put them in the correct position.

Sorry for going on like that, I always end up writing a crap ton when people bring up ideas. Lol

Nice work on these plugins btw, KIU. Very good
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

TonnyKamper likes this post

Back to top Go down

Two little add-ons for Hashtags Empty Re: Two little add-ons for Hashtags

Post by SarkZKalie June 1st 2024, 6:43 am

To any AwesomeBB user who planning to add this tutorial to your site

Please search and replace in the first js code
Code:
$('h1.page-title', d)[0].innerHTML.match(/\d+/)[0];
by
Code:
$('.page-header h1', d)[0].innerHTML.match(/\d+/)[0];
Enjoy Twisted Evil


Two little add-ons for Hashtags Sarkzk10
SarkZKalie
SarkZKalie
Support Moderator
Support Moderator

Male Posts : 1443
Reputation : 220
Language : English

https://rotavn.forumotion.com/

skouliki and TonnyKamper like this post

Back to top Go down

Two little add-ons for Hashtags Empty Re: Two little add-ons for Hashtags

Post by TonnyKamper June 3rd 2024, 12:44 pm

Very nice addition  @Wecoc
TonnyKamper
TonnyKamper
Active Poster

Female Posts : 1094
Reputation : 80
Language : Dutch/English
Location : DSF Admin

http://www.nederlandheelt.nl/forum

SarkZKalie likes this post

Back to top Go down

Back to top

- Similar topics

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