Social Share Kit / Улучшение / Плагины Bootstrap

Версия: v1.0.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 62.1 Kb

Уникальный ID: 1589

Посмотрели: 2052 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 38 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/darklow/social-share-kit

Информация: Пользователям

Информация: Правообладателям

Теги: Plugin, Социальные иконки, social icons, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-12-22 в 15:36

Метка: 1588864711

⇄ ⇅

<a name="examples" class="anchor">
 <h2 id="examples" class="page-header">Examples</h2>
 </a>

<div class="ssk-sticky ssk-left ssk-center ssk-lg">
 <a href="" class="ssk ssk-facebook"></a>
 <a href="" class="ssk ssk-twitter"></a>
 <a href="" class="ssk ssk-google-plus"></a>
 <a href="" class="ssk ssk-tumblr"></a>
 <a href="" class="ssk ssk-email"></a>
 </div>

<div class="content-block row examples">
 <div class="col-xs-12 col-sm-6">
 <div>
 <h3 class="page-header">Share icons</h3>

<div>
 <h3 class="page-header">With count</h3>

<div>
 <h3 class="page-header">Icons only</h3>

<div>
 <h3 class="page-header">Inline & standalone</h3>

Icons can be also
 <a href="" class="ssk ssk-icon ssk-twitter"></a> used separately
 <a href="" class="ssk ssk-sm ssk-pinterest"></a><a href="" class="ssk ssk-xs ssk-pinterest"></a>
 </div>
 </div>

<div>
 <h3 class="page-header">With text</h3>
 <a href="" class="ssk ssk-text ssk-twitter ssk-lg">Twitter</a>
 <a href="" class="ssk ssk-text ssk-twitter">Twitter</a>
 <a href="" class="ssk ssk-text ssk-twitter ssk-sm ">Share</a>
 <a href="" class="ssk ssk-text ssk-twitter ssk-xs">Share with Twitter</a>
 <a href="" class="ssk ssk-text ssk-google-plus">Log in with Google</a>
 <a href="" class="ssk ssk-text ssk-amethyst"><span class="glyphicon glyphicon-cog"></span>Go to settings for example</a>
 <a href="" class="ssk ssk-sm ssk-text ssk-turquoise"><span class="glyphicon glyphicon-time"></span>Remind me later</a>
 <a href="" class="ssk ssk-sm ssk-text ssk-emerald"><span class="glyphicon glyphicon-thumbs-up"></span>This i like</a>
 <a href="" class="ssk ssk-sm ssk-text ssk-github ssk-dark-gray">Fork me</a>

<h4>Aligned within group:</h4>

<div class="ssk-block" style="width: 230px">
 <a href="" class="ssk ssk-text ssk-facebook">Sign in with Facebook</a>
 <a href="" class="ssk ssk-text ssk-twitter">Sign in with Twitter</a>
 <a href="" class="ssk ssk-text ssk-google-plus">Sign in with Google</a>
 </div>
 </div>

</div>
 <div class="col-xs-12 col-sm-6">
 <div>
 <h3 class="page-header">Round & rounded</h3>

<div class="ssk-group ssk-round">
 <a href="" class="ssk ssk-facebook"></a>
 <a href="" class="ssk ssk-twitter"></a>
 <a href="" class="ssk ssk-google-plus"></a>
 <a href="" class="ssk ssk-pinterest"></a>
 <a href="" class="ssk ssk-tumblr"></a>
 <a href="" class="ssk ssk-email"></a>
 </div>
 <div class="ssk-group ssk-rounded">
 <a href="" class="ssk ssk-facebook"></a>
 <a href="" class="ssk ssk-twitter"></a>
 <a href="" class="ssk ssk-google-plus"></a>
 <a href="" class="ssk ssk-pinterest"></a>
 <a href="" class="ssk ssk-tumblr"></a>
 <a href="" class="ssk ssk-email"></a>
 </div>
 <div class="ssk-group ssk-sm">
 <a href="" class="ssk ssk-twitter"></a>
 <a href="" class="ssk ssk-twitter ssk-rounded"></a>
 <a href="" class="ssk ssk-twitter ssk-round"></a>
 <a href="" class="ssk ssk-pinterest ssk-round"></a>
 <a href="" class="ssk ssk-pinterest ssk-rounded"></a>
 <a href="" class="ssk ssk-pinterest"></a>
 </div>
 </div>
 <div>
 <h3 class="page-header">Grayscale</h3>

