jQuery - You can link to a CDN of the latest version at Google's Hosted Libraries page.
Font Awesome - Download the latest version from Font Awesome's website.
Include jQuery and Font Awesome in your html file, like so:
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
NOTE: To use Font Awesome, also include the /fonts/ directory in your project.
First, download quoteShare.js or quoteShare.min.js from this GitHub repository and include it in your html file. Be sure to place it below where you have included jQuery, like so:
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- quoteShare.js -->
<script src="js/quoteShare.js"></script>
Second, use the quoteShare method on the selector of your choice. For example:
<script>
$(document).ready(function(){
$('p').quoteShare();
});
</script>
The
quoteShare()
method accepts options, enabling you to customize when and how your share button displays on the page.
Option | Date Type | Default | Description |
---|---|---|---|
animation | number |
75 |
Speed of the animation, in milliseconds, with which the popup appears. Set to
0 to disable. |
backgroundColor | string |
'#55acee' |
The color of the background of the Twitter icon. Default is Twitter's blue. Hex, RGB, and other color codes are accepted. |
boxShadow | boolean |
true |
A shadow that appears below the menu. Set to false to disable. |
maxLength | number |
500 |
The maximum number of characters that must be highlighted for the share icon to appear. |
minLength | number |
1 |
The minimum number of characters that must be highlighted for the share icon to appear. |
twitterColor | string |
'#ffffff' |
The color of the bird in the Twitter icon. Default is white. Hex, RGB, and other color codes are accepted. |
twtterElipses | boolean |
true |
If the length of the tweet is 140 characters, quoteShare will abridge excessively long text and add an elipses. Works even if hashtags and a source are included in the tweet. Set to false to disable. |
twitterHashtags | string |
'' |
A comma separated list of hashtags that accompany the tweet. |
twitterVia | string |
'' |
A Twitter handle to accompany the tweet. |
In its simplest form, quoteShare is a jQuery method that requires no options. Execute it on the element you wish to make shareable.
$('.example-1').quoteShare();
DEMO: You can highlight this text to share it with quoteShare.
quoteShare also lets you pass options to change the color of the share menu and icons.
$('.example-2').quoteShare({
background: '#ffffff',
twitterColor : '#55acee'
});
DEMO: When you highlight this text, the menu is white and the share icons are colored.
By default, quoteShare will only share highlighted text that is longer than one character and shorter than 114 characters. However, quoteShare provides options to customize this.
$('.example-3').quoteShare({
minLength : 20,
maxLength : 40
});
DEMO: You can only share highlighted text in this paragraph that is between 20 and 40 characters long.
You can remove the box shadow from the share menu.
$('.example-4').quoteShare({
boxShadow : false
});
DEMO: When you highlight this text, the popup will appear without a box shadow.
You can add hashtags or a source Twitter handle to the tweet.
$('.example-5').quoteShare({
twitterHashtags : 'jQuery, Twitter',
twitterVia : 'Harry_Stevens'
});
DEMO: The tweet will include hashtags and a source.
You can change the speed of the animation with which the popup appears. Set it to
0
to disable animation.
1000
equals 1 second.
$('.example-6').quoteShare({
animation : 0,
});
DEMO: The popup will appear immediately, with no animation.
You can change the speed of the animation with which the popup appears. Set it to
0
to disable animation.
1000
equals 1 second.
$('.example-7').quoteShare({
twitterElipses : false,
});
DEMO: quoteShare can abridge excessively long text so that the tweet is 140 characters. However, iftwitterElipses
is set tofalse
, the user will have to edit the tweet before sending it. If you highlight this entire block of text, you will see what happens when you set it tofalse
.