-
Notifications
You must be signed in to change notification settings - Fork 29
/
Copy pathindex.html
107 lines (74 loc) · 3.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>InlineTweet.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Source+Code+Pro' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section>
<h1>InlineTweet.js</h1>
<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>
<br>
<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>
<br><br>
<p>
<strong>UPDATE: </strong>
<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>
(<a href="https://github.com/ireade/wp-inlinetweetjs">Check it out</a>)
</p>
</section>
<section class="site-section" id="how-to-use">
<h2>How To Use</h2>
<section>
<h3>1 - Include Script</h3>
<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>
<pre id="stepOne"><script src="path/to/inline-tweet.min.js"></script></pre>
</section>
<section>
<h3>2 - Wrap Text</h3>
<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>
<pre><span data-inline-tweet>Lorem Khaled Ipsum is a major key to success</span></pre>
</section>
<section>
<h3>3 - Additional Options</h3>
<p>You can add more data attributes to cutomise the tweeted output -</p>
<ul class="ul">
<li><code>data-inline-tweet-via</code> — Add a twitter username (without the @) to append to the tweet </li>
<li><code>data-inline-tweet-tags</code> - Add hashtags to the tweet (comma-separated, no spaces)</li>
<li><code>data-inline-tweet-url</code> — Tweet a URL different to the current page url</li>
</ul>
<pre><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></pre>
</section>
<section>
<h3>4 - Add Styles</h3>
<p>Add the following styles to your stylesheet -</p>
<pre id="stepOne">[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);
}</pre>
</section>
</section>
<p>Made with <i class="twa twa-heart"></i> by <a href="https://twitter.com/ireaderinokun" target="_blank">@IreAderinokun</a></p>
</div>
<script src="src/inline-tweet.min.js"></script>
</body>
</html>