<div class="ssk-group ssk-sm ssk-grayscale">
 <a href="" class="ssk ssk-facebook"></a>
 <a href="" class="ssk ssk-twitter"></a>
 <a href="" class="ssk ssk-google-plus"></a>
 <a href="" class="ssk ssk-pinterest"></a>
 <a href="" class="ssk ssk-tumblr"></a>
 <a href="" class="ssk ssk-email"></a>
 </div>
 <div class="ssk-group ssk-grayscale">
 <a href="" class="ssk ssk-facebook"></a>
 <a href="" class="ssk ssk-twitter"></a>
 <a href="" class="ssk ssk-google-plus"></a>
 <a href="" class="ssk ssk-pinterest"></a>
 <a href="" class="ssk ssk-tumblr"></a>
 <a href="" class="ssk ssk-email"></a>
 </div>
 </div>
 <div>
 <h3 class="page-header">Bootstrap glyphicons support</h3>

<div class="ssk-group">
 <a href="" class="ssk"><span class="glyphicon glyphicon-heart"></span></a>
 <a href="" class="ssk"><span class="glyphicon glyphicon-print"></span></a>
 <a href="" class="ssk"><span class="glyphicon glyphicon-send"></span></a>
 <a href="" class="ssk"><span class="glyphicon glyphicon-cog"></span></a>
 <a href="" class="ssk"><span class="glyphicon glyphicon-time"></span></a>
 <a href="" class="ssk"><span class="glyphicon glyphicon-shopping-cart"></span></a>
 </div>
 </div>
 <div>
 <h3 class="page-header">Font Awesome icons support</h3>

<h3 class="page-header">Extra colors
 <small class="pull-right">Colors by
 <a href="http://flatuicolors.com/" target="_blank">Flat UI Colors</a>
 </small>
 </h3>

<div>
 <h3 class="page-header">Extra icons</h3>

<div class="ssk-lg ssk-group">
 <a href="" class="ssk ssk-icon ssk-link" title="Just link"></a>
 <a href="" class="ssk ssk-icon ssk-github" title="Github"></a>
 <a href="" class="ssk ssk-icon ssk-instagram" title="Instagram"></a>
 <a href="" class="ssk ssk-icon ssk-youtube" title="YouTube"></a>
 <a href="" class="ssk ssk-icon ssk-vimeo" title="Vimeo"></a>
 <a href="" class="ssk ssk-icon ssk-behance" title="Behance"></a>
 <a href="" class="ssk ssk-icon ssk-dribble" title="Dribble"></a>
 <a href="" class="ssk ssk-icon ssk-android" title="Android"></a>
 <a href="" class="ssk ssk-icon ssk-skype" title="Skype"></a>
 <a href="" class="ssk ssk-icon ssk-apple" title="Apple"></a>
 <a href="" class="ssk ssk-icon ssk-amazon" title="Amazon"></a>
 <a href="" class="ssk ssk-icon ssk-ebay" title="eBay"></a>
 </div>
 <a href="" class="ssk ssk-whatsapp" title="WhatsApp"></a>
 <a href="" class="ssk ssk-icon ssk-whatsapp" title="WhatsApp"></a>
 <a href="" class="ssk ssk-reddit2" title="Reddit2"></a>
 <a href="" class="ssk ssk-icon ssk-reddit" title="Reddit"></a>
 <a href="" class="ssk ssk-icon ssk-reddit2" title="Reddit2"></a>
 </div>
 <div>
 <h3 class="page-header">Floating/sticky bar</h3>

<p>
 <a href="" class="active sticky-changer" data-cls="ssk-left">Left side</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-right">Right side</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-bottom">Bottom</a> &nbsp;
 </p>

<p>
 <a href="" class="active sticky-changer" data-cls="">Square</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-round">Round</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-rounded">Rounded</a> &nbsp;
 </p>

<p>
 <a href="" class="sticky-changer" data-cls="ssk-lg">Large</a> &nbsp;
 <a href="" class="active sticky-changer" data-cls="">Regular</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-sm">Small</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-xs">Extra small</a> &nbsp;
 </p>
 </div>
 </div>
 </div>

<div class="content-block">
 <a name="documentation" class="anchor">
 <h2 id="documentation" class="page-header">Documentation</h2>
 </a>

<p class="lead">You can
 <a href="https://github.com/darklow/social-share-kit/releases" target="_blank">download recent stable</a> version from github.
 </p>

<h3 class="page-header">Setup icons</h3>

Download the library, unzip it, copy
 <code>dist/css/social-share-kit.css</code>
 and
 <code>dist/fonts/</code>
 directory to your server and include Social Share Kit stylesheet in your document.

