照過來! Facebook表情符號投票直播完整教學(內有簡易版型調整)

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

snap000581

運作原理解釋

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

 

事前下載準備

下載投票網頁包

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

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

 

下載OBS Studio

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

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

 

下載Pinegrow Web Editor

載點:https://pinegrow.com/

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

snap000579
↑進去後先點選這個按鈕

 

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

 

粉絲團直播

剛剛我們有提到說,其概念是由網頁來撈取 Facebook 直播影片的按讚資料,為了讓網頁可以正確地知道撈取哪篇文章,所以我們會需要寫入貼文的「POST ID」,還有取得 Facebook 撈取資料權限的「App Token」或者是「存取權杖」(粉絲頁直播使用 App Token,個人頁直播使用存取權杖。)以下我們本段就先以取得 App Token 的方式來進行示範。

 

加入Facebook For Developers

Step 01:為了要取得 App Token,我們必須要先加入「Facebook For Developers」註冊成為開發人員。在登入 Facebook 的狀態下,進入到 App Token 的網頁內,點選右上角的登入。
snap000521

 

Step 02:接著請勾選是之後,點選右下角的註冊
image

 

Step 03:看到這個畫面時,代表你註冊成功了。
image

 

Step 04:接著點選畫面上方的「工具與支援」
image

 

Step 05:接著點選「Access Token Tool」
image

 

Step 06:它會告訴你沒有建立應用程式,我們就先建立一個新的應用程式,點選紅框內的「製作新應用程式」。
image

 

Step 07:切換頁面後,先點選綠色的「製作新應用程式」的按鈕,然後在跳出的視窗中,隨便打入一個顯示名稱與隨便選擇一個類別,接著點選右下角的「建立」來完成設定。
image

 

Step 08:接下來你會進入到應用程式的頁面,不用理他,在點選右上角的「工具與支援」。
image

 

Step 09:回到這個頁面後,再點選「Access Token Tool」
image

 

Step 10:接著你就可以看到在 App Token 這邊顯示一串文字,如果你是要用粉絲團來進行投票直播的話,就先保留好這個頁面等等使用。
image

 

個人頁直播

如果你是要用個人頁直播的話,方法跟上面一樣,只是要再多做一些事情,我們還是從最開始的地方進行。

 

Step 01:為了要取得 App Token,我們必須要先加入「Facebook For Developers」註冊成為開發人員。在登入 Facebook 的狀態下,進入到 App Token 的網頁內,點選右上角的登入。
snap000521

 

Step 02:接著請勾選是之後,點選右下角的註冊
image

 

Step 03:看到這個畫面時,代表你註冊成功了。
image

 

Step 04:接著點選畫面上方的「工具與支援」
image

 

Step 05:接著點選「Access Token Tool」
image

 

Step 06:它會告訴你沒有建立應用程式,我們就先建立一個新的應用程式,點選紅框內的「製作新應用程式」。
image

 

Step 07:切換頁面後,先點選綠色的「製作新應用程式」的按鈕,然後在跳出的視窗中,隨便打入一個顯示名稱與隨便選擇一個類別,接著點選右下角的「建立」來完成設定。
image

 

Step 08:接下來你會進入到應用程式的頁面,不用理他,在點選右上角的「工具與支援」。
image

 

Step 09:注意喔,從這裡開始就不一樣了,回到這個頁面後,點選「 Graph API Explorer」
image

 

Step 10:進入後,在紅框內的下拉式選單中,選擇「Get User Access Token」
snap000574

 

Step 11:接著在跳出的視窗中,勾選「user_posts」後,點選右下角的「Get Access Token」
snap000576

Step 12:接著他會跟你請求授權,就把授權給它吧
image

 

Step 13:接著你就會看到紅框內「存取權杖」後面的亂數,就是我們在個人頁上面進行投票直播所需要用到的參數,如果你要在個人頁上進行的話,就要保留這串亂數喔。
snap000578

 

網頁輸入App Token(存取權杖)

Step 01:接著打開你安裝好的Pinegrow Web Editor,或者是任何你慣用的編輯器,以下我們還是以 Pinegrow Web Editor 來做示範。打開後點選「Open File」
image

 

Step 02:接著在瀏覽介面中,找到網頁包裡面的「index.html」,選擇它開啟。
image

Step 03:開啟之後,你會看到這樣的畫面,不用擔心綠色的有問題,請直接按鍵盤的「Ctrl+E」。
snap000585

 

Step 04:他會先跳出一個視窗,請點選右下角的OK
snap000586

 

Step 05:接著會跳出原始碼視窗,不用緊張,點選畫面後按Ctrl+F。snap000587

 

