Кнопка «Поделиться в социальных сетях»

Заголовок: Кнопка «Поделиться в социальных сетях»

Выравнивание заголовка: по центру

Кнопка «Поделиться в социальных сетях» поможет легко и удобно создавать кнопки для публикации на сайтах социальных сетей. В настоящее время поддерживаются следующие социальные сети, и список продолжает расти:

• 微博;
• 百度贴吧;
• QQ;
• QQ空间;
• 豆瓣;
• Facebook;
• Twitter.

По умолчанию поддерживается пять тем: square, circle, dark-square, dark-circle и default. Тема default не требует настройки параметра theme.

Конечно, вы можете настроить тему самостоятельно. На узле контейнера автоматически добавляются классы social-share-button и social-share-button-тема. Вы можете использовать эти классы для переопределения или расширения стилей.

Поддерживаемые сайты:

• 微博;
• 百度贴吧;
• QQ;
• QQ空间;
• 豆瓣;
• Facebook;
• Twitter.

Темы:

1. По умолчанию:
2. Квадратная тема:
3. Круглая тема:
4. Тёмная квадратная тема:
5. Тёмная круглая тема:

Установка

Поддерживаются три способа установки:

1. Через NPM/Yarn:

$ npm install social-share-button.js --save

Если вы используете yarn, то:

$ yarn add social-share-button.js

2. Через тег script: Скачайте файлы social-share.min.js и social-share.min.css из папки dist этого проекта и скопируйте их в свой проект. Затем добавьте ссылки на эти файлы через теги script и link.

Основное использование

Быстрый старт

import SocialShare from 'social-share-button.js'; // Если вы используете тег script, этот шаг не требуется

new SocialShare('.social-share-container');

Переключение темы

new SocialShare('.social-share-container', {
    theme: 'square'
});

Настройка параметров общего доступа

new SocialShare('.social-share-container', {

    // Определение общих параметров общего доступа
    title: '百度搜索',
    url: 'http://www.baidu.com',
    summary: 'Один китайский поисковый сайт',
    image: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png',

    // Отдельная настройка параметров общего доступа для Weibo, остальные параметры аналогичны
    weibo: {
        title: '网易',
        url: 'http://www.qq.com',
        summary: '网易门户',
        image: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png'
    }
});

Отключение определённых кнопок

new SocialShare('.social-share-container', {
    facebook: false,
    twitter: false
});

Дополнительные примеры см. в разделе examples.

Лицензия

Лицензия MIT