網站放 Facebook 粉絲專頁、YouTube 訂閱、LINE 加好友按鈕：官方嵌入碼與不拖慢網頁的寫法

很多店家希望網站上直接看得到粉絲專頁、有 YouTube 訂閱按鈕、可以一鍵加 LINE 好友，讓網站的訪客變成長期的粉絲。

三家都有官方的嵌入方式，直接貼上就能用。但我們實測發現：官方嵌入碼會讓網頁一打開就多下載將近 2 MB，就算訪客根本沒捲到那裡。

這篇先整理三種嵌入碼，再教你改成「捲到附近才載入」。

Facebook 粉絲專頁（Page Plugin）

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0"></script>
<div class="fb-page" data-href="https://www.facebook.com/yourpage" data-tabs="timeline" data-width="500" data-height="400"
	data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false" data-lazy="true"></div>

data-href 換成自己粉專的網址。Facebook 開發人員網站的 Page Plugin 頁面也有產生器，填好會直接給你這段。

常用的設定：

• data-tabs：顯示哪些分頁，可以填 timeline（貼文）、events（活動）、messages（訊息），用逗號隔開。訊息分頁要訪客登入 Facebook 才能用，粉專也要開啟訊息按鈕。
• data-width：寬度，最小 180、最大 500 像素，預設 340。
• data-height：高度，最小 70，預設 500。
• data-adapt-container-width：寬度跟著外框調整。只在網頁載入時算一次，之後視窗變大變小不會跟著變。
• data-small-header：用比較小的標題列；data-hide-cover：不顯示封面照片；data-show-facepile：顯示有按讚的朋友大頭貼。
• data-lazy：外掛的 iframe 加上 loading="lazy"，捲到附近才畫出來。

要注意的地方：

• 只有公開、沒有限制的粉專能嵌入。設了國家、年齡限制的粉專，外掛不會顯示。
• 網站上看到的內容，可能和你想的不一樣。 我們用沒有登入 Facebook 的 Chrome 測試，外掛只顯示粉專名稱、追蹤人數、「追蹤粉絲專頁」和「分享」按鈕，貼文沒有出現，高度也只有 131 像素（設定是 400）。放上網站之前，用無痕視窗打開看看，訪客看到的才是這個樣子。
• 舊文章教的 Like Box，早就換成現在的 Page Plugin。網站上的「讚」按鈕（Like Button）和留言外掛，Meta 在 2025 年 11 月宣布 2026 年 2 月 10 日起停止提供，舊網站上的讚按鈕會變成看不見的空白。網路上找到的舊語法不要直接用，已經放了的可以拿掉。

YouTube 訂閱按鈕

<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channelid="UCxxxxxxxxxxxxxxxxxxxxxx" data-layout="default" data-count="default"></div>

• data-channelid：頻道 ID，UC 開頭的一串英數字。登入 YouTube 後，在帳戶的「進階設定」頁面可以看到。舊頻道也可以用 data-channel 填舊的使用者名稱。
• data-layout：default 只有按鈕；full 會加上頻道頭像和名稱。
• data-theme：深色背景用 dark。
• data-count：hidden 不顯示訂閱人數。

我們用 Google Developers 頻道的頻道 ID 實測，default 是紅色的 YouTube 按鈕加上訂閱數；訂閱數很多的頻道，顯示成「999+」，不會顯示實際數字。full 會在按鈕左邊加上頻道頭像。

LINE 加好友按鈕

LINE 最簡單，不用載入任何程式，就是一張圖片加一個連結：

<a href="https://line.me/R/ti/p/%40yourid"><img src="https://scdn.line-apps.com/n/line_add_friends/btn/zh-Hant.png" alt="加入好友" height="36"></a>

• 網址裡的 %40yourid 換成官方帳號的 ID（@ 開頭，網址裡 @ 要寫成 %40）。
• 按鈕圖片和 QR code，LINE 官方帳號的管理後台「增加好友」工具也可以產生。
• 手機點下去會打開 LINE 的加好友畫面；用電腦點，會打開這個官方帳號的網頁介紹頁。

