FB模組

「讚」按鈕「分享」按鈕內嵌貼文(一) 內嵌貼文(二) 內嵌影片留言版

範例網址：https://developers.facebook.com/docs/plugins/like-button#configurator

步驟一二三：

1. 調整「讚」按鈕的設定，如：貼上按讚的網址 ( PChome 24h購物粉絲團

https://zh-tw.facebook.com/pchome24h/

) 於欄位。

2. 點擊「Get Code」(取得代碼) 按鈕，產生您的「讚」按鈕程式碼。

3. 複製並貼上該程式碼片段，然後貼至目標網站的 HTML。

Iframe作法：(貼於<body>...</body>內)

JavaScrip作法：

第一段 ( 貼於<body>...</body>內 )

<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.7"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

第二段 ( 貼於想出現的地方，在<body>...</body>內 )

此段CODE必須要上線才會運作。

範例網址：https://developers.facebook.com/docs/plugins/share-button#configurator

步驟一二三：

1. 調整「分享」按鈕的設定，如：貼上欲分享的網址 ( PChome 24h購物粉絲團

https://zh-tw.facebook.com/pchome24h/

) 於欄位。

2. 點擊「Get Code」(取得代碼) 按鈕，產生您的「分享」按鈕程式碼。

3. 複製並貼上該程式碼片段，然後貼至目標網站的 HTML。

Iframe作法：(貼於<body>...</body>內)

JavaScrip作法：

第一段 ( 貼於<body>...</body>內 )

<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.7&appId=1564395773792996"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

第二段 ( 貼於想出現的地方，在<body>...</body>內 )

<div class="fb-video" data-href="https://www.facebook.com/pchome24h/videos/1292559004088235/" data-width="500" data-show-text="false"><blockquote cite="https://www.facebook.com/pchome24h/videos/1292559004088235/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/pchome24h/videos/1292559004088235/">BAUBAX飛行外套搶先開賣！</a><p>◤BAUBAX飛行外套搶先開賣！◢ 號稱地表最強☛http://bit.ly/2cdxfMt　小編今天告訴你什麼叫做有了他抵一個男友!! ✔功能超多！有15項最強獨特功能！ ✔一件OK！旅行/出差/上班 ALL-IN-ONE 揭開15項功能秘密！首賣$6980起台灣限量！24h購物正式開賣！看到快買！</p>由 <a href="https://www.facebook.com/pchome24h/">PChome 24h購物</a>貼上了 2016年9月10日</blockquote ></div>

此段CODE必須要上線才會運作。

範例網址：https://developers.facebook.com/docs/plugins/embedded-posts

步驟一二三：

1. 調整「內嵌貼文」的設定，如：貼上欲分享貼文的網址 ( PChome 24h購物粉絲團貼文

https://www.facebook.com/pchome24h/posts/1290941860916616

) 於欄位。

2. 點擊「Get Code」(取得代碼) 按鈕，產生您的「內嵌貼文」程式碼。

3. 複製並貼上該程式碼片段，然後貼至目標網站的 HTML。

Iframe作法：(貼於<body>...</body>內)

JavaScrip作法：

第一段 ( 貼於<body>...</body>內 )

<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.7&appId=1564395773792996"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

第二段 ( 貼於想出現的地方，在<body>...</body>內 )

<div class="fb-post" data-href="https://www.facebook.com/pchome24h/posts/1290941860916616" data-width="932" data-show-text="true"><blockquote cite="https://www.facebook.com/pchome24h/posts/1290941860916616" class="fb-xfbml-parse-ignore"><p>【CANON EOS 5D新機現貨開賣囉!】眾所期待已久，千呼萬喚終於隆重登場!! CANON EOS 5D Mark IV全幅新機現貨開賣!! 單機身$107,900，24-70 KIT組$132,900 首購登錄再送原廠鋰電池等好禮，限量搶購中!! >>>http://bit.ly/2cg0PlV</p>由 <a href="https://www.facebook.com/pchome24h/">PChome 24h購物</a>貼上了 <a href="https://www.facebook.com/pchome24h/posts/1290941860916616">2016年9月9日</a></blockquote></div>

此段CODE必須要上線才會運作。

範例網址：https://developers.facebook.com/docs/plugins/embedded-comments

步驟一二三：

1. 調整「內嵌留言」的設定，如：貼上欲分享貼文的網址 ( PChome 24h購物粉絲團貼文的留言網址

https://www.facebook.com/pchome24h/videos/1295175433826592/?comment_id=1295195577157911&comment_tracking=%7B%22tn%22%3A%22R9%22%7D

) 於欄位。

2. 點擊「Get Code」(取得代碼) 按鈕，產生您的「內嵌留言」程式碼。

3. 複製並貼上該程式碼片段，然後貼至目標網站的 HTML。

Iframe作法：(貼於<body>...</body>內)

JavaScrip作法：

第一段 ( 貼於<body>...</body>內 )

<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.7&appId=1564395773792996"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

第二段 ( 貼於想出現的地方，在<body>...</body>內 )

此段CODE必須要上線才會運作。

範例網址：https://developers.facebook.com/docs/plugins/embedded-video-player#configurator

步驟一二三：

1. 調整「內嵌影片」的設定，如：貼上欲分享貼文的網址 ( PChome 24h購物粉絲團影片

https://www.facebook.com/pchome24h/videos/1292559004088235/

) 於欄位。

2. 點擊「Get Code」(取得代碼) 按鈕，產生您的「內嵌影片」程式碼。

3. 複製並貼上該程式碼片段，然後貼至目標網站的 HTML。

Iframe作法：(貼於<body>...</body>內)

JavaScrip作法：

第一段 ( 貼於<body>...</body>內 )

<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.7&appId=1564395773792996"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

第二段 ( 貼於想出現的地方，在<body>...</body>內 )

此段CODE必須要上線才會運作。

範例網址：https://developers.facebook.com/docs/plugins/comments#configurator

步驟一二三：

1. 調整「留言」的設定，如：貼上欲分享貼文的網址 ( PChome 24h購物粉絲團連結

https://zh-tw.facebook.com/pchome24h/

) 於欄位。

2. 點擊「Get Code」(取得代碼) 按鈕，產生您的「留言」程式碼。

3. 複製並貼上該程式碼片段，然後貼至目標網站的 HTML。

Iframe作法：(貼於<body>...</body>內)

這個外掛程式不支援這種類型的嵌入。請使用 JavaScript SDK 和 XFBML 或 HTML5 實作。

JavaScrip作法：

第一段 ( 貼於<body>...</body>內 )

<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 = "//connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v2.7"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>

第二段 ( 貼於想出現的地方，在<body>...</body>內 )

此段CODE必須要上線才會運作。