alexlaforge/inlinetweetjs

InlineTweet.js allows you to easily create tweetable links out of any text on a webpage

InlineTweet.js

SEE DEMO

How to Use

1 - Include Script

Download the file from here and include it in your webpage.

<script src="path/to/inline-tweet.min.js"></script>

2 - Wrap Text

Wrap the tweetable text in a container element of your choice (span recommended) with the data attribute, data-inline-tweet

<span data-inline-tweet>Lorem Khaled Ipsum is a major key to success</span>

3 - Additional Options

You can add more data attributes to cutomise the tweeted output -

• data-inline-tweet-via — Add a twitter username (without the @) to append to the tweet
• data-inline-tweet-tags - Add hashtags to the tweet (comma-separated, no spaces)
• data-inline-tweet-url — Tweet a URL different to the current page url

<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>

4 - Add Styles

Add the following styles to your stylesheet -

[data-inline-tweet] a {   
	text-decoration: none;   
	color: #000; 
} 
[data-inline-tweet] a span {   
	border-bottom: 1px dotted rgb(0,172,237);   
	font-style: italic;      
	margin-right: 10px; 
} 
[data-inline-tweet] a:hover span {   
	background-color: rgba(0,172,237,0.1);   
	color: rgb(0,172,237); 
}