RWD版本Share Button分享功能（LINE、Facebook、Twitter、LinkedIn、Google+）懶人包（Wordpress和Blogger可用）

,

這組分享按鈕包含了原生的LINE、Facebook、Twitter、LinkedIn、Google+的分享功能，而且是RWD的唷！

怎麼用呢？不囉嗦！直接把本文下面的原始碼複製，貼上到Wordpress或Blogger的小工具（Widget）就可以用了，簡單吧？

對了，雖然我標題只寫了Wordpress和Blogger可用，但理論上所有網站只要可以給你貼Html、CSS、JS的話都可以用。



<!--RWD shareButton Made By chodaict Start-->
<style>
.shareButton{
   position: fixed;
    left: 1%;
    bottom: 50%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-content: space-between;
}

.allShareBtn{
position: relative; float: left; display: block;
}
.shareLine{
margin: -8px 5px 0px 5px;"
}
.shareFacebook{
margin: -10px 5px 10px 5px;
}
.shareTwitter{
margin: -2px 5px 0px 5px;
}
.shareLinkedIn{
margin: -2px 5px 0px 5px;
}
.shareGPlus{
margin: -5px 5px 0px 5px;
}

@media only screen and (max-width:979px){
.shareButton{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-top: 14px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: inherit;
}
.allShareBtn{
position: relative; float: left; display: inline-block;
}
.shareLine{
margin: -8px 5px 0px 5px;"
}
.shareFacebook{
margin: -10px 5px 0px 5px;
}
.shareTwitter{
margin: -2px 5px 0px 5px;
}
.shareLinkedIn{
margin: -2px 5px 0px 5px;
}
.shareGPlus{
margin: -5px 5px 0px 5px;
}
}
</style>

<div class="shareButton">

<!--LineStart-->
<span class="allShareBtn shareLine">
<script type="text/javascript" src="//media.line.me/js/line-button.js?v=20140411" ></script>
<script type="text/javascript">
new media_line_me.LineButton({"pc":false,"lang":"zh-hant","type":"a"});
</script>
</span>
<!--LineEnd-->

<!--FacebookStart-->
<span class="allShareBtn shareFacebook">
<div class="fb-share-button" data-href="" data-layout="button"></div>
</span>
<!--FacebookEND-->

<!--TwitterStart-->
<span class="allShareBtn shareTwitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="silkah">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</span>
<!--TwitterEnd-->

<!--LinkedInStart-->
<span class="allShareBtn shareLinkedIn">
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: zh-TW</script>
<script type="IN/Share"></script>
</span>
<!--LinkedInEnd-->

<!--G+Start-->
<span class="allShareBtn shareGPlus">
<script src="https://apis.google.com/js/platform.js" async defer>
  {lang: 'zh-TW'}
</script>
<div class="g-plusone" data-annotation="none"></div>
</span>
<!--G+End-->

</div>
<!--RWD shareButton Made By chodaict END-->
有任何問題可以留言，喜歡的話也請儘管拿去用XD
comments powered by Disqus