最近一股腦的非常流行臉書直播投票，這到底是怎麼做的呢？廢話不多說，我們就直接上教學！
運作原理解釋
這邊稍微解釋一下其運作的原理，簡單來講就是讓直播軟體 OBS 讀取一個電腦上的網頁檔案，這個網頁檔案會撈取直播文章的按讚紀錄，進而直接統計數字顯示在網頁上，這樣子就可以直播時進行按讚的統計。
事前下載準備
下載投票網頁包
目前有國外網站已經整理好了安裝包，但是小編這邊的教學有修改一些地方，所以請下載小編這個修改後的網頁包。
下載OBS Studio
載點：https://obsproject.com/download
我知道很多人習慣使用 OBS Classic，但是讀取網頁的功能目前只有 OBS Studio 有，請下載安裝好它。
下載Pinegrow Web Editor
這個是圖像化的網頁編輯器，主要是拿來編輯投票頁面，如果你有慣用的軟體就不太需要我教了。如果你毫無網頁編輯的概念的話，請下載這套來使用。
↑進去後先點選這個按鈕
↑接著依照自己的作業系統來選擇要下載的版本。
粉絲團直播
剛剛我們有提到說，其概念是由網頁來撈取 Facebook 直播影片的按讚資料，為了讓網頁可以正確地知道撈取哪篇文章，所以我們會需要寫入貼文的「POST ID」，還有取得 Facebook 撈取資料權限的「App Token」或者是「存取權杖」（粉絲頁直播使用 App Token，個人頁直播使用存取權杖。）以下我們本段就先以取得 App Token 的方式來進行示範。
加入Facebook For Developers
Step 01：為了要取得 App Token，我們必須要先加入「Facebook For Developers」註冊成為開發人員。在登入 Facebook 的狀態下，進入到 App Token 的網頁內，點選右上角的登入。
Step 02：接著請勾選是之後，點選右下角的註冊
Step 03：看到這個畫面時，代表你註冊成功了。
Step 04：接著點選畫面上方的「工具與支援」
Step 05：接著點選「Access Token Tool」
Step 06：它會告訴你沒有建立應用程式，我們就先建立一個新的應用程式，點選紅框內的「製作新應用程式」。
Step 07：切換頁面後，先點選綠色的「製作新應用程式」的按鈕，然後在跳出的視窗中，隨便打入一個顯示名稱與隨便選擇一個類別，接著點選右下角的「建立」來完成設定。
Step 08：接下來你會進入到應用程式的頁面，不用理他，在點選右上角的「工具與支援」。
Step 09：回到這個頁面後，再點選「Access Token Tool」
Step 10：接著你就可以看到在 App Token 這邊顯示一串文字，如果你是要用粉絲團來進行投票直播的話，就先保留好這個頁面等等使用。
個人頁直播
如果你是要用個人頁直播的話，方法跟上面一樣，只是要再多做一些事情，我們還是從最開始的地方進行。
Step 01：為了要取得 App Token，我們必須要先加入「Facebook For Developers」註冊成為開發人員。在登入 Facebook 的狀態下，進入到 App Token 的網頁內，點選右上角的登入。
Step 02：接著請勾選是之後，點選右下角的註冊
Step 03：看到這個畫面時，代表你註冊成功了。
Step 04：接著點選畫面上方的「工具與支援」
Step 05：接著點選「Access Token Tool」
Step 06：它會告訴你沒有建立應用程式，我們就先建立一個新的應用程式，點選紅框內的「製作新應用程式」。
Step 07：切換頁面後，先點選綠色的「製作新應用程式」的按鈕，然後在跳出的視窗中，隨便打入一個顯示名稱與隨便選擇一個類別，接著點選右下角的「建立」來完成設定。
Step 08：接下來你會進入到應用程式的頁面，不用理他，在點選右上角的「工具與支援」。
Step 09：注意喔，從這裡開始就不一樣了，回到這個頁面後，點選「 Graph API Explorer」
Step 10：進入後，在紅框內的下拉式選單中，選擇「Get User Access Token」
Step 11：接著在跳出的視窗中，勾選「user_posts」後，點選右下角的「Get Access Token」
Step 12：接著他會跟你請求授權，就把授權給它吧
Step 13：接著你就會看到紅框內「存取權杖」後面的亂數，就是我們在個人頁上面進行投票直播所需要用到的參數，如果你要在個人頁上進行的話，就要保留這串亂數喔。
網頁輸入App Token（存取權杖）
Step 01：接著打開你安裝好的Pinegrow Web Editor，或者是任何你慣用的編輯器，以下我們還是以 Pinegrow Web Editor 來做示範。打開後點選「Open File」
Step 02：接著在瀏覽介面中，找到網頁包裡面的「index.html」，選擇它開啟。
Step 03：開啟之後，你會看到這樣的畫面，不用擔心綠色的有問題，請直接按鍵盤的「Ctrl+E」。
Step 04：他會先跳出一個視窗，請點選右下角的OK
Step 05：接著會跳出原始碼視窗，不用緊張，點選畫面後按Ctrl+F。
Step 06：接著在左上角的地方輸入「access_token」，然後按下鍵盤上的 Enter，你會找到 「access_token」的位置。
Step 07：這邊稍微解釋一下，在紅框處「ACCESS_TOKEN_HERE」是讓你貼你的APP TOKEN（粉絲頁直播）或者是存取權杖（個人頁直播）的數值，請記得複製貼上後，前後的「’」要保留下來喔。我們這邊先貼上 access_token 的數值，POSTID是要直播後才能進行修改的。
Step 08：修改完畢後就按 CTRL+S 來進行存檔，接著會跳出一個視窗，同樣的按右下角的OK確定。
Step 09：接著你就會回到原本的畫面，再按一次 Ctrl+E 來關閉原始碼視窗。
簡易物件位置調整
到這我們先輸入完了 access_token 的數值，接著我們要來進行版面簡易的調整，由於許多人都不會 HTML 跟 CSS，所以小編的調整法是用最基本的方式，只保留六個投票的表情符號與數值位置，剩下的都是在 OBS 的介面上再進行調整。
Step 01：首先我們先移除原本的 LOGO 圖片，再畫面上點選圖片後，會出現一個小的工具列，點選垃圾桶的圖案來進行
Step 02：接著刪除中央的文字，在畫面中點選兩下後，全選全部文字後按下鍵盤上的Del刪除文字，順便多打幾個Enter（請保留文字區塊，留待後面排版用）。
Step 03：接著要來決定六個表情圖案的位置與順序，如果你是希望他像下圖這樣上面三個，下面三個的話。把滑鼠移到右邊的區塊上，找到「Body」底下的「H1」。
Step 04：這邊稍微解釋一下，這裡面有六組「div」的資料夾，這分別代表著六個表情符號，h1 底下的br 代表的是你剛剛打入的Enter數量。我們希望介面上上面要有三個表情符號、下面要有三個表情符號的話，就必須要用H1 來隔開他們。我們把H1 移動到第三組與第四組的div中間，記得位置不要放錯喔。
Step 05：如果你是希望六個表情符號在上面或者是在中間的話，就是把 H1 拉到最下面。
Step 06：如果你要調整表情符號的順序的話，就是移動整組的Div。
Step 07：如果你只要保留特定的表情符號的話，就是直接在左邊的視窗中，點選刪除整組符號配置。（然後建議這邊另存新檔）
Step 08：接著修改好你要的版型後，就先存檔，然後先別關閉程式。
OBS設定
網頁進行好設定後，接著打開你的 OBS Studio，開始來進行串流直播碼取得與設定的部分。
粉絲頁直播
Step01：進入到自己粉絲團的管理頁面後，點選上方工具列的「發佈工具」
Step02：點選左邊的「直播影片」，接著點選右邊的「新增」
Step03：接著你會看到建立直播視訊的視窗，先別管他，直接點選右下角的預覽
Step04：點選預覽後，會跳出一個浮動視窗，直接點選到「進階」，將伺服器網址與串流金鑰複製起來。
Step05：打開OBS的工具列的檔案，選擇設定，將「串流」的選項選擇「Facebook Live」，接著將剛剛複製的伺服器網址貼到「FMS URL」的格子上，將串流金鑰貼到「播放路徑/串流碼」上，都貼上後就按下確定。
設定的部份我們就先做到這，等等還要進行其他的設定。
個人頁使用電腦直播
上面所講的是使用電腦在粉絲團直播的功能，但是其實根據網路上的高手與我們家工程師的研究下，這個新的Live API其實已經完全開放了，只是沒有把功能的選項給做出來，如果想要在個人頁、社團上面進行直播的話，就用電腦瀏覽器點選文章下方的「Facebook 電腦版直播功能請點我」，並且選擇你想要直播的地方，接下來的動作就跟上面粉絲團直播的設定一樣囉。（使用前記得要關閉Adblock功能，以及讓流覽器同意彈跳視窗。）
Facebook 電腦版直播功能請點我
Step01：點開上面的按鈕後，會跳出一個網頁，請選擇你要直播的地方
Step02：選擇完畢後，請點選右下角的「繼續」
Step03：接著你就會看到跟粉絲團直播一樣的設定畫面。
Step04：請點選進階取得你的直播伺服器與直播金鑰，將這兩者填入你的直播軟體OBS的設定中。接下來的動作就跟上面是一樣的。
Step05：打開OBS的工具列的檔案，選擇設定，將「串流」的選項選擇「Facebook Live」，接著將剛剛複製的伺服器網址貼到「FMS URL」的格子上，將串流金鑰貼到「播放路徑/串流碼」上，都貼上後就按下確定。
設定的部份我們就先做到這，等等還要進行其他的設定。
OBS 版面設定&投票網頁的嵌入
Step 01：接下來就要進入直播版型的設定，我們先在「來源」的地方按下滑鼠右鍵，選擇「新增」、「BrowserSource」
Step 02：跳出的視窗就隨便取個名字。取完後按確定。
Step 03：接下來先勾選「Local file」
Step 04：接著上面的區塊就會跑出畫面，然後在點選右邊的「瀏覽」。找到我們修改好的 index.html 檔
Step 05：接著寬度與高度的部分先設定標準的 1280*720。輸入完畢後點選右下角的確定。
Step 06：此時你會看到畫面上跑出一個綠色的區塊，上面有六個表情符號，配置上或許你會跟我不同，就看你在網頁介面那邊是怎麼設計的。接著就點選綠色畫面的右下角紅色圓圈處來拖曳拉大畫面。
Step 07：接著在綠色畫面上點選滑鼠右鍵，選擇「濾鏡」
Step 08：在這個視窗中，我們在點選滑鼠右鍵，選擇「新增」、「色彩鍵」
Step 09：濾鏡名稱就隨便填寫一個吧
Step 10：接著再下方的區塊中，移動相似性的調整鈕。
Step 11：調整到怎樣的程度呢？就讓畫面的綠色消失即可，小編習慣是輸入到 700，讓邊緣的綠色也消失。這樣子設定後，就只會保留表情符號投票的選項在頁面上，其他部分都是透明的。
Step 12：接下來你就可以依照一般 OBS的設定，在上面看是要新增圖片、影片、還是文字都可以。
Step 13：其實這邊要講的是，如果網頁的寬度設定不一樣的話，在介面上按鈕的寬度與配置也會有所差別。你可以依照你的需求來進行調整。
Step 14：甚至你也可以依照你的需求來進行移動網頁的顯示部分，讓他只顯示出你要的地方。
Step 15：最後你一切都設定好之後，就按下右邊的開始串流來把畫面訊號送出。
Step 16：Facebook 那邊的頁面收到直播訊號後，你就點選右下角的「直播」來送出訊號。
設定貼文ID
訊號送出後，就剩下最後一個步驟，我們要把 Facebook 直播貼文的ID寫入網頁中。抓取ID的方法很簡單，就是點選直播貼文的「時間」，當你切換到直播貼文的「專屬頁面」
它的網址格是一定是「https://www.facebook.com/[你的粉絲團或個人頁ID]/videos/XXXXXXXXXXXXXXXXXX/」XXXX部分的數字就是POST ID
你只要複製好這段ID，切換回Pinegrow Web Editor中，把它貼到原始碼裡面「POSTID」（下圖綠色框框處）的部分後，就可以存檔了。
此時你在切換回 OBS ，在來源的區塊中，找到你讀入的網頁的選項上面按右鍵，選擇「屬性」
先把「Local file」的打勾取消掉之後，點選右下角的確定。
此時你畫面上原本網頁的地方，就會被原本OBS的頁面所取代，不用緊張，我們只是要重新讀取網頁，在來源的區塊中，找到你讀入的網頁的選項上面按右鍵，再次選擇「屬性」。
在把 Local File 勾選回來後，點選右下角的確定。這時候你的投票網頁照理說就回到 OBS 的介面上了。如果設定沒有問題、粉絲也有按讚的話，照理說 OBS 的視窗上就會顯示投票的數字了。
以上，就到這了，照理說這樣依照步驟做是沒有問題的。有問題的話就在留言提問吧。