Step 06:接著在左上角的地方輸入「access_token」,然後按下鍵盤上的 Enter,你會找到 「access_token」的位置。
snap000588

 

Step 07:這邊稍微解釋一下,在紅框處「ACCESS_TOKEN_HERE」是讓你貼你的APP TOKEN(粉絲頁直播)或者是存取權杖(個人頁直播)的數值,請記得複製貼上後,前後的「’」要保留下來喔。我們這邊先貼上 access_token 的數值,POSTID是要直播後才能進行修改的。
snap000589

 

Step 08:修改完畢後就按 CTRL+S 來進行存檔,接著會跳出一個視窗,同樣的按右下角的OK確定。
snap000590

 

Step 09:接著你就會回到原本的畫面,再按一次 Ctrl+E 來關閉原始碼視窗。
snap000587

 

簡易物件位置調整

到這我們先輸入完了 access_token 的數值,接著我們要來進行版面簡易的調整,由於許多人都不會 HTML 跟 CSS,所以小編的調整法是用最基本的方式,只保留六個投票的表情符號與數值位置,剩下的都是在 OBS 的介面上再進行調整。

 

Step 01:首先我們先移除原本的 LOGO 圖片,再畫面上點選圖片後,會出現一個小的工具列,點選垃圾桶的圖案來進行
image

 

Step 02:接著刪除中央的文字,在畫面中點選兩下後,全選全部文字後按下鍵盤上的Del刪除文字,順便多打幾個Enter(請保留文字區塊,留待後面排版用)。
snap000593

Step 03:接著要來決定六個表情圖案的位置與順序,如果你是希望他像下圖這樣上面三個,下面三個的話。把滑鼠移到右邊的區塊上,找到「Body」底下的「H1」。

snap000597

snap000594

 

Step 04:這邊稍微解釋一下,這裡面有六組「div」的資料夾,這分別代表著六個表情符號,h1 底下的br 代表的是你剛剛打入的Enter數量。我們希望介面上上面要有三個表情符號、下面要有三個表情符號的話,就必須要用H1 來隔開他們。我們把H1 移動到第三組與第四組的div中間,記得位置不要放錯喔。
snap000596

 

Step 05:如果你是希望六個表情符號在上面或者是在中間的話,就是把 H1 拉到最下面。
snap000601

snap000598

 

Step 06:如果你要調整表情符號的順序的話,就是移動整組的Div。
snap000599

 

Step 07:如果你只要保留特定的表情符號的話,就是直接在左邊的視窗中,點選刪除整組符號配置。(然後建議這邊另存新檔)
snap000600

 

Step 08:接著修改好你要的版型後,就先存檔,然後先別關閉程式。

 

OBS設定

網頁進行好設定後,接著打開你的 OBS Studio,開始來進行串流直播碼取得與設定的部分。

 

粉絲頁直播

Step01:進入到自己粉絲團的管理頁面後,點選上方工具列的「發佈工具」

snap002835

 

Step02:點選左邊的「直播影片」,接著點選右邊的「新增」
snap002836

 

Step03:接著你會看到建立直播視訊的視窗,先別管他,直接點選右下角的預覽
snap002837

 

Step04:點選預覽後,會跳出一個浮動視窗,直接點選到「進階」,將伺服器網址與串流金鑰複製起來。
snap002840

 

Step05:打開OBS的工具列的檔案,選擇設定,將「串流」的選項選擇「Facebook Live」,接著將剛剛複製的伺服器網址貼到「FMS URL」的格子上,將串流金鑰貼到「播放路徑/串流碼」上,都貼上後就按下確定。
snap000603

snap000604

 

設定的部份我們就先做到這,等等還要進行其他的設定。

 

個人頁使用電腦直播

上面所講的是使用電腦在粉絲團直播的功能,但是其實根據網路上的高手與我們家工程師的研究下,這個新的Live API其實已經完全開放了,只是沒有把功能的選項給做出來,如果想要在個人頁、社團上面進行直播的話,就用電腦瀏覽器點選文章下方的「Facebook 電腦版直播功能請點我」,並且選擇你想要直播的地方,接下來的動作就跟上面粉絲團直播的設定一樣囉。(使用前記得要關閉Adblock功能,以及讓流覽器同意彈跳視窗。)

Facebook 電腦版直播功能請點我

Step01:點開上面的按鈕後,會跳出一個網頁,請選擇你要直播的地方
snap002846

 

Step02:選擇完畢後,請點選右下角的「繼續」
snap002847

 

Step03:接著你就會看到跟粉絲團直播一樣的設定畫面。
snap002848

 

