This widget will show a Facebook "like" button and "comments" box together with "tweet" button and "google plusone" button on your page.
class SimpleShare extends CWidget { /** * Site Name * @var string * defaults to Yii::app()->name */ public $siteName = ''; /** * Site Administrator's Facebook ID * @var string */ public $fbSiteAdmin = 'XXXXXXXXXXXXXX'; /** * URL of the page * @var string * defaults to the current page URL */ public $pageUrl = ''; /** * Title of the page * @var string */ public $pageTitle = ''; /** * Type of the Page : eg. website, article, ... etc. * @var string * defaults to 'article' */ public $pageType = ''; /** * Description of the page * @var string */ public $pageDescription = ''; /** * Image(s) of the page * @var mixed * can be a single string or array of strings * defaults $this->defaultPageImage */ public $pageImages = ''; /** * Default image of the page * @var string */ public $defaultPageImage = '/images/fb/site-logo.jpg'; /** * Show Comments * @var boolean * defaults to true */ public $showComments = true; /** * Minimum IE version required * @var string */ public $minimumIEVersion = '8'; /** * Initialization * @see CWidget::init() */ public function init() { parent::init(); // Site Name if ($this->siteName == '') { $this->siteName = Yii::app()->name; } // base URL $baseUrl = Yii::app()->request->hostInfo . Yii::app()->request->baseUrl; // URL of the page if ($this->pageUrl == '') { $this->pageUrl = $baseUrl . '/' . Yii::app()->request->pathInfo; } // Type of the page if ($this->pageType == '') { $this->pageType = 'article'; } // Set opengraph meta tags /** @var CClientScript $cs */ $cs = Yii::app()->getClientScript(); $cs->registerMetaTag($this->siteName, NULL, NULL, array('property'=>'og:site_name')); $cs->registerMetaTag($this->fbSiteAdmin, NULL, NULL, array('property'=>'fb:admins')); $cs->registerMetaTag($this->pageUrl, NULL, NULL, array('property' =>'og:url')); $cs->registerMetaTag($this->pageTitle, NULL, NULL, array('property'=>'og:title')); $cs->registerMetaTag($this->pageType, NULL, NULL, array('property'=>'og:type')); // Description of the page if ($this->pageDescription != "") { $cs->registerMetaTag($this->pageDescription, NULL, NULL, array('property'=>'og:description')); } // Image(s) of the page if (is_array($this->pageImages)) { if (count($this->pageImages) == 0) { $this->pageImages = $this->defaultPageImage; } foreach($this->pageImages as $image) { $cs->registerMetaTag($baseUrl . $image, NULL, NULL, array('property'=> 'og:image')); } } else { if ($this->pageImages == "") { $this->pageImages = $this->defaultPageImage; } $cs->registerMetaTag($baseUrl . $this->pageImages, NULL, NULL, array('property'=> 'og:image')); } // javasctipt to enable the gadgets $init_js = <<< INIT_JS var msie = navigator.appVersion.toLowerCase(); msie = (msie.indexOf('msie')>-1) ? parseInt(msie.replace(/.*msie[ ]/,'').match(/^[0-9]+/)) : 0; if (msie == 0 || msie >= $this->minimumIEVersion) { $('#sns-share').show(); // google plus one window.___gcfg = { lang: 'ja' }; (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })(); // twitter !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0], p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+'://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js,fjs); } }(document, 'script', 'twitter-wjs'); // facebook (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); } INIT_JS; $cs->registerScript('init-sns-share', $init_js, CClientScript::POS_READY); } /** * Display the widget * @see CWidget::run() */ public function run() { echo '<div id="sns-share" style="display:none">' . "\n"; echo '<h3>Share the page with Facebook, twitter and google plusone</h3>' . "\n"; echo '<div class="sns-share-buttons">' . "\n"; // google plusone echo '<div class="google-plus" style="float:right">' . "\n"; echo '<g:plusone size="medium" href="' . $this->pageUrl . '"></g:plusone>' . "\n"; echo '</div>' . "\n"; // twitter $tw_text = $this->siteName . ' - ' . $this->pageTitle; if ( $this->pageDescription != '') { $tw_text .= ' : ' . $this->pageDescription; } echo '<div class="tweet-button" style="float:right">' . "\n"; echo '<a href="https://twitter.com/share" ' . 'class="twitter-share-button" ' . 'data-url="' . $this->pageUrl . '" ' . 'data-text="' . $tw_text . '" ' . 'data-count="horizontal">Tweet</a>' . "\n"; echo '</div>' . "\n"; // facebook echo '<div class="fb-like" ' . 'data-href="' . $this->pageUrl . '" ' . 'data-send="true" ' . 'data-width="500" ' . 'data-show-faces="false"></div>' . "\n"; if ($this->showComments) { echo '</div>' . "\n"; echo '<div class="facebook-comments">' . "\n"; echo '<div class="fb-comments" ' . 'data-href="' . $this->pageUrl . '" ' . 'data-num-posts="4" ' . 'data-width="600"></div>' . "\n"; } echo '</div>' . "\n"; echo '</div>' . "\n"; } }
You can put the widget anywhere in your view like the following.
$this->widget('SimpleShare', array( 'pageTitle' => 'The title of the page.', 'pageDescription' => 'The long descriptions of the page.', 'pageType' => 'article', 'pageImages' => array('/images/001.jpg', '/images/002.jpg'), ));
'pageImages' can be an array of strings (up to 5 images).
You may want to use the default values for 'pageType' and 'pageImages'.
$this->widget('SimpleShare', array( 'pageTitle' => 'The title of the page.', 'pageDescription' => 'The long descriptions of the page.', ));
This is a kind of quick and dirty code just to satisfy the specific needs of mine. But I hope it will show the basic know-hows to implement those gadgets in an yii-powered site.
You may want to customize the widget according to your needs, or want to make it much more flexible and generic.
And also you would like to give some tries to these extensions.
Be the first person to leave a comment
Please login to leave your comment.