mkg-share
v0.3.2
Published
Easy way to add costumizable social share buttons to website including facebook, twitter, google plus, reddit, pinterest, linkedin, whatsapp, sms and e-mail. It auto detects mobile browsers and displays sms and whatsapp share buttons.
Downloads
11
Maintainers
Readme
mkg-share
Easy way to add costumizable social share buttons to website including facebook, twitter, google plus, reddit, pinterest, linkedin, whatsapp, sms and e-mail. It auto detects mobile browsers and displays sms and whatsapp share buttons.
It's easy to use and pure js. if you prefer native apis, you can use native share buttons with switching one property.
why should i use it?
1 - Social media icons based on inline svg! so you can easly change the visual style (or animate).
2 - No need extra css or other asset files. just require 'mkg-share'.
3 - Costumize share details easly from assigned element's attributes.
4 - You don't need to update for changed social media logos and colors. Just keep up to date.
5 - Used originally brand guides.
6 - Auto detect social media meta datas from page. If it doesn't exist using title and desc meta tag. (hey you can still change from attr)
7 - If you are a front-end developer you can easily build your ui through incoming social share design from your designer.
Views
default view
pane mode
native buttons are also optional
Install
install with npm
npm install mkg-share --save
or install via bower
bower install mkg-share --save
or you can get the latest release of mkg-share from repo
import script file
<script src="mkg-share.min.js"></script>
or just require it
//Commonjs way
var mShare = require('mkg-share');
new mShare('#targetDiv');
//es way
import mShare from 'mkg-share';
new mShare('#targetDiv');
Styling
mshare-item classed item has color property. So you can use it with currentColor
at child nodes. Here there are some example:
custom style sample 1
.mshare__container .mshare--expanded{
.mshare-item{background: transparent; // Eaech custom social share button
.mshare-item-text{color:#aaa;font-weight: bold;margin-left:5px;} // text section of share button
.mshare-item-icon{fill:#aaa;} // icon section of share button => its assigned to svg directly
&:hover{
.mshare-item-text, .mshare-item-icon{color:currentColor;fill:currentColor;}
}
}
}
custom style sample 2
.mshare__container .mshare--expanded{
.mshare-item{background: transparent;border:1px solid currentColor;border-radius: 50%;padding:0;text-align: center;;width:40px;height:40px; // Eaech custom social share button
.mshare-item-text{display:none} // text section of share button
.mshare-item-icon{fill:transparent;stroke:currentColor} // icon section of share button => its assigned to svg directly
&:hover{background: currentColor;
.mshare-item-text, .mshare-item-icon{color:#fff;fill:#fff;}
}
}
}
Usage
expanded share buttons without texts:
new mShare('#demo1',{text:false});
expanded share buttons:
new mShare('#demo2',{});
social share buttons with assigned pane:
new mShare('#demo3',{style:'pane',googleplus:false,reddit:false,pinterest:false});
HTML Layout
<div id="targetElement" class="mshare_container">
<div class="mshare mshare--expanded mshare-nonative">
<a href="#share" class="mshare-item mshare-item--popup mshare-item--facebook">
<svg class="mshare-item-icon">#inlinesvg</svg>
<span class="mshare-item-text">#Text</span>
</a><!-- a social share item -->
...
</div><!-- final content after plugin triggered -->
</div><!-- targeted Element -->
CSS/SCSS Layout
.mshare__container .mshare--expanded{
.mshare-item{ // Eaech custom social share button
.mshare-item-text{} // text section of share button
.mshare-item-icon{} // icon section of share button => its assigned to svg directly
}
}
.mshare__container .mshare--expanded {} /* container of buttons */
.mshare__container .mshare--expanded .mshare-item {} /* Eaech custom social share button */
.mshare__container .mshare--expanded .mshare-item .mshare-item-text {} /* text section of share button */
.mshare__container .mshare--expanded .mshare-item .mshare-item-icon {} /* icon section of share button => its assigned to svg directly */
To do
- add new mode 'sidebar'
- add optional share counts
- add fluid buttons
- add vertical alignment property
License
The code is released under the MIT License.