Giter Club home page Giter Club logo

fblivepoll's Introduction

Don’t feel like setting this up on your own web server? I host a free online platform for FB Live Reaction Polling - check it out, no coding required!

Facebook Live Video Polling

Useful features:

  • Automatically update reaction count from Facebook Graph API
  • Basic CSS Animations
  • Responsive - resizes to any browser size perfectly

... and more! 👍

FBLivePoll Demo

Basic demo of FBLivePoll

Getting Started

Step 1. Facebook Graph Access Token

You'll need to set up a new App in Facebook (see the guide here, see the section labeled 'Obtain Permanent Page Access Token'). Choose "Website" as the Application type. Copy your Access Token for your app and insert it at the top of the 'reactions.php' file. This is also where you'll put the ID of your Live Video in Step 3.

$videoid="VIDEO_ID_HERE"; 
// The ID of the Live Video
$access_token="ACCESS_TOKEN_HERE"; 
// Your Facebook app's access token in the format 1111111111111111|X1xX11xX_XXXxXxXXX1xXXx1XXX

Step 2. Customise the appearance of the 'reactions.html' file

  • The background image and appearance can be customised in 'style.css'
  • The options and symbols can be customised in 'reactions.html'. Reaction icons are included
  • The 'reactions.html' file is based on Bootstrap. For more information on the Bootstrap grid system, read the Bootstrap docs

Step 3. Add 'reactions.html' as source in OBS

Upload the files to a web server and point OBS (or the broadcast software of your choice) to the URL of your 'reactions.html' file, using it as a source. You may use the BrowserSource plugin for OBS, or open the page in a new browser window and use a Window based source.

Still need to choose a software package to go Live with? Facebook has a list of compatible software.

Step 4. Go Live!

Don't forget to add your Video ID to the top of the 'reactions.php' file! As soon as it's added, the 'reactions.html' file should reflect the reaction count, without having to refresh the browser.

Going live isn't in the scope of this readme - more information on how to go live using a software package of your choice is available from Facebook

Feel like a tinker?

FBLivePoll is based on Bootstrap and uses the Facebook Graph API to fetch reactions. Build on it, make something amazing! Let me know what you make, I'd love to see!

Troubleshooting

If no values are displayed, ensure the Facebook Access Token entered is correct (it should be in the format 1111111111111111|X1xX11xX_XXXxXxXXX1xXXx1XXX, where 1 is a number and x is a letter.)

If you're still having problems:
  1. Ensure CURL is correctly configured in your environment and that all file permissions are correct.
  2. If you aren't serving the files from your web root, change the URL of $.get("./reactions.php?reaction=love", function(data, status){ on line 60 and $.get("./reactions.php?reaction=wow", function(data, status){ on line 66 respectively.

Email Me if you have any issues - otherwise, let me know what you've made - I'd love to see it in action!

fblivepoll's People

Contributors

haydenryan avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.