JQuery плагин социальных кнопок

JQuery плагин социальных кнопок

JQuery плагин социальных кнопок

JQuery плагин социальных кнопок

JQuery плагин социальных кнопок goodshare.js представляет собой очень легкий плагин на JQuery. Используется для создания различных типов кнопок социальных медиа с использованием HTML5.

Отличное решение реализаций социальных кнопок без использования сторонних сервисов и модулей.

Скачать    |     Демо


Установка кнопок очень простая, создайте произвольную папку на стороне сервиса, скажем  “goodshare”, и загрузите в нее скачанный архив.

Как это использовать:

Подключите стили в секцию head сайта:

<link href="/goodshare/templates/goodshare-color.min.css" rel="stylesheet">

В секцию body подключите jQuery:

<script src="/goodshare/goodshare.js"></script>

Для работы должна быть подключена библиотека jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Параметры HTML5:

<div class="goodshare-color">

<a href="#" class="goodshare" data-type="vk">VK</a>

<a href="#" class="goodshare" data-type="fb">Facebook</a>

<a href="#" class="goodshare" data-type="tw">Twitter</a>

<a href="#" class="goodshare" data-type="lj">LiveJournal</a>

<a href="#" class="goodshare" data-type="ok">OK</a>

<a href="#" class="goodshare" data-type="mr">MR</a>

<a href="#" class="goodshare" data-type="gp">Google+</a>

<a href="#" class="goodshare" data-type="li">LinkedIn</a>

<a href="#" class="goodshare" data-type="tm">tumblr</a>

<a href="#" class="goodshare" data-type="pt">Pinterest</a>

<a href="#" class="goodshare" data-type="bl">Blogger</a>

<a href="#" class="goodshare" data-type="di">Digg</a>

<a href="#" class="goodshare" data-type="en">Evernote</a>

<a href="#" class="goodshare" data-type="yz">YZ</a>

<a href="#" class="goodshare" data-type="rd">Reddit</a>

</div>

Выберите цветовую схему для ваших кнопок социальных кнопок:

<link href="templates/goodshare-color.min.css" rel="stylesheet">

<!-- <link href="templates/goodshare-dark.min.css" rel="stylesheet"> -->

<!-- <link href="templates/goodshare-light.min.css" rel="stylesheet"> -->

<!-- <link href="templates/goodshare-smooth.min.css" rel="stylesheet"> -->

Все параметры:

// social networks & blog platforms

type: 'vk',

// url to share

url:  location.href,

// title to share

title:  document.title,

// image to share

image:  $('meta[property="og:image"][/property="og:image"]').attr('content'),

// text to share

text: $('meta[name="description"][/name="description"]').attr('content')

 

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *