Product Center

Introducing the Mentions Feature for Open Social

A mention is a way of referencing or linking to another user profile from a post — continue reading
Posted by Bram ten Hove
February 1, 2017

A mention is a way of referencing or linking to another user profile from a post or comment. It’s also known as an @reply or tagging. Mentions are mainly used to get the attention of a specific user or to call attention to a specific user, for example by replying to their post or by tagging a user in a post (for example to say that “I was here with @OpenSocialHQ”).

But what is the difference between a reply and a mention? Twitter makes a very clear distinction:

A reply is a response to another user’s post that begins with the @username of the person you’re replying to. A mention is a post that contains another user’s @username anywhere in the body. (Yes, this means that replies are also considered mentions.)

The mentions feature became widely popular after Twitter launched it in 2006. Initially, Twitter didn’t support mentions, but at a certain point users started to use @ as a description for directing a public post to a specific user and Twitter built their mentions feature based on this development.

By the end of 2009, Facebook integrated the @ as a mentioning feature. Typing @ in a Facebook post automatically initiates a drop-down autocomplete list containing names of friends, groups and pages, which after being selected and published, link to the profile of whoever it is you mentioned.

Many other services and social platforms added the mentions feature, but even today there is still no standard that has been developed for mentioning a user in a post.

The Open Social mentions feature

Mentions have been available in Open Social since the beta9 release. You can check how our mentions work in this video:

All logged in users are able to mention other users. This functionality is implemented for posts and comments on both Topics and Events. Just type @ followed by (part of the) name or username of the person you want to mention and a list of maximum 8 names will appear in a drop-down from which you will be able to select the user you want to mention. Users who have been mentioned will receive a notification, both via email and on the platform itself.

How does the Open Social mentions feature work?

The architecture of the mentions feature consists of three main parts:

  • Back-end (DB storage)
  • Front-end (widget for text area with suggestions)
  • Mediator (code that connects Back and Front ends)

For the back-end we used a part of the mentions module by Mohan Gupta. This module isn’t finished yet, and has therefore not been released on drupal.org. That’s why we created our own fork of this module for the time being. Fortunately for us, it already provides a lot of the functionality that we were looking for, including:

  • Mentions entity
  • Different mention types
  • Text filter (ability to add mentions to any text area)
  • Customization of input and output settings

Mentions feature

Next, the front-end. Choosing a front-end library was actually the most difficult decision we had to make. There are a lot of different libraries and in the end we decided to go with jquery.mentionsInput. The reason we choose this library over all other options is that it’s lightweight but still covers all our needs completely. You can compare this library to others here.

We then created the Social Mentions module, which integrates the mentions module with the front-end library and Open Social. This module provides the route callback for autocomplete widget, defines new ProfileMention mention types, and adds new message templates. It also allows you to configure mention settings: autocomplete by username and/ or full name (by default we’ve decided to use both).

So what’s next for Open Social mentions?

We’re considering a few more improvements. In order to style a mention, we’ll need the technique to do so. The nature of a text area is that it can only contain plain text, just like other input elements in HTML. For the styling of a mentioned user, we will have to look for other HTML elements that allow for this.

A quick search shows us that the ‘contenteditable’ attribute allows both the changing of an element (user input) as well as styled output. Contenteditable is an attribute that can be placed on most elements, such as divs and spans.

The other thing we would like to improve is reply-to-reply usability and add a function to mention all group members or event participants. Stay tuned to see which mention features we implement next and happy mentioning!

Contribute to Open Social or Drupal

Would you like to contribute to Open Social and/ or to Drupal in general? Use the Open Social Documentation Guide as a starting point for Open Social by clicking the image below. If you to help Drupal grow, then you can find many different tips on Drupal.org.

Open Social Drupal

In this article we discuss

Related articles