<pre class="prettyprint">
&lt;!-- Social Share Kit CSS --&gt;
&lt;link rel="stylesheet" href="your-path/social-share-kit.css" type="text/css"&gt;</pre>

<br/>
 <blockquote>Note:
 <code>fonts/</code>
 directory must be relatively one level above
 <code>social-share-kit.css</code>
 . For example:
 <pre>/assets/css/social-share-kit.css
/assets/fonts/</pre>
 </blockquote>

<h3 class="page-header">Icons markup</h3>

<p>Inspect source code for examples included in this document above to see what is the proper HTML markup for each case.</p>

<p>Here are some basic examples:</p>

<blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Icon with background</h4>
 <pre class="prettyprint">&lt;a href="" class="ssk ssk-twitter"&gt;&lt;/a&gt;</pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>
 <a href="" class="ssk ssk-twitter"></a>
 </div>
 </div>
 </blockquote>

<blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Icon only</h4>
 <pre class="prettyprint">&lt;a href="" class="ssk ssk-icon ssk-twitter"&gt;&lt;/a&gt;</pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>
 <a href="" class="ssk ssk-icon ssk-twitter"></a>
 </div>
 </div>
 </blockquote>

<blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Group of icons</h4>
 <pre class="prettyprint">&lt;div class="ssk-group"&gt;
 &lt;a href="" class="ssk ssk-facebook"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-twitter"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-google-plus"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-pinterest"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-tumblr"&gt;&lt;/a&gt;
&lt;/div></pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>

<blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Group of icons with share count</h4>

<p>Add
 <code>.ssk-count</code>
 class to show share count. <strong>Note:</strong>
 <code>tumblr</code>
 share count is currently unavailable, due to absence of an API.
 </p>
 <pre class="prettyprint">&lt;div class="ssk-group ssk-count"&gt;
 &lt;a href="" class="ssk ssk-facebook"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-twitter"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-google-plus"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-pinterest"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-linkedin"&gt;&lt;/a&gt;
&lt;/div></pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>

<p>
 Use classes
 <code>ssk-xs</code>
 ,
 <code>ssk-sm</code>
 ,
 <code>ssk-lg</code>
 to control sizing.
 </p>
 <blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Individual sizing.</h4>
 <pre class="prettyprint">&lt;a href="" class="ssk ssk-facebook ssk-xs"&gt;&lt;/a&gt;
&lt;a href="" class="ssk ssk-facebook ssk-sm"&gt;&lt;/a&gt;
&lt;a href="" class="ssk ssk-facebook"&gt;&lt;/a&gt;
&lt;a href="" class="ssk ssk-facebook ssk-lg"&gt;&lt;/a&gt;</pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>

<blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Sizing for whole group</h4>
 <pre class="prettyprint">&lt;div class="ssk-xs ssk-group"&gt;
 &lt;a href="" class="ssk ssk-facebook"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-twitter"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-google-plus"&gt;&lt;/a&gt;
&lt;/div></pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>

<blockquote>
 <div class="row">
 <div class="col-xs-12 col-sm-8">
 <h4>Floating/sticky share icons bar</h4>

<p>Add
 <code>ssk-sticky</code>
 CSS class for fixed sticky bar. Use
 <code>ssk-left</code>
 ,
 <code>ssk-right</code>
 and
 <code>ssk-bottom</code>
 for placement. Add
 <code>ssk-center</code>
 for centered positioning (Note: IE8 doesn't support centered positioning. Override CSS
 <code>top</code>
 and
 <code>left</code>
 properties according to your needs, if IE8 support is required).
 </p>

<p>Add <code>ssk-sticky-hide-xs</code> CSS class to hide sticky bar on small screen devices.</p>

<p>You can also use sizing classes to resize bar icons.</p>
 <pre class="prettyprint">&lt;!-- Left & centered positioning --&gt;
&lt;div class="ssk-sticky ssk-left ssk-center ssk-lg"&gt;
 &lt;a href="" class="ssk ssk-facebook"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-twitter"&gt;&lt;/a&gt;
&lt;/div&gt;

&lt;!-- Left & custom positioning --&gt;
&lt;style&gt;.ssk-sticky .ssk-left { top: 20%; } &lt;/style&gt;
&lt;div class="ssk-sticky ssk-left ssk-lg"&gt;...&lt;/div&gt;</pre>
 </div>
 <div class="col-xs-12 col-sm-4">
 <h4 class="hidden-xs">&nbsp;</h4>

<p>
 <a href="" class="sticky-changer" data-cls="ssk-left">Left side</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-right">Right side</a> &nbsp;
 <a href="" class="sticky-changer" data-cls="ssk-bottom">Bottom</a>
 </p>
 </div>
 </div>
 </blockquote>