速度：官方嵌入碼一打開就下載將近 2 MB

我們做了兩個測試頁，社群按鈕都放在一大段文章內容下面，訪客要往下捲才看得到：

• A 頁：直接貼上面三段官方嵌入碼（Facebook 有加 data-lazy）
• B 頁：同樣的按鈕，改成捲到附近才載入 Facebook、YouTube 的程式

用 Chrome 打開，還沒往下捲之前：

• A 頁：連到 Facebook、Google、YouTube、LINE 的請求 78 個、約 1.9 MB
• B 頁：1 個、3 KB

捲到底之後，兩頁的按鈕都正常出現，請求數和下載量也差不多。電腦 1280 寬、手機 390 寬的結果一樣。

也就是說：Facebook 的 data-lazy 只延後 iframe，Facebook 和 YouTube 的程式本身還是一打開就下載。大部分訪客不會捲到頁尾，這些下載對他們來說都是浪費。

改成捲到附近才載入

把 A 頁的兩個 <script> 和 <div id="fb-root"> 拿掉，Facebook、YouTube 的 <div> 和 LINE 的連結照樣放，外面包一個 <div class="zw-social">。在頁面最下面加上這段：

<script>
// 社群外掛等訪客捲到附近（前 300px）才載入，首頁、文章一打開不用先下載 Facebook、YouTube 的程式
(function () {
	var box = document.querySelector('.zw-social');
	if (!box) return;
	function add(src) {
		var s = document.createElement('script');
		s.src = src;
		s.async = true;
		s.crossOrigin = 'anonymous';
		document.body.appendChild(s);
	}
	function load() {
		if (box.querySelector('.fb-page')) {
			var root = document.createElement('div');
			root.id = 'fb-root';
			document.body.prepend(root);
			add('https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v26.0');
		}
		if (box.querySelector('.g-ytsubscribe')) {
			add('https://apis.google.com/js/platform.js');
		}
	}
	if (!('IntersectionObserver' in window)) return load();
	var io = new IntersectionObserver(function (entries) {
		if (entries[0].isIntersecting) {
			io.disconnect();
			load();
		}
	}, { rootMargin: '300px' });
	io.observe(box);
})();
</script>

• IntersectionObserver：瀏覽器內建的功能，元素快進到畫面時通知你。rootMargin: '300px' 表示還差 300 像素就開始載入，訪客捲到的時候差不多剛好畫好。
• 有 Facebook 的 <div> 才載入 Facebook 的程式，有 YouTube 的才載入 YouTube 的，只放其中一個也可以用。
• 很舊、不支援 IntersectionObserver 的瀏覽器，直接載入，不會沒有按鈕。
• LINE 的按鈕圖片可以加 loading="lazy"，一樣是捲到附近才下載。

用 WordPress 的話，把整段（<div class="zw-social"> 和 <script>）放進「自訂 HTML」區塊或小工具就可以。

最省的做法：只放連結

其實訪客要追蹤粉專、訂閱頻道，大多會點過去 Facebook、YouTube 再按。只放圖示加連結，完全不用載入第三方程式，速度最快，也不會有外掛顯示不出來的問題。

做法可以參考〈網頁側邊浮動按鈕怎麼做：LINE、電話、回到頂端、分享〉。

延伸閱讀

• 網頁側邊浮動按鈕怎麼做：LINE、電話、回到頂端、分享，純 HTML＋CSS
• iframe 自動適應高度怎麼做？同網域與跨網域的寫法（含 postMessage 範例）
• WordPress 貼網址就能嵌入影片：oEmbed 支援哪些網站、不支援的怎麼辦

正威網路行銷是 25 年經驗的基隆網頁設計工作室，網站和粉專、LINE 官方帳號怎麼串在一起，台北與全台客戶都歡迎來聊聊。