Photo by George Pagan III on Unsplash
外掛下載位置:
https://github.com/it-monk-team/Wordpress-Line-FB-Twitter-share
成果預覽:
前幾天，一個朋友貼了一篇文章給我
連結 : 用原生JavaScript寫一組社群分享按鈕(FB、LINE、Twitter)
他說他測了半天，怎麼樣也試不出一樣的結果。所以我這邊就做了一個簡單的外掛附上教學，並告訴大家問題的癥結點。
首先，這是一篇很棒的文章。我的外掛 99% 是基於這篇文章的基礎上進行開發。
先附上原教學文的原始碼:
<style>
.js-social-share {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 0;
line-height: 1;
list-style: none;
}
.js-social-share li {
padding-right: 1rem;
height: 22px;
}
</style>
<script>
var el = document.querySelector('.entry-content');
var notIndex = location.pathname !== '/';
var notCategory = location.pathname.indexOf('category') === -1;
var notTag = location.pathname.indexOf('tag') === -1;
// 載入JS檔
function appendJS(src) {
var script = document.createElement("script");
script.src = src;
document.head.appendChild(script);
}
if(el && notIndex && notCategory && notTag) {
var currentUri = document.querySelector('[rel="canonical"]').href;
var fbBtn = '<div class="fb-like" data-href="' + currentUri + '" data-layout="button_count" data-action="like" data-size="small" data-share="true"></div>';
var lineBtn = '<div class="line-it-button" data-lang="zh_Hant" data-type="share-a" data-ver="3" data-url="' + currentUri + '" data-color="default" data-size="small" data-count="true" style="display: none;"></div>';
var twitterBtn = '<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>';
var socialHTML = '<ul class="js-social-share">' +
'<li>' + fbBtn + '</li>' +
'<li>' + lineBtn + '</li>' +
'<li>' + twitterBtn + '</li>' +
'</ul>';
el.insertAdjacentHTML('beforebegin', socialHTML);
if(document.querySelector('.sharedaddy')) {
var originShare = document.querySelector('.sharedaddy');
originShare.insertAdjacentHTML('beforebegin', socialHTML);
}
appendJS('https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js');
appendJS('https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.0');
appendJS('https://platform.twitter.com/widgets.js');
}
</script>幾個重點點出造成大家失敗的可能原因。
var el = document.querySelector('.entry-content');var originShare = document.querySelector('.sharedaddy');上面這兩行是選取頁面上 class 包含 entry-content 和 sharedaddy 的標籤，不過不是每個佈景主題的命名方式都一樣，缺乏這個元件的情形下會造成沒有執行任何動作。
var currentUri = document.querySelector('[rel="canonical"]').href;這行是要取得當前網址，在他的文章也說明了，這是必須安裝和他相同外掛才有可能取得的原件。大概就是以上兩點造成你貼上去無法使用。
其實這裡直接用 window.location.href 就能取得當前的網址。
var notIndex = location.pathname !== '/';
var notCategory = location.pathname.indexOf('category') === -1;
var notTag = location.pathname.indexOf('tag') === -1;
if(el && notIndex && notCategory && notTag) {
.............
}這裡的判斷式也有點可惜。他用網址來判斷現在是不是文章頁面。
這樣只要你的文章網址包含這兩個關鍵字，也會造成這段 code 沒有效果。
他用的是純 js 來解決這些問題，其實已經算是非常厲害了。因為隨著佈景主題的不同，載缺乏先天支援下，前端很多外在的變化必須要做調整。
如果搭配 PHP 做成外掛就單純很多了。
以下是外掛內容，最後有我的說明。
WordPress-Line-FB-Twitter-share.php
/*
Plugin Name: 超輕量FB LINE TWITTER 分享外掛
Plugin URI: https://github.com/it-monk-team/Wordpress-Line-FB-Twitter-share
Description: 超輕量FB LINE TWITTER 分享外掛
Version: 1.0
Author: it-monk
Author URI: https://it-monk.com/
License: MIT
*/
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles',20 );
function enqueue_parent_styles() {
wp_enqueue_script('line-share', 'https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js');
wp_enqueue_script('fb-share', 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.0');
wp_enqueue_script('twitter-share', 'https://platform.twitter.com/widgets.js');
}
add_filter( 'the_content', 'place_share_button_after_content',1 );
function place_share_button_after_content($content){
// WP 內判斷是否為 單篇內容
if( is_single() ){
// 取得文章網址
$PostUrl = get_permalink();
// 在文章內容最後面加一個 share-btn-here 的 div 準備放按鈕
$content.= "<ul class=\"js-social-share\">";
$content.= "<li class=\"fb\">"."<div class=\"fb-like\" data-href=\"".$PostUrl."\" data-layout=\"button_count\" data-action=\"like\" data-size=\"small\" data-share=\"true\"></div>"."</li>";
$content.= "<li>"."<div class=\"line-it-button\" data-lang=\"zh_Hant\" data-type=\"share-a\" data-ver=\"3\" data-url=\"".$PostUrl."\" data-color=\"default\" data-size=\"small\" data-count=\"true\" style=\"display: none;\"></div>"."</li>";
$content.= "<li>"."<a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>"."</li>";
$content.= "</ul>";
}
return $content;
}
add_action( 'wp_head', 'lite_share_btn_list_style',1 );
function lite_share_btn_list_style()
{
// WP 內判斷是否為 單篇內容
if( is_single() ):
// 取得文章網址
$PostUrl = get_permalink();
?>
<style>
.js-social-share {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 0;
line-height: 1;
list-style: none;
}
.js-social-share li {
margin-right: 1rem;
height: 22px;
}
.js-social-share li.fb {
width: 110px;
}
</style>
<?php
endif;
}讀取 js 檔案的部分直接寫到 wp_head hook 裡面。直接在產生原始碼的同時就匯入。
這邊都是使用 WP Hook 來決定 code 出現的位置。
有興趣可閱讀這篇文章:
WordPress的Hook機制與原理
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles',20 );
function enqueue_parent_styles() {
wp_enqueue_script('line-share', 'https://d.line-scdn.net/r/web/social-plugin/js/thirdparty/loader.min.js');
wp_enqueue_script('fb-share', 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.0');
wp_enqueue_script('twitter-share', 'https://platform.twitter.com/widgets.js');
}直接在文章內容的最後面加入分享的按鈕。
add_filter( 'the_content', 'place_share_button_after_content',1 );
function place_share_button_after_content($content){
// WP 內判斷是否為 單篇內容
if( is_single() ){
// 取得文章網址
$PostUrl = get_permalink();
// 把按鈕直接放在文章內容的最後面輸出
$content.= "<ul class=\"js-social-share\">";
$content.= "<li class=\"fb\">"."<div class=\"fb-like\" data-href=\"".$PostUrl."\" data-layout=\"button_count\" data-action=\"like\" data-size=\"small\" data-share=\"true\"></div>"."</li>";
$content.= "<li>"."<div class=\"line-it-button\" data-lang=\"zh_Hant\" data-type=\"share-a\" data-ver=\"3\" data-url=\"".$PostUrl."\" data-color=\"default\" data-size=\"small\" data-count=\"true\" style=\"display: none;\"></div>"."</li>";
$content.= "<li>"."<a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>"."</li>";
$content.= "</ul>";
}
return $content;
}在 head 把 css 的內容加上
add_action( 'wp_head', 'lite_share_btn_list_style',1 );
function lite_share_btn_list_style()
{
// WP 內判斷是否為 單篇內容
if( is_single() ):
// 取得文章網址
$PostUrl = get_permalink();
?>
<style>
.js-social-share {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 0;
line-height: 1;
list-style: none;
}
.js-social-share li {
margin-right: 1rem;
height: 22px;
}
.js-social-share li.fb {
width: 110px;
}
</style>
<?php
endif;
}好像寫了好多，其實就直接上傳到 WP 的外掛安裝就可以用了。附上外掛連結:
https://github.com/it-monk-team/Wordpress-Line-FB-Twitter-share
