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.
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.
Read Also: 80 Twitter Tools for Almost Everything