├── .gitignore
├── screenshot.png
├── package.json
├── gulpfile.js
├── README.md
├── src
    ├── inline-tweet.min.js
    └── inline-tweet.js
├── index.html
└── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ireade/inlinetweetjs/HEAD/screenshot.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "inline-tweet-js",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "gulpfile.js",
 6 |   "devDependencies": {
 7 |     "gulp": "^3.9.1",
 8 |     "gulp-util": "^3.0.7",
 9 |     "gulp-uglifyjs": "^0.6.2"
10 |   },
11 |   "scripts": {
12 |     "start": "gulp"
13 |   },
14 |   "author": "Ire Aderinokun",
15 |   "license": "ISC"
16 | }
17 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require('gulp'),
 2 |     gutil = require('gulp-util'),
 3 |     uglify = require('gulp-uglifyjs');
 4 | 
 5 | gulp.task('script', function() {
 6 |     gulp.src('src/inline-tweet.js')
 7 |         .pipe(
 8 |             uglify('inline-tweet.min.js')
 9 |             .on('error', gutil.log)
10 |         )
11 |         .pipe(gulp.dest('src'));
12 | });
13 | 
14 | gulp.task('watch', function() {
15 |     gulp.watch('src/inline-tweet.js',['script']); 
16 | });
17 | 
18 | gulp.task('default', ['script', 'watch']);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # InlineTweet.js
 2 | 
 3 | ![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)
 4 | 
 5 | [SEE DEMO](http://ireade.github.io/inlinetweetjs/)
 6 | 
 7 | Want to use this in Wordpress? [Check out this plugin](https://github.com/ireade/wp-inlinetweetjs/)
 8 | 
 9 | 
10 | ## How to Use
11 | 
12 | 
13 | #### 1 - Include Script
14 | 
15 | [Download the file from here](https://raw.githubusercontent.com/ireade/inlinetweetjs/gh-pages/src/inline-tweet.min.js) and include it in your webpage.
16 | 
17 | ```html
18 | <script src="path/to/inline-tweet.min.js"></script>
19 | ```
20 | 
21 | 
22 | #### 2 - Wrap Text
23 | 
24 | Wrap the tweetable text in a container element of your choice (`span` recommended) with the data attribute, `data-inline-tweet`
25 | 
26 | 
27 | ```html
28 | <span data-inline-tweet>Lorem Khaled Ipsum is a major key to success</span>
29 | ```
30 | 
31 | 
32 | #### 3 - Additional Options
33 | 
34 | You can add more data attributes to cutomise the tweeted output -
35 | 
36 | - `data-inline-tweet-via` — Add a twitter username (without the @) to append to the tweet
37 | - `data-inline-tweet-tags` - Add hashtags to the tweet (comma-separated, no spaces)
38 | - `data-inline-tweet-url` — Tweet a URL different to the current page url
39 | 
40 | ```html
41 | <span data-inline-tweet       
42 | 	  data-inline-tweet-via="ireaderinokun"   
43 | 	  data-inline-tweet-tags="webdesign,webdev,js,yolo"    
44 | 	  data-inline-tweet-url="bitsofco.de">   
45 | 	Lorem Khaled Ipsum is a major key to success 
46 | </span>
47 | ```
48 | 
49 | 
50 | #### 4 - Add Styles
51 | 
52 | Add the following styles to your stylesheet -
53 | 
54 | ```css
55 | [data-inline-tweet] a {   
56 | 	text-decoration: none;   
57 | 	color: #000; 
58 | } 
59 | [data-inline-tweet] a span {   
60 | 	border-bottom: 1px dotted rgb(0,172,237);   
61 | 	font-style: italic;      
62 | 	margin-right: 10px; 
63 | } 
64 | [data-inline-tweet] a:hover span {   
65 | 	background-color: rgba(0,172,237,0.1);   
66 | 	color: rgb(0,172,237); 
67 | }
68 | ```
69 | 
70 | 
71 | ## Licence
72 | 
73 | [GNU GENERAL PUBLIC LICENSE](https://www.gnu.org/licenses/gpl-3.0.en.html)
74 | 
75 | 


--------------------------------------------------------------------------------
/src/inline-tweet.min.js:
--------------------------------------------------------------------------------
1 | function buildInlineTweet(e){var t=e.innerHTML,i="%22"+encodeURIComponent(t)+"%22",n=e.dataset.inlineTweetUrl?e.dataset.inlineTweetUrl:window.location.href,a=e.dataset.inlineTweetVia?"&via="+e.dataset.inlineTweetVia:"",r=e.dataset.inlineTweetTags?"&hashtags="+e.dataset.inlineTweetTags:"",l="https://twitter.com/intent/tweet/?text="+i+"&url="+n+a+r,d=document.createElement("span");d.innerHTML=t;var s=document.createElement("a");s.target="_blank",s.href=l,s.appendChild(d),s.innerHTML+=twitterLogo,e.innerHTML="",e.appendChild(s)}var inlineTweets=document.querySelectorAll("*[data-inline-tweet]");if(inlineTweets)for(var twitterLogo='<svg style="height: 0.7em;" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 182.66667 150.66667" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath20" clipPathUnits="userSpaceOnUse"><path id="path18" d="m0 10.012h1366.9v1110.9h-1366.9z"/></clipPath></defs><g id="g10" transform="matrix(1.3333 0 0 -1.3333 0 150.67)"><g id="g12" transform="scale(.1)"><g id="g14"><g id="g16" clip-path="url(#clipPath20)"><path id="path22" d="m1366.9 989.39c-50.27-22.309-104.33-37.387-161.05-44.18 57.89 34.723 102.34 89.679 123.28 155.15-54.18-32.15-114.18-55.47-178.09-68.04-51.13 54.49-124.02 88.55-204.68 88.55-154.89 0-280.43-125.55-280.43-280.43 0-21.988 2.457-43.398 7.258-63.91-233.08 11.68-439.72 123.36-578.04 293.01-24.141-41.4-37.969-89.567-37.969-140.97 0-97.308 49.489-183.13 124.76-233.44-45.969 1.437-89.218 14.058-127.03 35.078-0.043-1.18-0.043-2.348-0.043-3.52 0-135.9 96.68-249.22 224.96-275-23.512-6.41-48.281-9.8-73.86-9.8-18.089 0-35.628 1.711-52.781 5 35.711-111.41 139.26-192.5 262-194.77-96.058-75.23-216.96-120.04-348.36-120.04-22.621 0-44.961 1.332-66.918 3.91 124.16-79.568 271.55-125.98 429.94-125.98 515.82 0 797.86 427.31 797.86 797.93 0 12.153-0.28 24.223-0.79 36.25 54.77 39.571 102.31 88.95 139.93 145.2" fill="#55ACEE"/></g></g></g></g></svg>',i=0;i<inlineTweets.length;i++)buildInlineTweet(inlineTweets[i]);


--------------------------------------------------------------------------------
/src/inline-tweet.js:
--------------------------------------------------------------------------------
 1 | var inlineTweets = document.querySelectorAll('*[data-inline-tweet]');
 2 | 
 3 | if ( inlineTweets ) {
 4 | 
 5 | 	var twitterLogo = '<svg style="height: 0.7em;" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 182.66667 150.66667" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath20" clipPathUnits="userSpaceOnUse"><path id="path18" d="m0 10.012h1366.9v1110.9h-1366.9z"/></clipPath></defs><g id="g10" transform="matrix(1.3333 0 0 -1.3333 0 150.67)"><g id="g12" transform="scale(.1)"><g id="g14"><g id="g16" clip-path="url(#clipPath20)"><path id="path22" d="m1366.9 989.39c-50.27-22.309-104.33-37.387-161.05-44.18 57.89 34.723 102.34 89.679 123.28 155.15-54.18-32.15-114.18-55.47-178.09-68.04-51.13 54.49-124.02 88.55-204.68 88.55-154.89 0-280.43-125.55-280.43-280.43 0-21.988 2.457-43.398 7.258-63.91-233.08 11.68-439.72 123.36-578.04 293.01-24.141-41.4-37.969-89.567-37.969-140.97 0-97.308 49.489-183.13 124.76-233.44-45.969 1.437-89.218 14.058-127.03 35.078-0.043-1.18-0.043-2.348-0.043-3.52 0-135.9 96.68-249.22 224.96-275-23.512-6.41-48.281-9.8-73.86-9.8-18.089 0-35.628 1.711-52.781 5 35.711-111.41 139.26-192.5 262-194.77-96.058-75.23-216.96-120.04-348.36-120.04-22.621 0-44.961 1.332-66.918 3.91 124.16-79.568 271.55-125.98 429.94-125.98 515.82 0 797.86 427.31 797.86 797.93 0 12.153-0.28 24.223-0.79 36.25 54.77 39.571 102.31 88.95 139.93 145.2" fill="#55ACEE"/></g></g></g></g></svg>';
 6 | 
 7 | 
 8 | 
 9 | 
10 | 	function buildInlineTweet(inlineTweet) {
11 | 
12 | 		var tweetText = inlineTweet.innerHTML;
13 | 
14 | 
15 | 		// TWEET LINK VARIABLES
16 | 		var tweetTextEncoded = "%22" + encodeURIComponent(tweetText) + "%22";
17 | 		var pageURL = inlineTweet.dataset.inlineTweetUrl ? inlineTweet.dataset.inlineTweetUrl : window.location.href;
18 | 		var tweetVia = inlineTweet.dataset.inlineTweetVia ? "&via="+inlineTweet.dataset.inlineTweetVia : "";
19 | 		var tweetHashtags = inlineTweet.dataset.inlineTweetTags ? "&hashtags="+inlineTweet.dataset.inlineTweetTags : "";
20 | 		var tweetLink = "https://twitter.com/intent/tweet/?text="+tweetTextEncoded+"&url="+pageURL+tweetVia+tweetHashtags;
21 | 
22 | 
23 | 		// SPAN ELEMENT
24 | 		var tweetTextContainer = document.createElement('span');
25 | 		tweetTextContainer.innerHTML = tweetText;
26 | 
27 | 
28 | 		// ANCHOR ELEMENT
29 | 		var link = document.createElement('a');
30 | 		link.target = "_blank";
31 | 		link.href = tweetLink;
32 | 		link.appendChild(tweetTextContainer);
33 | 		link.innerHTML += twitterLogo;
34 | 
35 | 
36 | 		inlineTweet.innerHTML = "";
37 | 		inlineTweet.appendChild(link);
38 | 
39 | 	}
40 | 
41 | 
42 | 	for ( var i = 0; i < inlineTweets.length; i++ ) {
43 | 		buildInlineTweet(inlineTweets[i])
44 | 	}
45 | 
46 | }
47 | 
48 | 
49 | 
50 | 
51 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 | 	<meta charset="utf-8">
  5 | 	<title>InlineTweet.js</title>
  6 | 	
  7 | 	<meta name="viewport" content="width=device-width, initial-scale=1">
  8 | 	<meta name="description" content="">
  9 | 	
 10 | 	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro' rel='stylesheet'>
 11 | 	<link rel="stylesheet" href="style.css">
 12 | </head>
 13 | <body>
 14 | 	<div class="container">
 15 | 
 16 | 		<section>
 17 | 		
 18 | 		<h1>InlineTweet.js</h1>
 19 | 
 20 | 		<p class="about"><span data-inline-tweet data-inline-tweet-via="ireaderinokun" data-inline-tweet-url="http://ireade.github.io/inlinetweetjs/" data-inline-tweet-tags="js">InlineTweet.js allows you to easily create tweetable links out of any text on a webpage</span>. Just wrap the tweetable text in a container with <code>data-inline-tweet</code> and you're good to go!</p>
 21 | 
 22 | 		<br>
 23 | 		<iframe src="https://ghbtns.com/github-btn.html?user=ireade&repo=inlinetweetjs&type=star&count=false" frameborder="0" scrolling="0" width="60px" height="20px"></iframe>
 24 | 
 25 | 
 26 | 		<br><br>
 27 | 
 28 | 		<p>
 29 | 			<strong>UPDATE: </strong>
 30 | 			<span data-inline-tweet data-inline-tweet-via="ireaderinokun @CreativeCatApps" data-inline-tweet-url="https://github.com/ireade/wp-inlinetweetjs">You can now use InlineTweet.js in Wordpress with this new plugin!</span>
 31 | 
 32 | 			(<a href="https://github.com/ireade/wp-inlinetweetjs">Check it out</a>)
 33 | 		</p>
 34 | 		
 35 | 		
 36 | 		</section>
 37 | 
 38 | 		
 39 | 		<section class="site-section" id="how-to-use">
 40 | 			<h2>How To Use</h2>
 41 | 
 42 | 			<section>
 43 | 				<h3>1 - Include Script</h3>
 44 | 
 45 | 				<p><a href="https://raw.githubusercontent.com/ireade/inlinetweetjs/gh-pages/src/inline-tweet.min.js">Download the file from here</a> and include it in your webpage.</p>
 46 | <pre id="stepOne">&lt;script src="path/to/inline-tweet.min.js"&gt;&lt;/script&gt;</pre>
 47 | 			</section>
 48 | 
 49 | 
 50 | 			<section>
 51 | 				<h3>2 - Wrap Text</h3>
 52 | 
 53 | 				<p>Wrap the tweetable text in a container element of your choice (<code>span</code> recommended) with the data attribute, <code>data-inline-tweet</code></p>
 54 | 
 55 | <pre>&lt;span data-inline-tweet&gt;Lorem Khaled Ipsum is a major key to success&lt;/span&gt;</pre>
 56 | 			</section>
 57 | 
 58 | 
 59 | 			<section>
 60 | 				<h3>3 - Additional Options</h3>
 61 | 
 62 | 				<p>You can add more data attributes to cutomise the tweeted output -</p>
 63 | 				<ul class="ul">
 64 | 					<li><code>data-inline-tweet-via</code> — Add a twitter username (without the @) to append to the tweet </li>
 65 | 					<li><code>data-inline-tweet-tags</code> - Add hashtags to the tweet (comma-separated, no spaces)</li>
 66 | 					<li><code>data-inline-tweet-url</code> — Tweet a URL different to the current page url</li>
 67 | 				</ul>
 68 | <pre>&lt;span data-inline-tweet
 69 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-inline-tweet-via="ireaderinokun"
 70 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-inline-tweet-tags="webdesign,webdev,js,yolo"
 71 | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-inline-tweet-url="bitsofco.de"&gt;
 72 | &nbsp;&nbsp;Lorem Khaled Ipsum is a major key to success
 73 | &lt;/span&gt;</pre>
 74 | 			</section>
 75 | 
 76 | 
 77 | 			<section>
 78 | 				<h3>4 - Add Styles</h3>
 79 | 				<p>Add the following styles to your stylesheet -</p>
 80 | 
 81 | <pre id="stepOne">[data-inline-tweet] a {
 82 | &nbsp;&nbsp;text-decoration: none;
 83 | &nbsp;&nbsp;color: #000;
 84 | }
 85 | [data-inline-tweet] a span {
 86 | &nbsp;&nbsp;border-bottom: 1px dotted rgb(0,172,237);
 87 | &nbsp;&nbsp;font-style: italic;
 88 | &nbsp;&nbsp;margin-right: 10px;
 89 | }
 90 | [data-inline-tweet] a:hover span {
 91 | &nbsp;&nbsp;background-color: rgba(0,172,237,0.1);
 92 | &nbsp;&nbsp;color: rgb(0,172,237);
 93 | }</pre>
 94 | 			</section>
 95 | 
 96 | 
 97 | 		</section>
 98 | 
 99 | 
100 | 		<p>Made with <i class="twa twa-heart"></i> by <a href="https://twitter.com/ireaderinokun" target="_blank">@IreAderinokun</a></p>
101 | 
102 | 	</div>
103 | 
104 | 
105 | 	<script src="src/inline-tweet.min.js"></script>
106 | </body>
107 | </html>


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | html, body, div, span, applet, object, iframe,
  2 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  3 | a, abbr, acronym, address, big, cite, code,
  4 | del, dfn, em, img, ins, kbd, q, s, samp,
  5 | small, strike, strong, sub, sup, tt, var,
  6 | b, u, i, center,
  7 | dl, dt, dd, ol, ul, li,
  8 | fieldset, form, label, legend,
  9 | table, caption, tbody, tfoot, thead, tr, th, td,
 10 | article, aside, canvas, details, embed,
 11 | figure, figcaption, footer, header, hgroup,
 12 | menu, nav, output, ruby, section, summary,
 13 | time, mark, audio, video {
 14 | 	margin: 0;
 15 | 	padding: 0;
 16 | 	border: 0;
 17 | 	font: inherit;
 18 | 	font-size: 100%;
 19 | 	vertical-align: baseline;
 20 | }
 21 | 
 22 | article, aside, details, figcaption, figure,
 23 | footer, header, hgroup, menu, nav, section {
 24 | 	display: block;
 25 | }
 26 | ul {
 27 | 	list-style: none;
 28 | }
 29 | blockquote, q {
 30 | 	quotes: none;
 31 | }
 32 | blockquote:before, blockquote:after,
 33 | q:before, q:after {
 34 | 	content: '';
 35 | 	content: none;
 36 | }
 37 | table {
 38 | 	border-collapse: collapse;
 39 | 	border-spacing: 0;
 40 | }
 41 | 
 42 | /* Box sizing */
 43 | 
 44 | html {
 45 |   box-sizing: border-box;
 46 | }
 47 | 
 48 | *, *:before, *:after {
 49 |   box-sizing: inherit;
 50 | }
 51 | 
 52 | 
 53 | 
 54 | 
 55 | /* ---------------*/
 56 | 
 57 | 
 58 | 
 59 | html {
 60 |     font-size: 62.5%;
 61 | }
 62 | body {
 63 |     font-size: 1.6rem;
 64 |     line-height: 1.4;
 65 |     font-family: 'Source Sans Pro', sans-serif;
 66 |     color: rgb(50, 50, 50);
 67 | 
 68 | }
 69 | a {
 70 |     color: inherit; 
 71 | }
 72 | 
 73 | small {
 74 | 	font-size: 1rem;
 75 | 	display: block;
 76 | 	text-align: right;
 77 | }
 78 | strong {
 79 | 	font-weight: 600;
 80 | }
 81 | 
 82 | h1 {
 83 | 	font-size: 4rem;
 84 | 	margin-bottom: 20px;
 85 | 	font-weight: 600;
 86 | }
 87 | 
 88 | 
 89 | 
 90 | 
 91 | p.about {
 92 | 	font-size: 2rem;
 93 | 	margin-bottom: 20px;
 94 | }
 95 | 
 96 | p {
 97 | 	margin-bottom: 15px;
 98 | }
 99 | 
100 | h2 {
101 | 	font-size: 2.5rem;
102 | 	font-weight: 600;
103 | 	margin-bottom: 20px;
104 | }
105 | 
106 | 
107 | h3 {
108 | 	font-size: 2rem;
109 | 	font-weight: 600;
110 | 	margin-bottom: 20px;
111 | }
112 | 
113 | .uo {
114 | 	color: rgb(180, 180, 180);
115 | }
116 | 
117 | 
118 | .ul {
119 | 	display: block;
120 | 	margin-bottom: 20px;
121 | 	margin-left: 20px;
122 | 
123 | }
124 | 
125 | .ul li {
126 | 	list-style-type: disc;
127 | 	list-style-position: inside;
128 | }
129 | 
130 | .container {
131 | 	margin: 100px auto;
132 | 	width: 90%;
133 | 	max-width: 800px;
134 | }
135 | 
136 | @media screen and (max-width: 600px) {
137 | 	.container {
138 | 		margin: 50px auto;
139 | 	}
140 | }
141 | 
142 | 
143 | 
144 | section.site-section {
145 | 	margin-bottom: 50px;
146 | 	padding-bottom: 30px;
147 | 	border-bottom: 1px solid rgb(220, 220, 220);
148 | }
149 | section:not(.site-section) {
150 | 	margin-bottom: 40px;
151 | }
152 | 
153 | .highlight {
154 | 	margin-bottom: 15px;
155 | }
156 | 
157 | pre {
158 | 	background-color: rgb(220, 220, 220);
159 | 	padding: 10px;
160 | 	display: block;
161 | 	font-family: 'Source Code Pro', monospace;
162 | 	font-size: 1.2rem;
163 | 	color: #000;
164 | 	
165 | 	white-space: pre-line;
166 | 	word-wrap: break-word;
167 | 	position: relative;
168 | }
169 | 
170 | code {
171 | 	background-color: rgb(220, 220, 220);
172 | 	font-family: 'Source Code Pro', monospace;
173 | 	font-size: 1.2rem;
174 | 	color: #000;
175 | 	padding: 2px 5px;
176 | }
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | /* Twemoji Awesome - http://ellekasai.github.io/twemoji-awesome/ */
191 |  .twa {
192 |   display: inline-block;
193 |   height: 1em;
194 |   width: 1em;
195 |   margin: 0 .05em 0 .1em;
196 |   vertical-align: -0.1em;
197 |   background-repeat: no-repeat;
198 |   background-position: center center;
199 |   background-size: 1em 1em; }
200 | 
201 | .twa-heart {
202 |   background-image: url("https://twemoji.maxcdn.com/svg/2764.svg"); 
203 | }
204 | 
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 | 
212 | [data-inline-tweet] a {
213 | 	text-decoration: none;
214 | 	color: #000;
215 | }
216 | [data-inline-tweet] a span {
217 | 	border-bottom: 1px dotted rgb(0,172,237);
218 | 	font-style: italic;
219 | 	margin-right: 8px;
220 | }
221 | [data-inline-tweet] a:hover span {
222 | 	background-color: rgba(0,172,237, 0.1);
223 | 	color: rgb(0,172,237);
224 | }
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 


--------------------------------------------------------------------------------