├── README.md
├── index.html
└── tweetable.js
/README.md:
--------------------------------------------------------------------------------
1 | # Overview
2 | Tweetable is a plugin to turn any html element into a twitter link that either uses the native app, or falls back to web.
3 |
4 | Tweetable provides an ideal experience for users who want to tweet headlines, quotes, and other highlighted content directly from your blog.
5 |
6 | #Setup
7 | Include the following before your `` tag (note that on Wordpress or other blog templates, there’s usually a place to paste custom code like this):
8 |
9 | ```html
10 |
11 |
12 | ```
13 |
14 | (Note: if you get SSL errors, simply copy the entire code in this repo between your `` tabs, your Wordpess/other custom code box, or ask your webdeveloper ;)
15 |
16 | #Use
17 | 1. Once you have Tweetable setup, find a piece of text that you want to make Tweetable.
18 | 2. Wrap the text in `` (Tweetable will work on other html elements too, but makes it look like a link which avoids confusion)
19 | 3. Set `href = "#"`
20 | 4. Set `class = "tweetable"`. If you already have assigned other classes to this element, simply separate them with spaces: `class = "class1 class2 tweetable"`.
21 |
22 | #Optional Parameters
23 | * `data-user`: Set the twitter handle that should get credit for the post (you).
24 | * `data-message`: By default, Tweetable will use the text within the HTML element as the text of the tweet, but you can set alternate tweet text via this parameter.
25 |
26 | #Example
27 | ```html
28 |
29 | ```
30 |
31 | For a live example, see [The Nootrobox blog](https://www.nootrobox.com/blog/starcraft) and more information [on this page](http://omarish.com/2015/05/16/tweetable.html).
32 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/tweetable.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function() {
2 | function doCallback() {
3 | var user = $(this).data('user');
4 | var text = "\"" + ($(this).data('message') || $(this).text()) + "\" " + window.location.href + (user ? " via @" + $(this).data('user') : '');
5 | var original_start = new Date();
6 | var lag = 1250;
7 |
8 | var deeplink_url = "twitter://post?message=" + encodeURIComponent(text);
9 | window.location.href = deeplink_url;
10 |
11 | setTimeout(function() {
12 | var time_spent_waiting = (new Date() - original_start);
13 | if (time_spent_waiting > (2.0 * lag)) {
14 | // We can assume they have the app, so do nothing.
15 | } else {
16 | // That was too fast so we can assume they don't have the app.
17 | var intent_url = "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text);
18 | window.open(intent_url, "_blank");
19 | }
20 | }, lag);
21 | return false;
22 | }
23 |
24 | $(".tweetable").on("click", doCallback);
25 | });
26 |
--------------------------------------------------------------------------------