<h3 class="page-header">Setup JavaScript</h3>

If you want to use share popups, you will also need to include JavaScript file
 <code>dist/js/social-share-kit.js</code>
 in your document.

<pre class="prettyprint">
&lt;!-- Social Share Kit JS --&gt;
&lt;script type="text/javascript" src="your-path/social-share-kit.js"&gt;&lt;/script&gt;</pre>

<p>You must also initialize Social Share Kit plugin. Put following before your closing
 <code>&lt;/body&gt;</code>
 tag or call whenever you want share popups to initialize. <br/>
 <code>SocialShareKit.init()</code>
 method will automatically attach to
 <code>document.ready</code>
 event itself, so no need to wrap it in
 <code>jQuery.ready</code>
 function in case if you have jQuery also included.
 </p>
 <pre class="prettyprint">&lt;script type="text/javascript"&gt;
SocialShareKit.init();
&lt;/script&gt;</pre>

<h3 about="page-header">Sharer popup options</h3>

<p>
 There are several ways how extra options can be passed to share popup. By default current page URL on which icons are used will be shared and usually meta title and description data will be used as default share data for most of social networks. </p>

<p><strong>Note:</strong> Facebook share popup will always use
 <a href="https://developers.facebook.com/docs/sharing/best-practices#tags" target="_blank">Open Graph tags</a> loaded from provided url, so no way of overriding share data for Facebook.
 <br/> Twitter can also use it's own
 <a href="https://dev.twitter.com/cards/overview" target="_blank">Twitter Meta tags</a>, however share content text can be specified.
 </p>

<h4>1. Pass options with SocialShareKit.init(options)</h4>

<p>Options can be passed as object with following keys:</p>

<dl class="dl-horizontal">
 <dt>selector</dt>
 <dd>Default value is
 <code>.ssk</code>
 . Plugin will automatically target only those icons that support sharing with popup, like
 <code>.ssk-twitter</code>
 etc. Therefore you don't have to worry if you use some more icons on your project, that doesn't support sharing.
 </dd>
 <dt>url</dt>
 <dd>Networks: All. URL address that will be shared. Default: current page URL on which icons are used will be used.</dd>
 <dt>text</dt>
 <dd>Networks: Twitter, Pinterest, Tumblr. Text to share. Default: current page meta description</dd>
 <dt>title</dt>
 <dd>Networks: Tumblr and Email (as subject). Default: current page meta title.</dd>
 <dt>image</dt>
 <dd>Networks: Pinterest. Image ("media" option). Default: meta
 <code>og:image</code>
 of current page.
 <dt>via</dt>
 <dd>Networks: Twitter. Default: meta
 <code>twitter:site</code>
 of current page. Sreen name of twitter user.
 </dd>
 <dt>countCallback</dt>
 <dd>Networks: Twitter. Default: None.
 Since Twitter discontinued count API, you can set count manually (by some third party service maybe) using custom count function. See example below.
 </dd>
 </dl>
 <p>For example:</p>
 <pre class="prettyprint lang-js">&lt;script type="text/javascript"&gt;
SocialShareKit.init({
 selector: '.custom-parent .ssk',
 url: 'http://my-url',
 text: 'Share text default',
 twitter: {
 url: 'http://url-for-twitter',
 text: 'Share text for twitter',
 via: 'twitter-screen-name',
 countCallback: function(shareUrl, onCountReady) {
 // Get count somewhere manually and call onCountReady() whenever you got the count.
 var count = 5;
 return onCountReady(count);
 }
 }
});
&lt;/script&gt;</pre>

</blockquote>

<blockquote>
 <h4>2. Pass options via
 <code>data-*=""</code>
 attributes
 </h4>

<p>You can also pass same options as mentioned in previous section using HTML data attributes. For example:</p>
 <pre class="prettyprint">&lt;a href="" class="ssk ssk-twitter" data-url="http://url-for-twitter" data-text="Text for twitter" &gt;&lt;/a&gt;</pre>
 </blockquote>

<blockquote>
 <h4>3. Pass options via
 <code>data-*=""</code>
 attributes for whole
 <code>.ssk-group</code>
 </h4>

<p>You can also pass options to parent tag - icon group - therefore each tag will inherit options and you can specify only those who differs.</p>

<pre class="prettyprint">&lt;div class="ssk-group" data-url="http//my-url" data-text="Share text default" &gt;
 &lt;a href="" class="ssk ssk-facebook"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-twitter" data-text="Share text for twitter"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-google-plus"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-pinterest"&gt;&lt;/a&gt;
 &lt;a href="" class="ssk ssk-tumblr" data-media=""&gt;&lt;/a&gt;
