├── LICENSE ├── README.md ├── bg.jpg ├── haha.png ├── like.png ├── love.png ├── reactions.html ├── reactions.php ├── style.css └── wow.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 haydenryan 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ##### 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](https://react.cast.net.au/polls/), no coding required! 2 | 3 | # Facebook Live Video Polling 4 | Useful features: 5 | * Automatically update reaction count from Facebook Graph API 6 | * Basic CSS Animations 7 | * Responsive - resizes to any browser size perfectly 8 | 9 | ... and *more*! :+1: 10 | 11 | ![FBLivePoll Demo](http://i.imgur.com/Vy5Kepg.png) 12 | > Basic demo of FBLivePoll 13 | 14 | ## Getting Started 15 | #### Step 1. Facebook Graph Access Token 16 | You'll need to set up a new App in Facebook (see the guide [here](https://developers.facebook.com/docs/marketing-api/authentication), 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. 17 | 18 | ```php 19 | $videoid="VIDEO_ID_HERE"; 20 | // The ID of the Live Video 21 | $access_token="ACCESS_TOKEN_HERE"; 22 | // Your Facebook app's access token in the format 1111111111111111|X1xX11xX_XXXxXxXXX1xXXx1XXX 23 | ``` 24 | 25 | #### Step 2. Customise the appearance of the 'reactions.html' file 26 | - The background image and appearance can be customised in 'style.css' 27 | - The options and symbols can be customised in 'reactions.html'. Reaction icons are included 28 | - The 'reactions.html' file is based on Bootstrap. For more information on the Bootstrap grid system, [read the Bootstrap docs](http://getbootstrap.com/css/#grid) 29 | 30 | #### Step 3. Add 'reactions.html' as source in OBS 31 | 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. 32 | 33 | Still need to choose a software package to go Live with? [Facebook]((https://www.facebook.com/facebookmedia/get-started/live)) has a list of compatible software. 34 | 35 | #### Step 4. Go Live! 36 | 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. 37 | 38 | 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](https://www.facebook.com/facebookmedia/get-started/live) 39 | 40 | 41 | ##### Feel like a tinker? 42 | 43 | FBLivePoll is based on [Bootstrap](http://getbootstrap.com) and uses the Facebook [Graph API](https://developers.facebook.com/docs/graph-api) to fetch reactions. Build on it, make something amazing! [Let me know](mailto:hayden@gennext.net.au) what you make, I'd love to see! 44 | 45 | 46 | ##### Troubleshooting 47 | 48 | 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.) 49 | 50 | ##### If you're still having problems: 51 | 1. Ensure CURL is correctly configured in your environment and that all file permissions are correct. 52 | 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. 53 | 54 | [Email Me](mailto:hayden@gennext.net.au) if you have any issues - otherwise, let me know what you've made - I'd love to see it in action! 55 | -------------------------------------------------------------------------------- /bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haydenryan/FBLivePoll/3c5589c88e86639c438d71a9dfd52aa117266f2b/bg.jpg -------------------------------------------------------------------------------- /haha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haydenryan/FBLivePoll/3c5589c88e86639c438d71a9dfd52aa117266f2b/haha.png -------------------------------------------------------------------------------- /like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haydenryan/FBLivePoll/3c5589c88e86639c438d71a9dfd52aa117266f2b/like.png -------------------------------------------------------------------------------- /love.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haydenryan/FBLivePoll/3c5589c88e86639c438d71a9dfd52aa117266f2b/love.png -------------------------------------------------------------------------------- /reactions.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Facebook Live Reactions 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 21 | 22 | 23 | 24 | 33 | 34 |
35 |
36 |
37 |
38 |

HOLDEN

39 | 40 |

0

41 |
42 |
43 |
44 |
45 |

FORD

46 | 47 |

0

48 |
49 |
50 |
51 |
52 | 53 | 54 | 55 | 56 | 57 | 58 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /reactions.php: -------------------------------------------------------------------------------- 1 | reactions_love->summary->total_count; 30 | $wow=$obj->reactions_wow->summary->total_count; 31 | $haha=$obj->reactions_haha->summary->total_count; 32 | $like=$obj->reactions_like->summary->total_count; 33 | $angry=$obj->reactions_angry->summary->total_count; 34 | $sad=$obj->reactions_sad->summary->total_count; 35 | 36 | // just echo the JSON data if the json variable is set 37 | if (isset($_GET['json'])){ 38 | echo $result; 39 | die; 40 | } 41 | 42 | // If requesting an INDIVIDUAL reaction (ie. reaction variable is set in URL), display only the quantity of that specific reaction 43 | if (isset($_GET['reaction'])){ 44 | $reaction=$_GET['reaction']; 45 | switch ($reaction) { 46 | case "love": 47 | echo $love; 48 | break; 49 | case "wow": 50 | echo $wow; 51 | break; 52 | case "haha": 53 | echo $haha; 54 | break; 55 | case "like": 56 | echo $like; 57 | break; 58 | case "angry": 59 | echo $angry; 60 | break; 61 | case "sad": 62 | echo $sad; 63 | break; 64 | } 65 | // Otherwise, if the reaction variable is NOT set in the URL, display the quantity of all reactions - this is good for testing purposes 66 | } else { 67 | echo "LOVE: $love, WOW: $wow, HAHA: $haha, LIKE: $like, ANGRY: $angry, SAD: $sad"; 68 | } 69 | ?> 70 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 2 | To change the background image, alter the URL below 3 | */ 4 | body { 5 | background-image: url('bg.jpg'); 6 | background-size: cover; 7 | } 8 | 9 | #mainrow { 10 | height: 100%; 11 | padding-top: 15%; 12 | } 13 | 14 | #react-cont { 15 | width: 200px; 16 | height: 200px; 17 | } 18 | 19 | h1 { 20 | color: #ffffff; 21 | text-shadow: 2px 2px 5px #000000; 22 | } 23 | 24 | .qty { 25 | border-radius: 50%; 26 | 27 | width: 80px; 28 | height: 80px; 29 | padding-top: 15px; 30 | 31 | background: #666666; 32 | border: 2px solid #666666; 33 | color: #ffffff; 34 | text-align: center; 35 | } 36 | 37 | 38 | /* 39 | To TURN OFF animations, delete or comment out the rest of this file 40 | */ 41 | .rotate { 42 | animation-name: rotate; 43 | animation-duration: 10s; 44 | animation-iteration-count: infinite; 45 | } 46 | 47 | .rotate2 { 48 | animation-name: rotate2; 49 | animation-duration: 9s; 50 | animation-iteration-count: infinite; 51 | } 52 | 53 | @keyframes rotate { 54 | 0% {width: 72px; height: 72px;} 55 | 30% {width: 72px; height: 72px; transform: rotate(0deg);} 56 | 40% {width: 130px; height: 130px; transform: rotate(20deg);} 57 | 50% {width: 72px; height: 72px; transform: rotate(0deg);} 58 | 59 | } 60 | 61 | @keyframes rotate2 { 62 | 0% {width: 72px; height: 72px;} 63 | 60% {width: 72px; height: 72px; transform: rotate(0deg);} 64 | 70% {width: 130px; height: 130px; transform: rotate(-20deg);} 65 | 80% {width: 72px; height: 72px; transform: rotate(0deg);} 66 | 67 | } 68 | 69 | -------------------------------------------------------------------------------- /wow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/haydenryan/FBLivePoll/3c5589c88e86639c438d71a9dfd52aa117266f2b/wow.png --------------------------------------------------------------------------------