欣迪Avatar

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

訂閱 IT-Monk

訂閱最新文章的發布消息! 😚😚😚

作者介紹 - 欣迪

欣迪

從設計到寫程式,發現自己有追求前端技巧的自虐傾向。不斷的踩坑,再從坑裡爬出來,慢慢對攀岩有點心得。 目前在多間公司擔任網站設計顧問。 同時也是網站架設公司負責人。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *