HTML
<header class="jumbotron header tweet-it">
<h1>
Tweetit<small>.js</small>
<svg class="svg-bird" viewBox="0 0 20 20">
<path d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266" />
</svg>
</h1>
<p>A tiny jQuery plugin to tweet highlighted texts</p>
<p>
<a href="https://twitter.com/share" class="twitter-share-button" {count} data-url="http://marcossilva.info/tweetit.js/" data-text="jQuery Tweetit.js - A tiny jQuery plugin to tweet highlighted texts" data-hashtags="jquery" data-via="sislandemarcos">Tweet</a>
<script>!function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');</script>
</header>
<div class="container content">
<div class="page-header">
<a href="http://marcossilva.info/tweetit.js/" target="_blank"><h2>Demo</h2></a>
</div>
<p>
Highlight something in the following text to see this plugin in action.
</p>
<p class="tweet-it">
Give your readers the ability to tweet anything in your blog or webpage. When some text is selected, the Tweet it button displays. Clicking on this button allows them to post the selected text in Twitter. You can add your webpage and hashtags to be pusblished with their tweets. Nice eh?
</p>
<div class="page-header">
<h2>How to use it</h2>
</div>
<p>Copy the libraries to your project.</p>
<p>Include the library in the header of your html file:</p>
<pre><code class="javascript"><head>
...
<link rel="stylesheet" href="css/tweetit.css">
...
<script src="js/jquery.tweetit.js"></script>
...
</body></code></pre>
<p>Decorate your DOM with some class that you can select for your plugin:</p>
<pre><code class="html"><p class='tweet-it'>
Some awesome text.
</p></code></pre>
<p>Initiate your plugin:</p>
<pre><code class="javascript">$('.tweet-it').tweetit();</code></pre>
<h3>Optional parameters</h3>
<ol>
<li>url : Your website address. If not provided, Tweetit.js will use the current page's url. If don't want to include a url in your tweet, pass a blank string. </li>
<li>hashtags : comma separated list of <a href="https://support.twitter.com/articles/49309?lang=en" target="_blank">Twitter hashtags</a>. Do not include the # (hash) character</li>
<li>via : the Twitter username to refer in the tweet. Do not include the @ (at) character</li>
</ol>
<p>Example:</p>
<pre><code class="javascript">$('.tweet-it').tweetit( {
url : 'example.com',
via : 'username',
hashtags : 'jquery, plugin' } );</code></pre>
<h3>Remarks</h3>
<p>You may know that Twitter posts are restricted to 140 characters, including the url, via and hashtag paramters. Tweetit.js will include your parameters and restrict the actual text to comply with that restriction.</p>
</div>
<footer>
<div class="container content">
<div class="row">
<div class="col-sm-8">
<p>© <a href="http://marcossilva.info/tweetit.js/">Marcos Silva</a></p>
<a href="http://opensource.org/licenses/mit-license.php">MIT License</a>
</div>
<div class="col-sm-4 text-right">
<iframe src="http://ghbtns.com/github-btn.html?user=sislandemarcos&repo=Tweetit.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=sislandemarcos&repo=Tweetit.js&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="80" height="20"></iframe>
</div>
</div>
</div>
</footer>
