Bikin Widget Followers Sendiri Bikin Widget Followers Sendiri

Yang paling penting disini Site ID dari Google friend connct. Site ID ini bisa elo dapet dari google.com/friendconnect/, caranya..

Hasilnya..

http://www.google.com/friendconnect/admin/site/overview?id=05313148485985746336

Site ID ini disimpen di Tampilan Tombol onclick="sowPolowerWer('05313148485985746336')"

Coba deh..

Show followers

Load friendconnect.js

<script type="text/javascript">
if(!document.getElementById('fb-root')){document.write('<div id="fb-root"></div>')}

function loadFriendConnectJs(){
  if(!window.google || !google.friendconnect){
    var gogfc = document.createElement('script'); gogfc.async = 'true';
        gogfc.src = 'http://www.google.com/friendconnect/script/friendconnect.js';
    document.getElementById('fb-root').appendChild(gogfc);
  }
}

loadFriendConnectJs();
</script>

Tampilan tombol

<div class="isi-mode" id="polower-wer" style="background-image:url(http://1.bp.blogspot.com/_bBL9ze_JZsw/TT_VysqlknI/AAAAAAAAAMs/OgtZMowV_m4/s1600/black50.png)">
  <center>
    <b class="uiButton" onclick="sowPolowerWer('05313148485985746336')">
      <img src="http://www.google.com/friendconnect/scs/images/googleicon.gif" style="margin-right:5px;margin-left:-3px;vertical-align:middle;"> 
      <span style="vertical-align:middle;">Show followers</span>
    </b>
  </center>
</div>

Tampilan Widget Followers

<script type="text/javascript">
function sowPolowerWer(siteId){
    var skin = {};
    skin['FACE_SIZE'] = '32';
    skin['HEIGHT'] = "16";
    skin['TITLE'] = "";
    skin['BORDER_COLOR'] = "transparent";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "#EFDF8A";
    skin['ENDCAP_LINK_COLOR'] = "#E5E5FF";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
    
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "#BBE4E8";
    skin['CONTENT_TEXT_COLOR'] = "#FEFAEF";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#FFFFFF";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#FFF6C8";
    skin['CONTENT_HEADLINE_COLOR'] = "#F2E8E2";
    skin['FONT_FACE'] = "verdana";
    google.friendconnect.container.setParentUrl("/");
    google.friendconnect.container["renderMembersGadget"](
    {id: "polower-wer",
     height: 16,
     site: siteId,
      locale: 'en_US' },
     skin);
}
</script>

CSS Tampilan tombol

<style type="text/css"><!--
.uiButton{
  font-family:"lucida grande",tahoma,verdana,arial,sans-serif; 
  color:#000033; 
  text-decoration:none; 
  cursor:pointer; 
  background-color:#FFFFEE; 
  background-image:url(http://www.deltechcorp.com/deltech02/brazil10/picts/menu.gif); 
  padding:3px 10px; 
  display:inline-block; 
  border:1px solid #3B5999; 
  -moz-border-radius:3px; border-radius:3px; 
  margin:1px; 
  font-size:11px;
}
.uiButton:hover, .uiButton:focus, .uiButton:active{
  color:darkred; 
  text-decoration:none; 
  border:1px solid darkred;
}
.uiButton:focus, .uiButton:active{
  background-image:none;
}
--></style>