照過來！　Facebook表情符號投票直播完整教學（內有簡易版型調整）

最近一股腦的非常流行臉書直播投票，這到底是怎麼做的呢？廢話不多說，我們就直接上教學！

運作原理解釋

這邊稍微解釋一下其運作的原理，簡單來講就是讓直播軟體 OBS 讀取一個電腦上的網頁檔案，這個網頁檔案會撈取直播文章的按讚紀錄，進而直接統計數字顯示在網頁上，這樣子就可以直播時進行按讚的統計。

事前下載準備

下載投票網頁包

載點：https://goo.gl/rzKCep

目前有國外網站已經整理好了安裝包，但是小編這邊的教學有修改一些地方，所以請下載小編這個修改後的網頁包。

下載OBS Studio

載點：https://obsproject.com/download

我知道很多人習慣使用 OBS Classic，但是讀取網頁的功能目前只有 OBS Studio 有，請下載安裝好它。

下載Pinegrow Web Editor

載點：https://pinegrow.com/

這個是圖像化的網頁編輯器，主要是拿來編輯投票頁面，如果你有慣用的軟體就不太需要我教了。如果你毫無網頁編輯的概念的話，請下載這套來使用。

↑進去後先點選這個按鈕

↑接著依照自己的作業系統來選擇要下載的版本。

粉絲團直播

剛剛我們有提到說，其概念是由網頁來撈取 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中間，記得位置不要放錯喔。