你一定玩过这个！脸书按赞的不同表情符号＋直播＝实时投票。小编看到这个功能的时候觉得超酷，只要人们根据不同的表情符号表达自己的立场，动态马上就会显示现在每个选项的受欢迎程度！加上现在脸书直播和影片的权重提高，更让许多粉丝专页开始使用这个功能来吸引粉丝们的目光。在这数位营销手法不断推陈出新的时代，每个营销人都在从做中学。今天百聚汇也来教大家怎么用粉丝专页直播脸书表情符号投票（个人页面的直播投票设定会稍微不同，但基本上原理都是相同的）。

在开始之前，先为你打个强心针。设定实时投票直播并不难，但过程有些繁复，得在几个视窗之间做切换（有双荧幕是最好的！），也需要下载不同的资料夹，因此想要学会这个技能，最重要的就是「有耐心！」把计算机里面不要用到的东西先清一清，顺便把你遗忘已久的归纳整理技巧拿出来，然后深呼吸。Let’s Go！

原理：用html语法同步写入FB粉丝专页上的实时动态更新信息，透过应用程序撷取使用者计算机荧幕的画面。

我将过程简化为8个步骤，其中前3个步骤非常简单：

第一步，前置下载：

前置作业要下载2个应用程序和1个资料夹。资料夹是提供直播内容网页设计的模板，而其中一个应用程序是编辑直播内容设计所需，另一个应用程序则是将荧幕画面同步串流到社群媒体所需。

注：应用程序请下载符合自己作业系统的版本。图像化网页编辑器仅提供试用版本，期效过后可自行找寻相关软件编辑，或是付费购买。

第二步，注册成为Facebook开发人员：

注册成为Facebook开发人员的目的是为了让使用者可以获取脸书的资料权限，因此我们必须取得「App Token」数值，而为了取得这个数值必须得先注册成为Facebook的开发人员：点此注册。

首先进入到Facebook for developers页面之后到右上角的「登录」，跟你的脸书账号串连在一起。

接着你会被要求再次输入密码以确认身份，然后进入到如下图所示的「是否接受Facebook开放平台政策和Facebook隐私政策」。在此处把按钮开关移动到「是」，并点选「继续」

再来你可能会被要求注册电话号码，同样是输入个人信息，在收到确认内容并回覆之后，理论上就会跳出如下图所示的方框，点选「完成」。

第三步，获得App Token数值：

在你按下「完成之后」，应该会进入到下面这个页面，点选最上方的「工具及支援」。

接着点选「Access Token Tool」

因为是新的使用者所以没有制作任何应用程序，在这个步骤就点选「制作新应用程序」。

接着会出现一个弹跳视窗，「建立新的应用程序编号」。你可以在「显示名称」输入自己想要的标题，填入联络电子邮件以及选择一个类别，然后点选「建立应用程序编号」。

再来你就会看到以下这个页面，请再次看到右上角的「工具及支援」，在进入下一个画面之后，点选「Access Token Tool」。

然后就会看到刚刚设定的应用程序，出现「App Token」数值，这串绿色的数值将是之后我们使用直播内容网页设计的应用程序会需要使用到的代码。

第四步，直播内容页面设计：

还记得你刚刚有下载直播内容网页设计模板以及它的应用程序Pinegrow Web Editor吗？现在我们要把懒人包Pinegrow Web Editor打开，编辑里面的内容！选择「Open file」，找到你刚刚下载的懒人包之「index.html」档案。

接着你就会看到你的画面如下图所示：

在页面输入「Ctrl+E」，它会跳出一个视窗，点选「OK」。

然后你会看到在应用程序的页面下方跳出这个html网页的语法。

接着我们就可以设定自己想要的背景图片以及串连脸书「App Token」了！首先看到语法的第20行，在「“background.png”」的部分将上下引号内输入背景图片的网址。

再来你可以透过「Ctrl+F」搜寻功能，输入「Access Token」。

或是下拉语法到124行，你会看到「’ACCESS_TOKEN_HERE‘」。在此处输入在上个阶段的最后一个步骤「App Token」中的绿色数值。

’注：若有一点语法基础的你就知道须保留「’」符号，绿色数值填在完全取代英文字母ACCESS_TOKEN_HERE，写入的结果会如下图所示：

在设定好之后先按「Crtl+S」存档，他同样会跳出一个页面跟你说备份的设定，一样选择「OK」就好。

背景调好之后，再来教你简易调整文字内容和符号的间距。将游标滑到文字的部分点两下就可以编辑内容。至于要如何将符号之间的间距拉大，则可以到右侧的语法部分复制h1的文字档案，是要记得输入Enter才会有空行效果，接着把文字内容清空，将其下拉到第3个emoji和第4个emoji之间，然后阶层要调整在最外层。

