在 Jekyll 部落格中加入社交媒體分享功能
1. 加入 font awesome 字體
在 _include 目錄的 head.html 中加入字體
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
2. 建立 social-links.html
在 _includes 目錄下建立 soical-links.html 用來存放社交按鈕的 html code
<div id="share-bar">
<h4>Share this:</h4>
<div class="share-buttons">
<!-- facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
return false;"
title="Share on Facebook" >
<i class="fa fa-facebook-official share-button"> facebook</i>
</a>
<!-- twitter -->
<a href="https://twitter.com/intent/tweet?text={{ page.title }}&url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
return false;"
title="Share on Twitter" >
<i class="fa fa-twitter share-button"> twitter</i>
</a>
<!-- google+ -->
<a href="https://plus.google.com/share?url={{ site.url }}{{ site.baseurl }}{{ page.url }}"
onclick="window.open(this.href, 'pop-up', 'left=20,top=20,width=500,height=500,toolbar=1,resizable=0');
return false;"
title="Share on Google+" >
<i class="fa fa-google-plus share-button"> google</i>
</a>
</div>
</div>
如果需要更多的按鈕可以到這裡查詢
http://mycyberuniverse.com/web/social-media-share-bar-jekyll-blog-website.html
3. 自訂按鈕樣式
使用 sass 對按鈕的樣式進行調整 (使用 css 也可以)
/* Share Bar */
#share-bar {
font-size: 16px;
/* Title */
h4 {
margin-bottom: 10px;
font-weight: 500;
}
}
/* All buttons */
.share-buttons {
}
/* Each button */
.share-button {
margin: 0px;
margin-bottom: 10px;
margin-right: 5px;
border: 1px solid #D3D6D2;
padding: 5px 10px 5px 10px;
background: #f2e8f1;
&:hover {
opacity: 1;
color: #ffffff;
}
}
4. 在文章頁面引入按鈕
接着在 _layouts 目錄的 post.html 內引入剛剛建立的 social-links.html
{% include share-links.html %}