yii-facebook-opengraph

Hi,

I am new to Yii and trying to build an application with Facebook integration. I found an extension yii-facebook-opengraph as a wrapper of facebook php sdk. When I tried to place a facebook like button on my index.php, the like button doesn't show up. Here is my code:

In configuration /webroot/protected/config/main.php

    'components'=>array(
		...
		'facebook'=>array( 
			'class' => 'ext.yii-facebook-opengraph.SFacebook', 
			'appId'=>'My_Facebook_AppID', // needed for JS SDK, Social Plugins and PHP 	SDK
			'secret'=>'My_Facebook_App_Secret', // needed for the PHP SDK 
			//'locale'=>'en_US', // override locale setting (defaults to en_US) 
			//'jsSdk'=>true, // don't include JS SDK 
			//'async'=>true, // load JS SDK asynchronously 
			//'jsCallback'=>false, // declare if you are going to be inserting any JS callbacks to the async JS SDK loader 
			//'status'=>true, // JS SDK - check login status 
			//'cookie'=>true, // JS SDK - enable cookies to allow the server to access the session 
			//'oauth'=>true,  // JS SDK -enable OAuth 2.0 
			//'xfbml'=>true,  // JS SDK - parse XFBML / html5 Social Plugins 
			//'html5'=>true,  // use html5 Social Plugins instead of XFBML 
     		'ogTags'=>array(  // set default OG tags 
				'title'=>'My site title', 
				'description'=>'My site description', 
				//'image'=>'URL_TO_WEBSITE_LOGO', 
			), 
		),
		...
	),

In /webroot/protected/components/Controller.php, I've added the afterRender function

	protected function afterRender($view, &$output)
	{
    	parent::afterRender($view, &$output);
    	//Yii::app()->facebook->addJsCallback($js); // use this if you are registering any $js code you want to run asyc
    	Yii::app()->facebook->initJs(); // this initializes the Facebook JS SDK on all pages
    	Yii::app()->facebook->renderOGMetaTags(); // this renders the OG tags
    	return true;
	}

Finally, in /webroot/protected/views/site/index.php, I've added the following code in the end:

<?php $this->widget('ext.yii-facebook-opengraph.plugins.LikeButton', array(
   //'href' => 'YOUR_URL', // if omitted Facebook will use the OG meta tag
   'show_faces'=>true,
   'send' => true
)); ?>

After the page is rendered, I view source and found the following code in the html source

In the <header> section:

<meta property="og:title" content="My site title" />
<meta property="og:description" content="My site description" />
<meta property="fb:app_id" content="My_Facebook_AppID" />
<meta property="og:type" content="website" />
<meta property="og:url" content="My site URL" />

before the footer section, I saw the facebook like button rendered as

<div data-show_faces="true" data-send="true" data-skin="default" class="fb-like"></div>

before the end body tag, I saw:

 <script type="text/javascript">
/*<![CDATA[*/
window.fbAsyncInit = function(){FB.init({'appId':'My_Facebook_AppID','status':true,'cookie':true,'xfbml':true,'oauth':true});};
                (function(d){
 				var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 				js = d.createElement('script'); js.id = id; js.async = true;
 				js.src = '//connect.facebook.net/en_US/all.js';
 				d.getElementsByTagName('head')[0].appendChild(js);
                }(document));
/*]]>*/
</script>

It seems that the missing piece is a div

 <div id="fb-root"></div>

I did see code in SFacebook::initJs

            $fbRoot = '<div id="fb-root"></div>';
            Yii::app()->getClientScript()->renderBodyEnd($fbRoot);

Can anyone help me understand what I did wrong here and why the fb-root div was not rendered?

Many thanks!