fbsamples/live-comments-teleprompter

Example code shows how to retrieve comments and reactions for a Facebook Live video.

Live Comments Teleprompter

Display live comments and reactions for Facebook posts in an easy-to-read way.

Getting Started

The Live Comments Teleprompter is a static web application. It requires no special server requirements, other than any ordinary HTTP server and a modern browser. However, you will need to register a Facebook App ID, as it uses the Facebook Graph API and JS SDK.

Get an App ID

1. Register for a new app ID for your domain.
2. In the Facebook App Dashboard, under Basic Settings, add your website URL for where you will deploy the teleprompter.
3. Copy the App ID. We'll use this in the build step.

Install Dependencies

This project requires Node.js to build. (No Node.js server is required however.) Download and install Node.js before continuing.

Open a terminal and change to the root directory for the project. Use NPM to install all the dependencies:

npm install 

Build

This step will create bundled JavaScript with your app ID embedded. Therefore, once built, the build can only work on the URL you registered for your app ID.

Open a terminal and change to the root directory for the project. Set the FB_APP_ID environment variable to your new app ID.

Windows:

SET FB_APP_ID=12345

Linux / OS X:

export FB_APP_ID=12345

Next, to run the build:

npm run build

(You can also use the flags -- --watch if you're making modifications and want the build to run automatically when files change. You can use -- -p to minify the output bundles. Only one -- flag is needed before other flags.)

Finally, deploy everything in /src to your web server.

Usage

Post Selection

Choose a post to display comments and reactions for. Your and your pages' most recent posts will be displayed.

Alternatively, you can paste a URL to many types of Facebook content. You may also paste URLs to public content from other people and pages. (Note that not all Facebook post URL formats are supported. As there is no unified URL format, nor official API for parsing a Facebook URL, this app uses a sort of naive parsing that works for most posts. If your URL is not working, first make sure your URL is for the post itself and not a "share" of the post. To do this, on Facebook, click the timestamp for the post. You will eventually be taken to a page that only your post appears on. This is the URL most likely to work with the Live Comments Teleprompter. If you have done this, your post is public, and your URL still does not work, please open an issue for it.)

Teleprompter

Comments for your post will be loaded and displayed. If available, the names of those who made the comments will also be displayed. (At times, particularly for comments on Page posts, you will see "Facebook User" for the names. This is due to the privacy settings of the commentators, where by default their name is not made available to the app.)

The progress bar in the bottom-right of the view indicates how much time you have before the next batch of comments are loaded. This helps control the flow of comments during very popular videos. Click the progress bar to immediately load new comments. You may also use a Bluetooth camera button to immediately load new comments.

Use the back button ‹ to go back to post selection.

Use the ＋and － buttons, or your browser's zoom controls, to increase or decrease the font size.

Use the ↔ and ↕ buttons to toggle mirroring horizontally and vertically. This may be needed if you are using a proper teleprompter mirror rig.

Use the ⿹ to toggle full-screen mode.

Moderation

The moderation feature allows you to add, prioritize, and delete posts shown on the teleprompter. This feature does not have any effect on posts on Facebook. Changes made are for the teleprompter display only.

Use the ≡ on the teleprompter to open the moderation panel.

Comments will flow in the queue, with the most recent comments at the top. The posts at the top of the queue are what are displayed on the next teleprompter refresh. If you find an interesting comment, you can boost it to the top of the queue with the ⇡ button. Once the comment has been read, you should remove it with the × button, so that the next comment in the queue will appear on the teleprompter.

License

This source code is licensed under the license found in the LICENSE file in the root directory of this source tree.

live-comments-teleprompter's Issues

Application request limit reached

it Works the first time , next time i try to use it i got this messeage on the console ,
Its there any solution or it only works for certain time until it gets to its limites

Increase rate limit

Hi, i tried to use the app for comments, but after 3 minutes it stopped working for 100% rate limit. I was trying to prove a test, I simulated the submission of ten comments. How can we lift this rate limit. Thanks

Accessing Videos from Pages

I am trying to access Live Videos that I am posting to a Page rather than my Profile. I was able to achieve this by changing '/me/live_videos' to '/{page-id}/live_videos' on line 73 of main.js. This enabled me to see the Live Videos but the name function in the comment capture produces an error (listed below) if anyone other than the page comments on the video.

jQuery.Deferred exception: Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined

Uncaught SyntaxError: Unexpected identifier

I went through the process described in the docs and everything ran without error. But when trying to access it on our web server, I get the following errors:

Uncaught SyntaxError: Unexpected identifier in index-bundle.js:55
Uncaught SyntaxError: Unexpected identifier in teleprompter-bundle.js:55

http://pjstarpeoria.com/fblive/

So it must be login into facebook

Because i have a trouble with the login. It require a https web and that pretty hard for me to get the SSL. And i have a question that why we need to login even the livestream is public and everyone can see it, no matter what. Btw, very awesome project, thank a lot <3

Insecure Login Blocked: You can't get an access token or log in to this app from an insecure page. Try re-loading the page as https://

Instead of username 'Facebook User' displays

Love the product... worked immediately. Great documentation. I have one issue. Instead of displaying the user's name it shows 'Facebook User' in both the teleprompter and admin screens (attached). I am not getting any errors in the console and everything else seems to work fine. Any thoughts? Thanks, gents!

from object is undefined

jQuery.Deferred exception: Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined

No Issue, just FYI

I deployed your app here: http://comment.skeyelab.com/

Can you check for me what did i wrong?

https://monacotdien.tk/live/
THis is my website that i have deploy the code, and it just not work. Can you help me pls

Your URL was not recognized. Please post a URL to a specific post on Facebook.

It works the first time, then I get this message: Your URL was not recognized. Please post a URL to a specific post on Facebook. I can't insert FB URl.

URL Not recognized for manual posts.

Getting a popup error:
Your URL was not recognized. Please post a URL to a specific post on Facebook.

Whenever I paste a FB post URL. Here are some of the examples of urls I've tried, some of which I can actually see as "most recent" already in the prompter itself.

This one shows up in the prompter as a "recent" post of mine, but manually get error.
https://www.facebook.com/bikrdotnet/posts/10160326215030724

This one is a video in a group I own.
https://www.facebook.com/groups/lularoeatthestudio/permalink/1975228342805110/

This one is a right click "copy video link" from the same video.
https://www.facebook.com/bikrdotnet/videos/10160346101325724/?t=12

Here is one from a page of mine, it was a Live video, which shows up while I'm live but once the video is posted and no longer live it disappears from the list of recent posts on that page in the prompter.
https://www.facebook.com/groups/lularoeatthestudio/permalink/1975599382768006/

Am I selecting the link wrong somehow?

Can not get comment from post of pages

Hi,
I can't get other comment from post of pages but I only can get my comment on post of pages.
So, can not see any other user comment from post of pages.
On personal's post fine!
what should I do?

Thank you.

I test on window have problem

PS C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master> npm install
npm ERR! path C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master\node_modules\babel-plugin-transform-es2015-spread\package.json.2419277965
npm ERR! code EBUSY
npm ERR! errno -4082
npm ERR! syscall rename
npm ERR! EBUSY: resource busy or locked, rename 'C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master\node_modules\babel-plugin-transform-es2015-spread\package.json.2419277965' -> 'C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master\node_modules\babel-plugin-transform-es2015-spread\package.json'

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\PC- Company\AppData\Roaming\npm-cache_logs\2018-08-17T10_44_38_156Z-debug.log
PS C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master> SET FB_APP_ID
=197140653777427
PS C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master> npm run build

[email protected] build C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master
node node_modules/webpack/bin/webpack.js

You must set FB_APP_ID in your environment before building. See README.md.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: node node_modules/webpack/bin/webpack.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\PC- Company\AppData\Roaming\npm-cache_logs\2018-08-17T10_45_43_412Z-debug.log
PS C:\Users\PC- Company\Downloads\live-comments-teleprompter-master (1)\live-comments-teleprompter-master>

How to run on Windows 10 64 bit

Thanks for help

Not displaying Info

This is my error:

An active access token must be used to query information about the current user.

no index-bundle.js

I download the src and view the index.html directly, it prompts index-bundle.js and teleprompter-bundle.js not found

Cannot get this to run

We installed and got this running. Sent a test message and it showed up. Sent a second one and got a note from FB locking us out till we posted a selfie. STill does not run. The last post I saw of someone using this successfully was Mar 26. Anyone out there using this teleprompter at the moment? Any tips?

Is there a way to load Groups as well? Right now it just does Pages

I really need to be able to pull comments from a facebook group post vs a page sometimes. Is it a simple change?

Invalid Scopes: user_photos, user_posts, user_videos.

Hi,

I'm getting this error message when trying to connect :

"Invalid Scopes: user_photos, user_posts, user_videos. This message is only shown to developers. Users of your app will ignore these permissions if present. Please read the documentation for valid permissions at: https://developers.facebook.com/docs/facebook-login/permissions"

But, I'm able to log in when my application is in development mode, but it won't recognize any facebook post url.

If you have any idea, thanks for your help !

Uncaught SyntaxError: Unexpected identifier

Same issue, as described above.

Node version : v11.12.0

Originally posted by @FildonPrime in #13 (comment)

webpack not running

When following the tutorial and running 'webpack' on osx, i get the following message:

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

So i run npm install webpack-cli -D, but running webpack-cli after that results in an error:
-bash: webpack-cli: command not found

I do see webpack and webpack-cli sitting in the mode_modules folder, what am I doing wrong?