3aede01351 | ||
---|---|---|
src | ||
.gitignore | ||
Readme.md | ||
component.json | ||
googleplusonecount.php | ||
license.md | ||
social-likes.css | ||
social-likes.jquery.json | ||
social-likes.min.js |
Readme.md
Social Likes
Beautiful “like” buttons with counters for popular social networks: Facebook, Twitter, LiveJournal, etc. Uses jQuery.
Features
- Easy to install.
- Beautiful and all in one style.
- Won’t explode your page’s layout.
Installation and configuration
Use interactive builder to generate code.
Advanced configuration
Options
Options define via HTML data attributes.
url
URL of shareable page. Current page by default.
title
Title for Twitter, Vkontakte and LiveJournal. Current page’s title by default.
html
HTML code for LiveJournal and “Code” buttons. By default tag with link to current page.
counters
Disables “likes” counters when “no”. Default: “yes”.
prompt
Text for code bubble. Default: “Copy code to clipboard:”.
single-title
Share button title for “single button” mode. Default: “Share”.
Examples:
<ul class="social-likes" data-url="http://landscapists.info/" data-title="Landscapists of Russia">
…
</ul>
<ul class="social-likes social-likes_single" data-single-title="This is Sharing!">
…
</ul>
Services specific options
You can specify via
(site’s Twitter) and related
(any other Twitter you want to advertise) values for <li class="twitter">
:
<li class="twitter" data-via="sapegin" data-related="Landscapists">Twitter</li>
Experimental Google+ counter
Place googleplusonecount.php
somewhere on your server. And change buttons HTML like this:
<li class="plusone" data-counter="http://example.com/path/to/googleplusonecount.php?url={url}&callback=?">Google+</li>
For success posting pin to pinterest you have to specify url of image. Add data-media attribute to <li class="pinterest"
:
<li class="pinterest" data-media="http://path.com/image/url.png">Pinterest</li>
Adding your own button
Define socialLikesButtons
hash:
var socialLikesButtons = {
surfingbird: {
popupUrl: 'http://surfingbird.ru/share?url={url}',
pupupWidth: 650,
popupHeight: 500
}
};
Add some CSS:
.social-likes__button_surfingbird {
background: #f2f3f5;
color: #596e7e;
border-color: #ced5e2;
}
.social-likes__icon_surfingbird {
background: url(http://surfingbird.ru/img/share-icon.png) no-repeat 2px 3px;
}
And use in like any other button:
<li class="surfingbird">Surf</li>
See sources (src
folder) for available options and class names.
Title, description and image for Facebok and Twitter
You can add they using Facebook Open Graph and Twitter Card:
<meta property="og:type" content="article">
<meta property="og:url" content="{page_url}">
<meta property="og:title" content="{title}">
<meta property="og:description" content="{description}">
<meta property="og:image" content="{image_url}">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@SiteTwitter">
<meta name="twitter:creator" content="@sapegin">
License
The MIT License, see the included License.md
file.