{"id":38194,"date":"2017-10-04T21:01:35","date_gmt":"2017-10-04T13:01:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38194"},"modified":"2017-11-24T19:12:04","modified_gmt":"2017-11-24T11:12:04","slug":"inlinetweet-js-tweet-script","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/inlinetweet-js-tweet-script\/","title":{"rendered":"Add Tweetable Links in Your Content with InlineTweet.js"},"content":{"rendered":"

You\u2019ll see this feature a lot on big sites such as TechCrunch and Mashable. You\u2019ll be reading an article and notice that an entire sentence is highlighted like a link<\/strong>.<\/p>\n

Yet, when you click it\u2019ll open a tweet window<\/strong> asking you to share that text snippet with your Twitter followers. It\u2019s a great way to drive traffic to your site<\/strong> and encourage more social shares<\/a>.<\/p>\n

To replicate this effect on your site, try InlineTweet.js<\/a><\/strong>. It can save you hours of setup time by adding this functionality right to your page.<\/p>\n

\"InlineTweet.js<\/a><\/figure>\n

This free JavaScript plugin is super easy to install and it even has a free WordPress plugin<\/a><\/strong> if you prefer that route.<\/p>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tHow to Create Medium-Like Floating Action Menu<\/a>\n\t\t\t\t<\/p>\n

It does not require any JavaScript dependencies<\/strong>, so you can run this sans-jQuery.<\/p>\n

All content works directly through data attributes<\/a><\/strong>, 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.<\/p>\n

On the main script page<\/a>, you\u2019ll find a few code snippets<\/strong> demonstrating how this works.<\/p>\n

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<\/strong> like this:<\/p>\n

\r\n<span data-inline-tweet\r\n      data-inline-tweet-via=\"ireaderinokun\"\r\n      data-inline-tweet-tags=\"webdesign,webdev,js,yolo\"\r\n      data-inline-tweet-url=\"bitsofco.de\">\r\n  Lorem Khaled Ipsum is a major key to success\r\n<\/span>\r\n<\/pre>\n
The only required item<\/strong> here is the very top data-inline-tweet<\/code> attribute. This is the only thing you need to get the effect working, everything else is optional<\/strong>.<\/p>\n
But, those extra options do make a difference because they add features to the auto-generated tweet<\/strong>:<\/p>\n