Display Live Facebook Poll Counters in Your Blog

Facebook groups are the best places to conduct polls. Presently Facebook is the widest used social networking site and it also allows to conduct poll through its own polling interface. So why unnecessarily somebody will use any other plugin/platform for this purpose. Moreover in Facebook, the probability of getting more votes is higher.  Thanks to Facebook for providing such a beautiful option.

Just before a week we got a request from one of our active visitor regarding how to display the Facebook poll counters on a web page. Hmmm.... definitely a good idea to reach maximum audience and get maximum votes. You can access the Live poll counters from Facebook groups through API call and display them on your blog. Lets see how.

How this works


Here is the basic block diagram which gives you a brief idea about how the entire system works.

Live Facebook poll counter


 How to do this


This can be easily implemented within 5 minutes. You will need following two thing to proceed ahead.
  1. One Google account 
  2. One Facebook account

Go through following steps one by one
  • Visit this page to create a new Facebook app
  • Click on the button "Create New App", provide an app name and app category and click on continue button.
  • Once you create the app, you will get an app id and app secret. Keep them with you.
  • Open Facebook graph API explorer to grant permission for your app. Make sure that your newly created app is selected in the drop down.
  • Click on the button "Get Access Token", a pop will appear to choose the permissions.
  • Select user_questions (1st tab), friends_questions (2nd tab) and then click on "Get Access Token".
  • Now create a new copy of this Google Spreadsheet. (Goto File-->Make a copy...)
  • Provide your Facebook app ID and app secret in their respective places. Leave the poll ID and destination spreadsheet key blank, you will fill them after a while.
  • Now crate a new copy of this spreadsheet. (Goto File-->Make a copy...)
  • After you create just look at the URL, it will be like as mentioned below.

    https://docs.google.com/spreadsheet/ccc?key=XXXXXXXXXXXXX#gid=0
  • Now copy the spreadsheet key (XXXXXXXXXXXXX) and paste it in the previous spreadsheet as the destination spreadsheet key.
  • Now you need to provide the Facebook poll ID.
  • Assuming you have already posted a question on Facebook, Just right click on the "Share" link present below your poll and click on Copy link location(Firefox) or Copy link address(Chrome) to get the URL. In my case the URL was,

    https://www.facebook.com/ajax/sharer/?s=23&appid=10150110253435258&p%5B0%5D=177089245770224&profile_id=147527852059697&share_source_type=group
  • The red portion is the poll ID. Only copy-paste the numerical ID in the spreadsheet, don't provide the entire poll URL.
  • Then Go to your destination spreadsheet, File-->Share..., and share the spreadsheet as public on web
    To publish the spreadsheet to web, go to File-->Publish to the web...-->Start publishing 
  • Now you are just one step away. Go to first Spreadsheet-->Go to menu bar-->Control Panel-->Start the application
To display the counters on your blog, copy and paste the following code.
 
<!--**************************************************-->
<!-- Facebook Live Poll Counter -->
<!-- Published by www.funbutlearn.com -->
<!--**************************************************-->
<style>
 .outerPollDiv{
  width:250px;
  border:1px solid #c0c0c0;
  border-radius:4px;
  box-shadow:3px 3px 5px #d0d0d0;
  background-color:#f8f8f8;
 }
 .pollPaddingDiv{
  margin:15px;
 }
 .pollQuesDiv{
  padding:10px;
  border:1px solid #A7CCD6;
  background-color:#C8DFE6;
  border-radius:4px;
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:13px;
  margin-bottom:20px;
 }
 .pollGraphDiv{
  background-image: linear-gradient(to bottom, #FACBB1 0%, #FA5C07 100%);
  background-image: -moz-linear-gradient(top, #FACBB1 0%, #FA5C07 100%);
  background-image: -o-linear-gradient(top, #FACBB1 0%, #FA5C07 100%);
  background-image: -webkit-linear-gradient(top, #FACBB1 0%, #FA5C07 100%);
 }
 .outerPollGraph{
  width:100%;
  border:1px solid #d0d0d0;
  height:12px;
  margin-bottom:15px;
  margin-top:3px;
 }
 .pollGraphDiv{
  height:100%;
 }
 .pollOptionsDiv{
  font-family:Verdana,Arial,Helvetica,sans-serif;
  font-size:11px;
 }
</style>
<div class="outerPollDiv">
 <div class="pollPaddingDiv">
  <div id="pollQuesDiv" class="pollQuesDiv">
  
  </div>
  <div id="pollOptionsDiv" class="pollOptionsDiv">

  </div>
  <div id="pollFooterDiv" class="pollOptionsDiv">

  </div>
 </div>
</div>

<textarea id="hiddenPollData" style="display:none"></textarea>
<script type="text/javascript">
function getReply(data) {
 var htmlData = document.getElementById("hiddenPollData");
 htmlData.value="";
 var totalVote=0;
 for(i=0;i<data.feed.entry.length;i++){
  totalVote+=parseInt(data.feed.entry[i].gsx$vote.$t, 10);
 }
 
 for(i=0;i<data.feed.entry.length;i++){
     var entry = data.feed.entry[i];
  var percent = (parseInt(entry.gsx$vote.$t, 10)/totalVote)*100;
  htmlData.value+=entry.gsx$option.$t+'&nbsp;&nbsp;('+entry.gsx$vote.$t+' votes)<div class="outerPollGraph" title="'+percent.toFixed(2)+'%"><div id="pollGraphDiv" style="width:'+percent+'%" class="pollGraphDiv" ></div></div>';
 }
 document.getElementById("pollOptionsDiv").innerHTML=document.getElementById("hiddenPollData").value;
 document.getElementById("pollQuesDiv").innerHTML=data.feed.entry[0].gsx$question.$t;
 document.getElementById("pollFooterDiv").innerHTML='Total votes: '+totalVote+' (<a style="text-decoration:none;" target="_blank" href="http://www.facebook.com/questions/'+data.feed.entry[0].gsx$questionid.$t+'">Your opinion</a>)<br/><br/><img src="https://lh3.googleusercontent.com/-g3NAZatkXpY/Ud2JYUF0lII/AAAAAAAAFCE/MNtxWYZHw-Q/h120/facebook.png"> Live counters from Facebook';
}
</script>

 <script type="text/javascript" src="https://spreadsheets.google.com/feeds/list/0AgHK_Z79lrOmdHdfMnFpQlRkZnFVbXdTYVB2WGQtZkE/od6/public/values?alt=json-in-script&callback=getReply"></script>

Note: At the bottom of above code you will find a script tag as follow. Just replace the bold red part with your own destination spreadsheet key.

<script type="text/javascript" src="https://spreadsheets.google.com/feeds/list/0AgHK_Z79lrOmdHdfMnFpQlRkZnFVbXdTYVB2WGQtZkE/od6/public/values?alt=json-in-script&callback=getReply"></script>

For any queries drop a comment.