你可以在这个应用程序里把所有的直播画面制作好，但我不会建议在此处为表情符号的每个选项加上文字，因为不是大部份的使用者都会html语法，而且你可能在操作过程中让版面跑掉，所以做到我刚刚说的步骤以后就可以先接着往下一个步骤了！至于「’POST_ID_HERE‘」则是要等到直播真正开始的时候，在FB的网页上才会有我们所需要的数值内容，所以下一步就是要回到粉丝团页面设定直播页面了！

第五步，粉丝团直播设定：

首先来到粉丝页面，选择「发布工具」。

接着点选左边侧栏的「影片库」，然后再点选右上角的「直播」。

再来你会得到下面这个页面获得「串流金钥」，这个数值会在接下来的步骤使用到。

点选下一步，你会来到如下图所示的页面，接着可以为影片做进阶的设定，如影片标题、影片标签和动态描述等。

粉丝团的设定在这里暂时告一段落，我们要开启刚刚下载却还没使用到的应用程序OBS Studio，准备把影片跟直播画面串流起来了！

第六步，影音串流程式设定：

打开应用程序OBS以后，可以点选右下角的「设置」到里面的「一般」设定语言：正体中文。

接着来到左边侧栏的第二个选项「串流」，于右侧「服务商」的部分点选「Facebook Live」。

然后把上一步在设定脸书直播页面所获得的「串流金钥」输入之后按下确定。

设定好之后来到应用程序的下方页面，可以在来源的区块按右键新增「Browse Source」，或者是点选「＋」来新增Browse Source。

接着会有一个视窗跳出来，你可以自行为这个Browse Surce命名，在「建立新来源」的下方输入如：xxx的喜好程度直播投票，接着按下确定。

确定以后会看到下一个跳出的视窗，把「Local file」打勾，接着它会出现「浏览」，点选「浏览」去找到刚刚直播模板懒人包里面的「index.html」档案。

再来修改你的内容长宽比例，我是输入1280 x 720，并可以再自由调整页面的大小

根据不同的长宽比例，你会看到不一样页面设计结果。象是下方我调整了长宽比例之后，右手边空出来的部分就可添加自己想要的图片，也可以增加文字。新增文字和图片的部份与刚刚在来源下方点选「＋」或是在右边空白处点选「新增」一样，只是选择「图片」或是「文字」。在文字的部分需注意若要输入中文的话，有限定某些字型才会显示得出来，不然你会看到你输入的文字变成了「□□」。同样的，你也可以为每一个文字或是图片命名。

P.S 因为是要Demo给大家看一下怎么操作，所以就不每一个都加上文字了。

在你设定好整个页面之后我们就要把OBS Studio和脸书直拨开始串连在一起了！点选右下方的「开始串流」。

记得如果你没有要同步声音的话，记得要把混音器的「麦克风」声音调到静音，不然你在直播期间的对话或是内心的OS，就会让收听的观众不小心听到喽！

第七步，获取直播网页数值：

在上个步骤完成了「开始串流」以后，就可以回到刚刚的脸书粉丝专页设定的直播视讯。会发现右手边刚刚本来是离线的内容出现了「正在撷取影片串流….」的画面，这就表示你快要成功啦！

等待脸书撷取到你的OBS资料之后，你就会看到你在OBS上制作的页面出现在脸书直播的预览画面了！

再来就到直播的网页，到网址列videos后方的数字就是我们需要的数值！

接着就是要同步的重要时刻，也是最后一个动作了！！

第八步，同步直播设定完成：

还记得在第四个步骤里面有提到「POST_ID」吗？所以在这里我们会回到Pingrow Web Editor 把Post ID写入，接着回到OBS Studio更新html的页面内容。

回到Pingrow Web Editor，同样按下「Ctrl+E」把页面语法叫出来，找到第126行左右的部分，将刚刚所得到脸书直播影片videos后面的数值填入，然后按下「Ctrl+S」储存页面。

接着再回OBS Studio的页面，将刚刚Browse Source的档案属性修正。（我刚刚把直播屏幕的内容命名为Live Stream_Test）

又回到这个熟悉的画面啦！先把Local file的勾勾选项取消，然后再把勾勾打开， 然后到一样的地方和资料夹找到「index.html」，按下确定。

回到你的脸书粉丝直播画面，你应该就会看到实时的动态投票人数页面更新了！（因为在懒人包的语法里面写的是5秒钟更新一次页面，所以在直播的时候可能会有一点lag。）

当你知道基本的投票直播操作之后，就可以开始做细节的微调了！最好是能够自己学一点html语法，就可以不求人的制作出各式各样的直播模板了！如果是做电商的你想要做倒数计时销售的直播，可以下载OBS的免费外挂Snaz，设定倒数计时的功能，不过比较可惜的是这个外挂系统不支援mac，就留给使用Windows的大家摸索，使用方式可以参考这个影片教学。

快去玩玩你的粉丝专页直播投票功能，冲冲粉丝人气、增加和粉丝们的互动吧！当然也欢迎帮忙宣传分享！