Add Facebook to My Blog :D

Social Plugins

Yang paling penting dari Social Plugin adalah Like Button, yang ngemungkinin users buat nge-share halaman elo ke temen-temen mereka dengan hanya sekali click. Elo bisa nge-add a Like button ke halaman mana aja dengan sebuah iframe tag:

<iframe src="http://www.facebook.com/plugins/like.php?href=http://semuthitam-takberbusana.blogspot.com"
     scrolling="no" frameborder="0"
     style="border:none; width:450px; height:80px"></iframe>

Sekali elo udah punya Like Button di blog elo, elo bisa masukin Social Plugins yang lainnya buat nambah user interactions menjadi lebih engaging experiences throughout your site :P.

Here are the activity and recommendations plugins for the Semut Hitam Tak Berbusana's blog:

Activity Feed Plugin	Recommendations Plugin

Kalo elo punya Application Facebook elo bisa nge-load JavaScript SDK buat user login ke applikasi elo melalui blog elo.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
      <script>
         FB.init({ 
            appId:'101507343237619', cookie:true, 
            status:true, xfbml:true 
         });
      </script>
      <fb:login-button>Login with Facebook</fb:login-button>

Login with Facebook
Click here to Refresh

---

Sekarang yang mesti lo lakuin cuman masuk ke http://www.facebook.com/developers/apps.php dan pilih Applikasi lo,

Baru sekarang lo bisa coba ganti SCRIPT di atas jadi kaya gini...

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>

<script>
  FB.init({ 
    appId:'101507343237619', cookie:true, 
    status:true, xfbml:true 
  });
</script>

<div id="epbelogin">
  <fb:login-button>Login with Facebook</fb:login-button><br/>
  <a href="">Click here to Refresh</a>
</div>

<script>
   FB.api('/me', function(user) {
      if(user.name) {
         var image = document.getElementById('image');
         image.src = 'http://graph.facebook.com/' + user.id + '/picture';
         var name = document.getElementById('name');
         name.innerHTML = user.name;
         document.getElementById('epbelogin').style.display='none';
      }
   });
</script>

           <div align="center">
           <img id="image"/>
           <div id="name"></div>
           </div>