Step04:請點選進階取得你的直播伺服器與直播金鑰,將這兩者填入你的直播軟體OBS的設定中。接下來的動作就跟上面是一樣的。
snap002849

 

Step05:打開OBS的工具列的檔案,選擇設定,將「串流」的選項選擇「Facebook Live」,接著將剛剛複製的伺服器網址貼到「FMS URL」的格子上,將串流金鑰貼到「播放路徑/串流碼」上,都貼上後就按下確定。
snap000603

snap000604

 

設定的部份我們就先做到這,等等還要進行其他的設定。

 

OBS 版面設定&投票網頁的嵌入

Step 01:接下來就要進入直播版型的設定,我們先在「來源」的地方按下滑鼠右鍵,選擇「新增」、「BrowserSource」
snap000606

 

Step 02:跳出的視窗就隨便取個名字。取完後按確定。
snap000607

 

Step 03:接下來先勾選「Local file」
image

 

Step 04:接著上面的區塊就會跑出畫面,然後在點選右邊的「瀏覽」。找到我們修改好的 index.html 檔
image

image

 

Step 05:接著寬度與高度的部分先設定標準的 1280*720。輸入完畢後點選右下角的確定。
image

 

Step 06:此時你會看到畫面上跑出一個綠色的區塊,上面有六個表情符號,配置上或許你會跟我不同,就看你在網頁介面那邊是怎麼設計的。接著就點選綠色畫面的右下角紅色圓圈處來拖曳拉大畫面。
image

image

 

Step 07:接著在綠色畫面上點選滑鼠右鍵,選擇「濾鏡」
snap000618

 

Step 08:在這個視窗中,我們在點選滑鼠右鍵,選擇「新增」、「色彩鍵」
image

 

Step 09:濾鏡名稱就隨便填寫一個吧
image

 

Step 10:接著再下方的區塊中,移動相似性的調整鈕。
image

 

Step 11:調整到怎樣的程度呢?就讓畫面的綠色消失即可,小編習慣是輸入到 700,讓邊緣的綠色也消失。這樣子設定後,就只會保留表情符號投票的選項在頁面上,其他部分都是透明的。
image

 

Step 12:接下來你就可以依照一般 OBS的設定,在上面看是要新增圖片、影片、還是文字都可以。
image

 

Step 13:其實這邊要講的是,如果網頁的寬度設定不一樣的話,在介面上按鈕的寬度與配置也會有所差別。你可以依照你的需求來進行調整。
image

image

snap000626

 

Step 14:甚至你也可以依照你的需求來進行移動網頁的顯示部分,讓他只顯示出你要的地方。
snap000616

 

Step 15:最後你一切都設定好之後,就按下右邊的開始串流來把畫面訊號送出。
snap000627

 

Step 16:Facebook 那邊的頁面收到直播訊號後,你就點選右下角的「直播」來送出訊號。
1462561613-5fa9452b90e5c4e4b05609f95e58be22

 

設定貼文ID

訊號送出後,就剩下最後一個步驟,我們要把 Facebook 直播貼文的ID寫入網頁中。抓取ID的方法很簡單,就是點選直播貼文的「時間」,當你切換到直播貼文的「專屬頁面」
image

 

它的網址格是一定是「https://www.facebook.com/[你的粉絲團或個人頁ID]/videos/XXXXXXXXXXXXXXXXXX/」XXXX部分的數字就是POST ID
image

 

你只要複製好這段ID,切換回Pinegrow Web Editor中,把它貼到原始碼裡面「POSTID」(下圖綠色框框處)的部分後,就可以存檔了。
snap000589

 

此時你在切換回 OBS ,在來源的區塊中,找到你讀入的網頁的選項上面按右鍵,選擇「屬性」
snap000632

 

先把「Local file」的打勾取消掉之後,點選右下角的確定。
image

 

此時你畫面上原本網頁的地方,就會被原本OBS的頁面所取代,不用緊張,我們只是要重新讀取網頁,在來源的區塊中,找到你讀入的網頁的選項上面按右鍵,再次選擇「屬性」。
image

 

在把 Local File 勾選回來後,點選右下角的確定。這時候你的投票網頁照理說就回到 OBS 的介面上了。如果設定沒有問題、粉絲也有按讚的話,照理說 OBS 的視窗上就會顯示投票的數字了。
snap000636

 

 

 

 

以上,就到這了,照理說這樣依照步驟做是沒有問題的。有問題的話就在留言提問吧。

您也許會喜歡:

神奇寶貝這樣玩才省!吃到飽+不斷電 隱藏絕招揭密