社交附加程式

群組附加程式

群組附加程式可讓用戶透過網頁中的連結瀏覽您的 Facebook 群組。

網頁群組附加程式

網頁群組附加程式可讓您在網頁中加入「瀏覽群組」按鈕，以便在用戶點擊此按鈕時將其重新導向至您的 Facebook 群組。此附加程式使用 Facebook JavaScript SDK 來在您的網頁展示按鈕。

準備工作

如要在網頁中內嵌群組附加程式，您需要準備以下事項：

限制

  • 網頁群組附加程式碼只能在網頁中使用

取得程式碼

如欲取得「瀏覽」按鈕的程式碼以內嵌到網頁中，您將需要使用程式碼配置工具。

第 1 步：將網址替換為 Facebook 群組的網址。

第 2 步：更新「瀏覽群組」按鈕的像素寬度。

第 3 步：若要在按鈕程式碼中加入其他資訊，則加入中繼資料。

第 4 步：點擊「取得程式碼」。

程式碼配置工具

There is something wrong with the configurator

第 5 步：複製 HTML 程式碼片段，並貼至您想顯示按鈕的網頁當中。

附加程式屬性

以下是可用於網頁群組附加程式的所有設定。

屬性說明

data-href

Facebook 群組的網址

data-show-metadata

顯示 Facebook 群組的中繼資料，例如說明

data-lazy

預設為 true 或 false。在設為 true 時，如果用戶可能不會看到此附加程式，例如附加程式並非靠近檢視區域，則瀏覽器不會顯示附加程式

data-width

以像素為單位的附加程式寬度。預設為 280。寬度下限為 180 像素，上限為 500 像素

data-skin

附加程式內容的顏色主題。支援的選項如下：

  • light：附加程式會以暗色文字顯示，此為預設值
  • dark：附加程式會以白色文字顯示

程式碼範例

如您不想使用程式碼配置工具，可以複製以下程式碼並貼至您的網頁中。請將以下的內容換成您自己的值：

  • 在 js.src 網址中，將 LATEST-API-VERSION 換成您應用程式在使用的 Graph API 版本
  • 在 js.src 網址中，將 APP-ID 換成您應用程式的 Meta 應用程式編號
  • 在 data-href，將 GROUP-URL 換成您 Facebook 群組的網址 
<html>

<head>
    <!-- Load Facebook SDK for JavaScript -->
    <div id="fb-root"></div>
    <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s);
            js.id = id;
            js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=LATEST-API-VERSION&appId=APP-ID&autoLogAppEvents=1';
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
</head>

<body>

    <!--Your Group Plugin for the Web code-->
    <div class="fb-group" 
         data-href="GROUP-URL" 
         data-width="280" 
         data-show-metadata="false">
    </div>

</body>

</html>

另請參閱