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:
[html]
<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" />[/html]
before the footer section, I saw the facebook like button rendered as
[html]
<div data-show_faces="true" data-send="true" data-skin="default" class="fb-like"></div>[/html]
before the end body tag, I saw:
[html]
<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>
[/html]
It seems that the missing piece is a div
[html]
<div id="fb-root"></div>[/html]
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!