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.

 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.

<!--**************************************************-->
<!-- 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>