&lt;/div></pre>
 </blockquote>

<h3 about="page-header">Events and callbacks</h3>

<p>
 <strong>onBeforeOpen</strong>(targetElement, network, paramsObj). Change <code>paramsObj.networkUrl</code> parameter, to change popup url.
 <br>
 <strong>onOpen</strong>(targetElement, network, networkUrl, popupWindow).
 <br>
 <strong>onClose</strong>(targetElement, network, networkUrl, popupWindow).
 </p>
 <p>For example:</p>
 <pre class="prettyprint lang-js">&lt;script type="text/javascript"&gt;
SocialShareKit.init({
 onBeforeOpen: function(targetElement, network, paramsObj){
 console.log(arguments);
 },
 onOpen: function(targetElement, network, networkUrl, popupWindow){
 console.log(arguments);
 },
 onClose: function(targetElement, network, networkUrl, popupWindow){
 console.log(arguments);
 }
});
&lt;/script&gt;</pre>
 <h3 about="page-header">Twitter callbacks</h3>
 <p>Twitter lets you to define callbacks once user clicks/tweets content in popup.
 <strong>Unfortunately</strong>, the unfriendly to developers provider - Twitter recently
 <a href="https://twittercommunity.com/t/forthcoming-change-to-web-intent-events/54718">changed widget behaviour</a> and now click/tweet events are fired once modal is being open, instead of actual tweet. To enable Twitter callbacks you must follow
 <a href="https://dev.twitter.com/web/javascript/events" target="_blank">Twitter Docs</a>.
 <ol>
 <li>Load/include Twitter widgets file to your page</li>
 <li>Bind to specific events</li>
 <li>Add following URL to twitter link <code>href</code> attribute
 <code>https://twitter.com/intent/tweet</code></li>
 </ol>
 <pre class="prettyprint">&lt;a href="https://twitter.com/intent/tweet" class="ssk ssk-twitter"&gt;&lt;/a&gt;</pre>

Click on following link to see Twitter events below the icon.
 Test here:
 <a href="https://twitter.com/intent/tweet" rel="nofollow" class="ssk ssk-twitter"></a>
 <pre id="twitterEvents"></pre>
 </div>
</div>
 </div>

// Init Social Share Kit
 SocialShareKit.init({
 url: 'http://socialsharekit.com',
 twitter: {
 title: 'Social Share Kit',
 via: 'socialsharekit'
 },
 onBeforeOpen: function(targetElement, network, paramsObj){
 console.log(arguments);
 },
 onOpen: function(targetElement, network, url, popupWindow){
 console.log(arguments);
 },
 onClose: function(targetElement, network, url, popupWindow){
 console.log(arguments);
 }
 });

$(function () {

// Just to disable href for other example icons
 $('.ssk').on('click', function (e) {
 e.preventDefault();
 });

// Navigation collapse on click
 $('.navbar-collapse ul li a:not(.dropdown-toggle)').bind('click', function () {
 $('.navbar-toggle:visible').click();
 });

// Email protection
 $('.author-email').each(function () {
 var a = '@', em = 'support' + a + 'social' + 'sharekit' + '.com', t = $(this);
 t.attr('href', 'mai' + 'lt' + 'o' + ':' + em);
 !t.text() && t.text(em);
 });

// Sticky icons changer
 $('.sticky-changer').click(function (e) {
 e.preventDefault();
 var $link = $(this);
 $('.ssk-sticky').removeClass($link.parent().children().map(function () {
 return $(this).data('cls');
 }).get().join(' ')).addClass($link.data('cls'));
 $link.parent().find('.active').removeClass('active');
 $link.addClass('active').blur();
 });
 });

// This code is required if you want to use Twitter callbacks
 window.twttr = (function (d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0],
 t = window.twttr || {};
 if (d.getElementById(id)) return;
 js = d.createElement(s);
 js.id = id;
 js.src = "https://platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js, fjs);

t._e = [];
 t.ready = function (f) {
 t._e.push(f);
 };

return t;
 }(document, "script", "twitter-wjs"));

// Demo callback
 function twitterDemoCallback(e) {
 $('#twitterEvents').append(e.type + ' ');
 }

// Bind to Twitter events
 twttr.ready(function (tw) {
 tw.events.bind('click', twitterDemoCallback);
 tw.events.bind('tweet', twitterDemoCallback);
 });

</script>

BootstrapTema

Social Share Kit

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0