Yii 1.1: Simple Share Widget for Facebook, twitter and google+

18 followers

Simple Share Widget

This widget will show a Facebook "like" button and "comments" box together with "tweet" button and "google plusone" button on your page.

<?php
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.async=true;
            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.async=true;
        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";
    }
}

Usage

You can put the widget anywhere in your view like the following.

<?php
$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'.

<?php
$this->widget('SimpleShare', array(
    'pageTitle' => 'The title of the page.',
    'pageDescription' => 'The long descriptions of the page.',
));
?>

Notice

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.

Total 4 comments

#18483 report it
Rohit Suthar at 2014/11/05 02:17am
Social Share Button Yii Extension

All top social media share buttons like - facebook, twitter, linkedin and googleplus.

Download the Yii Extension here - http://www.yiiframework.com/extension/social-share-button

#14590 report it
softark at 2013/08/26 08:36am
asynchronous loading

I have modified the source code a bit to do asynchronous loading of javascripts from FB and twitter. It will make the loading of your web page faster.

#14171 report it
softark at 2013/07/24 10:48am
RE: Some errors

I also get the warning that says "getLoginStatus() called before calling FB.init()". But we don't have any means to avoid it, because it's not in my code but in FB code.

And please note that you have to replace 'ja' and 'ja_JP' with your language/locale identifier.

#14134 report it
speaki at 2013/07/22 09:45am
Some errrors

I get this js errors: The "fb-root" div has not been created, auto-creating all.js:56 FB.getLoginStatus() called before calling FB.init(). all.js:56 FB.getLoginStatus() called before calling FB.init(). all.js:56

NOTICE that the, facebook is on japane, sett sv_SE to get ex. swe

Leave a comment

Please to leave your comment.

Write new article