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

2 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

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 : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

Back to top


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