Repository: ireade/inlinetweetjs Branch: gh-pages Commit: 391df35d7141 Files: 7 Total size: 12.1 KB Directory structure: gitextract_wu9e5ruw/ ├── .gitignore ├── README.md ├── gulpfile.js ├── index.html ├── package.json ├── src/ │ └── inline-tweet.js └── style.css ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ node_modules ================================================ FILE: README.md ================================================ # InlineTweet.js ![InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. Just wrap the tweetable text in a container with data-inline-tweet and you're good to go!](screenshot.png) [SEE DEMO](http://ireade.github.io/inlinetweetjs/) Want to use this in Wordpress? [Check out this plugin](https://github.com/ireade/wp-inlinetweetjs/) ## How to Use #### 1 - Include Script [Download the file from here](https://raw.githubusercontent.com/ireade/inlinetweetjs/gh-pages/src/inline-tweet.min.js) and include it in your webpage. ```html ``` #### 2 - Wrap Text Wrap the tweetable text in a container element of your choice (`span` recommended) with the data attribute, `data-inline-tweet` ```html Lorem Khaled Ipsum is a major key to success ``` #### 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 ```html Lorem Khaled Ipsum is a major key to success ``` #### 4 - Add Styles Add the following styles to your stylesheet - ```css [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); } ``` ## Licence [GNU GENERAL PUBLIC LICENSE](https://www.gnu.org/licenses/gpl-3.0.en.html) ================================================ FILE: gulpfile.js ================================================ var gulp = require('gulp'), gutil = require('gulp-util'), uglify = require('gulp-uglifyjs'); gulp.task('script', function() { gulp.src('src/inline-tweet.js') .pipe( uglify('inline-tweet.min.js') .on('error', gutil.log) ) .pipe(gulp.dest('src')); }); gulp.task('watch', function() { gulp.watch('src/inline-tweet.js',['script']); }); gulp.task('default', ['script', 'watch']); ================================================ FILE: index.html ================================================ InlineTweet.js

InlineTweet.js

InlineTweet.js allows you to easily create tweetable links out of any text on a webpage. Just wrap the tweetable text in a container with data-inline-tweet and you're good to go!




UPDATE: You can now use InlineTweet.js in Wordpress with this new plugin! (Check it out)

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);
}

Made with by @IreAderinokun

================================================ FILE: package.json ================================================ { "name": "inline-tweet-js", "version": "1.0.0", "description": "", "main": "gulpfile.js", "devDependencies": { "gulp": "^3.9.1", "gulp-util": "^3.0.7", "gulp-uglifyjs": "^0.6.2" }, "scripts": { "start": "gulp" }, "author": "Ire Aderinokun", "license": "ISC" } ================================================ FILE: src/inline-tweet.js ================================================ var inlineTweets = document.querySelectorAll('*[data-inline-tweet]'); if ( inlineTweets ) { var twitterLogo = 'image/svg+xml'; function buildInlineTweet(inlineTweet) { var tweetText = inlineTweet.innerHTML; // TWEET LINK VARIABLES var tweetTextEncoded = "%22" + encodeURIComponent(tweetText) + "%22"; var pageURL = inlineTweet.dataset.inlineTweetUrl ? inlineTweet.dataset.inlineTweetUrl : window.location.href; var tweetVia = inlineTweet.dataset.inlineTweetVia ? "&via="+inlineTweet.dataset.inlineTweetVia : ""; var tweetHashtags = inlineTweet.dataset.inlineTweetTags ? "&hashtags="+inlineTweet.dataset.inlineTweetTags : ""; var tweetLink = "https://twitter.com/intent/tweet/?text="+tweetTextEncoded+"&url="+pageURL+tweetVia+tweetHashtags; // SPAN ELEMENT var tweetTextContainer = document.createElement('span'); tweetTextContainer.innerHTML = tweetText; // ANCHOR ELEMENT var link = document.createElement('a'); link.target = "_blank"; link.href = tweetLink; link.appendChild(tweetTextContainer); link.innerHTML += twitterLogo; inlineTweet.innerHTML = ""; inlineTweet.appendChild(link); } for ( var i = 0; i < inlineTweets.length; i++ ) { buildInlineTweet(inlineTweets[i]) } } ================================================ FILE: style.css ================================================ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /* Box sizing */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /* ---------------*/ html { font-size: 62.5%; } body { font-size: 1.6rem; line-height: 1.4; font-family: 'Source Sans Pro', sans-serif; color: rgb(50, 50, 50); } a { color: inherit; } small { font-size: 1rem; display: block; text-align: right; } strong { font-weight: 600; } h1 { font-size: 4rem; margin-bottom: 20px; font-weight: 600; } p.about { font-size: 2rem; margin-bottom: 20px; } p { margin-bottom: 15px; } h2 { font-size: 2.5rem; font-weight: 600; margin-bottom: 20px; } h3 { font-size: 2rem; font-weight: 600; margin-bottom: 20px; } .uo { color: rgb(180, 180, 180); } .ul { display: block; margin-bottom: 20px; margin-left: 20px; } .ul li { list-style-type: disc; list-style-position: inside; } .container { margin: 100px auto; width: 90%; max-width: 800px; } @media screen and (max-width: 600px) { .container { margin: 50px auto; } } section.site-section { margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid rgb(220, 220, 220); } section:not(.site-section) { margin-bottom: 40px; } .highlight { margin-bottom: 15px; } pre { background-color: rgb(220, 220, 220); padding: 10px; display: block; font-family: 'Source Code Pro', monospace; font-size: 1.2rem; color: #000; white-space: pre-line; word-wrap: break-word; position: relative; } code { background-color: rgb(220, 220, 220); font-family: 'Source Code Pro', monospace; font-size: 1.2rem; color: #000; padding: 2px 5px; } /* Twemoji Awesome - http://ellekasai.github.io/twemoji-awesome/ */ .twa { display: inline-block; height: 1em; width: 1em; margin: 0 .05em 0 .1em; vertical-align: -0.1em; background-repeat: no-repeat; background-position: center center; background-size: 1em 1em; } .twa-heart { background-image: url("https://twemoji.maxcdn.com/svg/2764.svg"); } [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: 8px; } [data-inline-tweet] a:hover span { background-color: rgba(0,172,237, 0.1); color: rgb(0,172,237); }