If you're doing software development these days, more often than not you would be working on a social application of some kind. Engaging user interaction, communication and sharing of content is pretty much what made the Internet become what we're seeing now.

In this quick post I'll share with you some tips, snippets, pointers or links on how to add some of the most common social features to your web application.

Emojis

Emojis and smileys are pretty common on almost every app on Earth that supports user-submitted content. It's also a mobile-focused matter, while it has gradually come to the web sometimes it's not clear what's the best approach to have them in our web apps. Luckily, EmojiOne, comes to the rescue, not only supporting Unicode and images, they even include the :short: smiley format common in applications such as Slack, and automatic character-to-emoji conversion (when you type ;) you'd get 😉).

Let's take a look at an example on how easy is to use this library:

import emojione from "emojione";
import "emojione/assets/css/emojione.css!";

emojione.ascii = true;

export function toEmoji(text) {
  return emojione.shortnameToUnicode(emojione.toShort(text));
}

export function fromEmoji(text) {
  return emojione.toImage(text);
}

Rich Links

Many apps add contextual information to links that have been detected within a section of text. To achieve this, first we would need to identify links from plaintext. This is where Autolinker.js comes handy, not only relieving us from doing crazy regular expression parsing, but also supporting mentions among other features.

For parsing the link itself, we can leverage a service called Embed.ly that will replace a link with a contextual "card".

In combination, all of it could look like this:

By using one of autolinker's advanced features, the ability to override the replacement function (what turns text into an anchor tag) we can leverage Embed.ly as well:

// ...
import Autolinker from "autolinker";

function richLinks(autolinker, match) {
  if (match.getType() === "url") {
    const tag = autolinker.getTagBuilder().build(match);
    tag.setAttr("data-card-controls", false);
    tag.setAttr("data-card-chrome", false);
    tag.addClass("card");

    setTimeout(() => {
      embedly("card", ".card");
    }, 0);

    return tag;
  }
}

export function linkify(text) {
  if (!ENABLE_LINKS) {
    return text;
  }

  const linkerOptions = { twitter: false };

  if (ENABLE_RICH_LINKS) {
    linkerOptions.replaceFn = richLinks.bind(this);
  }

  return Autolinker.link(text, linkerOptions);
}

Friendly timestamps

For human-friendly timestamps, I think the community has settled around MomentJS, a fantastic Javascript library for date manipulation, parsing and display. Here's an example on how we would use it to display dates in "timeago" format:

import "moment";

export const momentConfig = {
  sameDay: "[Today]",
  nextDay: "[Tomorrow]",
  nextWeek: "dddd",
  lastDay: "[Yesterday]",
  lastWeek: "[Last] dddd"
};

export function getFormattedDate(timestamp, unix = true) {
  return getDate(timestamp, unix).calendar(null, momentConfig);
}

export function getFormattedTime(timestamp) {
  return getDate(timestamp, true).format("LT");
}

export function asTimeAgo(timestamp, unix) {
  return getDate(timestamp, unix).fromNow();
}

function getDate(timestamp, unix) {
  return unix ? moment.unix(timestamp) : moment(timestamp);
}

Authentication and Social Sign-In

For authentication purposes, and allowing your users to login using other social applications, such as Twitter, Facebook, etc. there's a great service in Auth0, that simplifies the handling of OAuth and even providing custom authentication.

Social Sharing

AddThis seems to be one of the leaders when it comes to providing sharing features with programatic access, although I'd love to hear more suggestions on this particular topic.

Conclusion

These are among those of the social features I think you could benefit from if your domain and the project you're working on demands. Let me know in the comments below if you can think of other social features worth adding.