pCloud Partner Program

Facebook直播即時投票畫面產生器

好用軟體 2016/11/22 00:07
views: 92509 times
相信大家已經看過許多 Facebook 直播上有投票票數的畫面吧, 想要自己做直播, 也想要加入與網友互動投票票數的畫面要怎麼做呢? 網路上有一些介紹的文章, 不過還是用產生器做最快.

於是就寫了一個產生器來進行這種畫面產生, 連結如下:

http://sample.diary.tw/fblive-vote/

操作說明,

取得直播 id:

首先要開 Facebook 的直播(該直播必須在塗鴨牆上已公開了, 才能取得 id), 開好之後, 到已發行直播的介面上, 把滑鼠移動到發行直播的時間, 如下:
用戶插入圖片

(以上圖片引用擷圖自: https://www.facebook.com/setnews/videos/1208775819207004/ 若原內容已移除請見諒.)
也就是把滑鼠移到那個"4小時"的上面, 下方會出現連結, 把連結最後的數字記下來, 也就是你的直播影片 id (postid), 也就是 1208775819207004

然後到產生器介面上填入該 id, 下面的背景色與背景圖可依需要填入, 最後的 6個互動投票會使用哪些, 說明文字是什麼, 以上面三立新聞為例, 可以填入如下內容:

用戶插入圖片

按下 submit 即可產出連結, 再連到該畫面可得:

用戶插入圖片

這個數字會隨著網友的投票而跳動, 也就是直播的來源之一, 操作方式在 OBS 壓縮器上, 新增一來源為 BrowserSource, 填入上面的網址, 即可將這個動態的結果秀在壓縮器上, 送出直播畫面的結果. (預設的 BrowserSource 為 800x600, 產生器的畫面是 1280x720, 記得要調整一下:

用戶插入圖片

為你的 facebook 直播來點更有趣的互動吧.

投票選項若為2, 3 則為一行平均分配, 若為 4就會是像上面一樣上2下2, 若為 5則是上2下3的方式, 若為 6, 則為上3下3.

另外若是需要在 OBS 中, 背景內容能夠透明, 則將 bgcolor 與 bgimage 留空, 然後在 OBS 中, 的 BrowserSource 下方 CSS 部分調整 background-color: rgba(0, 0, 0, 0) 如下:
用戶插入圖片

之後把這個 BrowserSource 放在最上層, 下面的圖層也都會透出來, 就可以做到透明圖層的效果了. 如下:
用戶插入圖片
效果還蠻不錯的.



繼續閱讀:

如何使用第三方壓縮器在Facebook個人帳號上進行直播 http://diary.tw/tim/1166
皮克直播使用 obs 教學 http://tw.pikolive.com/liveteach/facebook
國外的操作教學 https://socialwall.me/en/capture-stream-in-real-time-facebook-live-reactions/
Facebook直播也能投票 心情計數這樣玩! https://www.saydigi.com/2016/11/facebook-live-reactions.html


top

如何使用第三方壓縮器在Facebook個人帳號上進行直播

好用軟體 2016/11/16 17:49
views: 101840 times
Facebook 上直播很有趣, 而且可以更快速地傳播, 但目前支援第三方壓縮器的功能只在粉絲團上有, 個人帳號沒有. 為什麼要用第三方壓縮器(encoder)呢? 主要是希望有更好的品質, 或是直接應用在玩遊戲的畫面直播, 像是 OBS (https://obsproject.com/), XSplit (https://www.xsplit.com/), Wirecast (付費工具, http://www.telestream.net/wirecast/overview.htm) 等工具.

然後目前 Facebook 介面上, 只有粉絲團有這個功能, 個人帳號只能用手機發起一個直播, 要如何進行這個部分呢, 可以使用 facebook api 來完成, 參考這裡:

https://developers.facebook.com/docs/videos/live-video/exploring-live#golivedialog

當然, 要實作這個需要寫個小程式的網頁來達成, 這裡實作了這個功能, 方便大家來使用, 請連結:

http://sample.diary.tw/fblive-with-3rd-encoder/

只需要點擊上面按鈕, 就可以進行設定程序了, 最後可以拿到 rtmp 用的 url 與金鑰, 就可以放到第三方的壓縮器進行直播.

OBS 輸入 rtmp 後直播操作介紹:
https://obsproject.com/forum/resources/how-to-stream-to-facebook-live.391/
https://axiang.cc/archives/22392

top

Facebook Avatar - 大頭圖取得

程式技術 2015/01/30 00:03
views: 79608 times
可以利用 Facebook 的 Graph API 進行即可.

facebook avatar api:

http://graph.facebook.com/[user-id]/picture default: 50x50

http://graph.facebook.com/[user-id]/picture?height=100&width=100 for 100x100

其中的 [user-id] 直接拿驗證後的 fbid 值即可, 原始的 fbid 也是可以正常使用的, 另外有設定自訂名稱的亦可.

參考資料: https://developers.facebook.com/docs/graph-api/reference/v2.2/user/picture?locale=zh_TW

例如:

http://graph.facebook.com/4/picture
http://graph.facebook.com/zuck/picture
http://graph.facebook.com/4/picture?height=300&width=300
top

使用Facebook FQL查詢留言資料

程式技術 2013/10/25 13:56
views: 262108 times
用 Facebook 的網頁/網站很多, 應該是已經過了大流行的階段, 但是使用 Facebook 的地方還是很多, 如何利用程式將公開性的 Facebook 資料找查出來, 有方便好用的工具可供應用, 就是使用 FQL 查詢. 這裡介紹一般常用在網頁上留言的資料, Comment Plugin, 查找留言資訊.

先來看這篇: https://developers.facebook.com/docs/reference/fql/comment

這篇介紹 FQL 的 comment 資料查找方式, 我們以這個網頁作為例子:
http://sample.diary.tw/18/maps.htm

這裡裝了 Facebook 的 comment plugin, 那我們要查找該頁中 comment 的資料要怎麼查找呢? 首先要先找到該 comment 的 object_id, 該 id 可以利用這頁來找:
https://developers.facebook.com/tools/debug

將上面的 http://sample.diary.tw/18/maps.htm 輸入後, 按下[除錯]鈕, 在最下面的網址可以得到該 comment 的 object_id 為: 10150561101545602, 這個就是在 FQL 中, 查詢 comment 的 object_id. (在 Facebook 中, 會給定的各 object id)

再來就要下 FQL 查找資料了, 語法如下:
SELECT id, text, time, fromid FROM comment WHERE object_id='10150561101545602'

問題是從哪裡下呢? 從這裡 Graph API Explorer:
https://developers.facebook.com/tools/explorer
(若無法使用, 會引導登入 Facebook, 使用 Graph API Explorer需要登入 Facebook)

再將中間原來預設為 Graph API 的功能切到 FQL Query, 接下來把上面的查詢指令輸入, 就會得到目前的留言資料, 以 json 的方式來顯示.
用戶插入圖片

接下來的使用, 相信大家就應該容易多了, 就是解析 json 把資料取出來即可.

那如何使用呢? 在程式中如何呼叫這個查詢, 而不是用 Graph API Explorer, 有沒有看到瀏覽器上方的 url 已經變了, 如下:
https://developers.facebook.com/tools/explorer?fql=SELECT%20id%2C%20text%2C%20time%2C%20fromid%20FROM%20comment%20WHERE%20object_id%3D%2710150561101545602%27
也就是說, 其實就是把查詢放到 url 中的 q 參數即可, 但使用上, 前面的 Graph API Explorer 得改成如下:
https://graph.facebook.com/fql?q=SELECT%20id%2C%20text%2C%20time%2C%20fromid%20FROM%20comment%20WHERE%20object_id%3D%2710150561101545602%27
使用 Graph FQL 查詢即可, 這是不用登入就可以使用的, 也就是說, 在程式中只需要透過 webget 等方法, 就可以取得到內容.

應該會有人問, 這個查詢結果, 其中的 text 是留言沒錯, 但沒有人名, 大頭圖, 那怎麼辦, 很簡單啊, 就再回 FQL 查詢就可以了, 不過若是有 100篇留言就要查 100次耶, 或是 smart 一點, 100篇留言, 共 30 個人在留, 那也需要做 30次的 user 查詢, 怎麼想都很難處理, 所以接下來要介紹的是多重查詢.

多重查詢, 有點像是 SQL 中的子查詢, 在面對這種 FQL 查詢時, 可以利用的技巧, 我們將查詢改一下, 改為如下:

{
"comments": "SELECT id, text, time, fromid FROM comment WHERE object_id='10150561101545602'",
"commenters": "SELECT uid, name, pic_square FROM user WHERE uid IN (SELECT fromid FROM #comments)"
}

對, 正如你看到的, 使用一個 #comments 代替前一個查詢結果, 並代入下一個查詢, 利用 json 格式, 將多重查詢放到 FQL 中, 就可以一次查詢把留言和人帶回來, 忘了說, user FQL 參考資料在這裡:
https://developers.facebook.com/docs/reference/fql/user

第二個查詢中的 uid, name, pic_square 就是常用的使用者代碼, 名稱, 大頭圖資訊.
查詢回傳結果就會有兩個 fql_resulte_set, 分別就是 comments, commenters, 如下:

用戶插入圖片

中間略...
用戶插入圖片

就把留言和留言者一次查回來了.

再來, 如何利用程式 parse json 的回傳結果, 就不用多說了吧, 應該就簡單多了, 快去實做看看吧.
top

Facebook在Alexa上超越Google

WebTrend 2012/08/08 11:52
views: 81357 times
最近的 Alexa 流量有排行變動了, 久居第一的 Google 於 8/2, 8/3間的到訪量被 Facebook 超越了, 真的有意思呢, 來看看圖表:

用戶插入圖片
(圖表資料引用自 http://www.alexa.com/)


其他的前幾名不動, 不過拉開時間看一下,
用戶插入圖片

(圖表資料引用自 http://www.alexa.com/)


似乎前面的到訪規則有些調整, 無論如何, 這個網路排行榜, 對應的網路世界競爭, 真的很激烈呢!
top

利用facebook的comments做網頁的留言功能

blog服務 2011/04/14 21:37
views: 104557 times
利用 facebook 的 social plugins 中的 comments 來做網頁的留言是很方便的, 使用的方式很簡單, 只需要到 facebook 的 developer 網站取得產生的程式碼即可, 連結在此:

http://developers.facebook.com/docs/reference/plugins/comments/

其實程式碼的內容也很容易理解, 如下:


其中的 div fb-root 是放留言的地方, 而後面的 script 才是程式的重點, 而最後的 fb:comments 則是一些參數, 其中的 href 就是留言的網址, 而 num_posts 則是在網頁上要出現最後幾則留言, width 就是這個 div 要給定的寬度.

可以參考這頁顯示的結果: http://sample.diary.tw/flickrset/ 這樣就能方便大家利用 facebook 來討論這個網頁了, 真是方便又好用的 plugin 啊.

[2011/4/15]
放好了之後一直覺得怪怪的, 因為都是英文的介面, 雖然功能及留言內容都不影響, 但其實是因為這個 facebook comments 有語系的關係, 要調整的部分很單純, 就是原來引用的 js url中有出現 en_US 改為 zh_TW 即可, 這樣一來, 介面就會變成是繁體中文了, sample 頁上也做了調整了, 可以再連去看看囉.

不過有趣的是上方的那個讚的功能, 由於沒有語系的影響, 所以在中文用戶下就會出現中文, 英文用戶下自動也會出現英文, 就沒有語系的問題了. 該"讚"的 social plugin 的語法可以由這裡取得: http://developers.facebook.com/docs/reference/plugins/like/ , 除了讚-即like外, 還有推-recommend 可供選擇應用.

top

Alexa世界大站

WebTrend 2010/03/28 01:38
views: 128005 times
好一陣子沒有在看 Alexa 排行榜了, 發現 YAHOO 掉到第4名了, 猜了一下, 去年 Google 才擠下 yahoo (LINK), 後面應該還有 facebook 和 youtube 也擠下 yahoo, 於是到 ALEXA 排行榜查看, 果然 (Alexa Top 500 Global Sites), 名次如下:
  1. Google.com
  2. Facebook.com
  3. Youtube.com
  4. Yahoo.com
  5. Live.com
  6. Wikipedia.org
  7. Blogger.com
  8. Baidu.com
  9. Msn.com
  10. Qq.com
再來看看走勢圖, 以下列出前5名的比較:
Reach:
用戶插入圖片

看得出來, Reach的部分 Facebook 成長驚人啊.
再來是 PageViews:
用戶插入圖片

有持續成長的只有 google 及 facebook, 而 yahoo 是下挫的十分嚴重.
再來看看停留時間:
用戶插入圖片

Facebook 更是一支獨秀, 而 youtube 也是因為影音的關係, 所以停留時間也長.
最後就是 RANK 的部分:
用戶插入圖片

yahoo 從 2009年初被 google 擠到第二名後, 在 2009 暑假又被 facebook 追過來到第三名, 而 facebook 也在 2009/6左右超過 youtube 來到第三後, 再超越 yahoo 到第二名. 看這個名次的競爭真激烈啊.

不過也看得出來, facebook 的力量真是很驚人呢!


top

overshare過度分享

WebTrend 2008/12/31 12:39
views: 55589 times
看到一則有趣的消息, Webster's New World College Dictionary (韋氏新世界大學生字典) 選出的 2008 年年度單字 "overshare", 字面上的意義就是該意思, "過度分享".

先來看一篇對應的報導: http://www.managertoday.com.tw/?mod=locality&func=view&id=1636

到底過度分享會有什麼問題, 其實早在 blog / vlog 之前, 各式各樣的網站及網路資訊, 早已曝露過多的資訊在公開的場合了. 只是在 blog / vlog 這種型式的呈現方式及上稿方式, 更易於去分享這些資訊. 使用者往往不會注意太多, 有時就會造成一些很囧的狀況.

曾經有趣到什麼樣子呢? 有個案例是這樣的, 有個女孩子發現他男朋友劈腿, 雖然保證不再犯, 但經由某大"有名"網站的相簿分享, 這個女孩子發現, 他男朋友還是有和 "她" 一起出去玩, 當下整個傻眼. 呃... 這算過度分享的囧況嗎?

雖然只是一個案例, 我們思考看看, 若是其他更嚴重的問題呢? 像是犯罪, 商業機密, 非法使用, 濫用, 更不用說版權, 侵權等問題, 過度分享是一個還蠻值得思考的問題呢.

後來的 facebook, friendster 等 "交友" 網站已經相當著重這些問題的狀況, 以仿真實社會的交友方式來做出線上交友的概念, 較為確保一些隱私及降低過度分享的問題. 不過會將這些自己的美麗倩影或是影音片段放在網路上供大家看, 某種程度上來說, 應該也是想要展現自己, 表現自己, 只是透過 internet 這樣方便的工具, 更容易達到這點, 不過, 過度的分享會有蠻有的風險, 但倒也不是說不好或是要限制, 而是得仔細思考分享的對象及目的. 相信你總不會喜歡在討厭的人面前跳舞吧....

雖然如此, 但也希望大家在分享的時候, 絕對要多注意不要曝露過多的個人資訊(當然, 若有特殊目的另當別論), 也要多留意自己的足跡, 站在資安及個資保護的立場, 千要要多留意啊.. 否則不是囧而已, 更嚴重的... 可能還很多很多!
top




Nextbit Robin 5.2吋六核心智慧型手機 Microsoft Office 365 中文家用版PKC (無光碟)
ASUS華碩 AC1900 雙頻無線路由器 RT-AC68U 美國 VORNADO 533 渦流空氣循環機 (黑色)
御茶園 每朝健康綠茶(650mlx24入) 每朝健康 雙纖綠茶(650mlx24入)


 Waiting...