Add Tweetable Links in Your Content with InlineTweet.js

By Jake Rocheleau. in Toolkit. Updated on November 24, 2017.

You’ll see this feature a lot on big sites such as TechCrunch and Mashable. You’ll be reading an article and notice that an entire sentence is highlighted like a link.

Yet, when you click it’ll open a tweet window asking you to share that text snippet with your Twitter followers. It’s a great way to drive traffic to your site and encourage more social shares.

To replicate this effect on your site, try InlineTweet.js. It can save you hours of setup time by adding this functionality right to your page.

This free JavaScript plugin is super easy to install and it even has a free WordPress plugin if you prefer that route.

It does not require any JavaScript dependencies, so you can run this sans-jQuery.

All content works directly through data attributes, so you would set these up one-by-one, based on your content. Naturally, the WordPress plugin makes this a lot easier, so if you prefer having more control this is a great option.

On the main script page, you’ll find a few code snippets demonstrating how this works.

You just need to include the JS script into your page and copy some CSS into your stylesheet (only 3 blocks). From there, you can append HTML codes like this:

<span data-inline-tweet
      data-inline-tweet-via="ireaderinokun"
      data-inline-tweet-tags="webdesign,webdev,js,yolo"
      data-inline-tweet-url="bitsofco.de">
  Lorem Khaled Ipsum is a major key to success
</span>

The only required item here is the very top data-inline-tweet attribute. This is the only thing you need to get the effect working, everything else is optional.

But, those extra options do make a difference because they add features to the auto-generated tweet:

Data-inline-tweet-via – adds an @mention into the tweet
Data-inline-tweet-tags – appends tags to the tweet (if there’s room)
Data-inline-tweet-url – includes a clickable URL in your tweet

The setup can be difficult which is why I recommend using the WordPress plugin if you can.

But, it’s not all that bad if you just copy/paste the contents to whatever text you want tweetable. And for a free plugin, this thing is very lightweight.

Take a peek at the demo page to see this in action and look into the GitHub repo if you wanna learn more.