Day 23 在網頁中插入facebook外掛程式

2024 iThome 鐵人賽

DAY 23

自我挑戰組

從零開始的ＨＴＭＬ系列第 23 篇

16th鐵人賽

s_c_o_t_t

團隊iT 貓貓教

2024-09-03 23:17:29

171 瀏覽

分享至

在網頁製作中，插入Facebook外掛程式能讓網站嵌入Facebook的功能，如粉絲專頁、評論、或分享按鈕。首先，需要訪問Facebook for Developers網站，找到“Social Plugins”部分，選擇所需的外掛程式，如“Page Plugin”。選定後，根據要求設定寬度、高度等參數，Facebook會自動生成一段HTML代碼。

接下來，將生成的HTML代碼插入到網站的適當位置。通常是使用<div>標籤將外掛包裹起來，這段代碼包含一個<iframe>或<div>元素來嵌入Facebook的功能。需要注意的是，有些外掛程式可能需要在HTML文件的<head>標籤中包含Facebook SDK（Software Development Kit）的JavaScript代碼，以保證外掛程式正常運行。

以下是一個插入Facebook粉絲專頁的簡單範例：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Facebook 外掛範例</title>
</head>
<body>
    <div id="fb-root"></div>
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v13.0"></script>
    
    <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
        <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
            <a href="https://www.facebook.com/facebook">Facebook</a>
        </blockquote>
    </div>
</body>
</html>