Yii 2 Support for Social Networks
- Share a Link button: https://about.twitter.com/resources/buttons
// Twitter: Share a link $curUri = Html::encode(Yii::$app->params['companyWebsite'].Yii::$app->request->getUrl()); echo '<a href="https://twitter.com/share" class="twitter-share-button" data-url="'.$curUri.'">Tweet</a>'; echo Html::script( "!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');" ); echo "\n\n";
- Share button: https://developer.linkedin.com/plugins/share
// LinkedIn Share button $curUri = Html::encode(Yii::$app->params['companyWebsite'].Yii::$app->request->getUrl()); echo '<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>'; echo '<script type="IN/Share" data-url="'.$curUri.'" data-counter="right"></script>';
- Pin-it button: https://developers.pinterest.com/tools/widget-builder/
// Pinterest Pin-it button $curUri = Html::encode(Yii::$app->params['companyWebsite'].Yii::$app->request->getUrl()); echo '<a data-pin-do="buttonPin" data-pin-color="red" data-pin-count="beside" href="https://www.pinterest.com/pin/create/button/?url='.$curUri.'&media='.$curUriImg.'&description='.strip_tags($model['title']).'"> <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_red_20.png" /></a>'; echo '<script async defer src="//assets.pinterest.com/js/pinit.js"></script>';
Google+
$curUri = Html::encode(Yii::$app->params['companyWebsite'].Yii::$app->request->getUrl()); // Google+ G+1 button //echo '<!-- Google+ G+1 button (STATIC) -->'; // Place this tag in your head or just before your close body tag. //echo '<script src="https://apis.google.com/js/platform.js" async defer></script>'; // Place this tag where you want the +1 button to render. //echo '<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="100"></div>'; echo '<!-- Google+ G+1 button (DYNAMIC) -->'; // Place this tag where you want the +1 button to render. echo '<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="100" data-href="'.$curUri.'"></div>'; // Place this tag after the last +1 button tag echo Html::script(" (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();");
Step 1: Include the JavaScript SDK on your page once, ideally right after the opening <body> tag.
<!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script>(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/en_US/sdk.js#xfbml=1&version=v2.6"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
Step 2: Place this code wherever you want the plugin to appear on your page.
<!-- Your like button code --> <div class="fb-like" data-href="https://www.acme.com" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"> </div>
Alternatively, when using iframe:
<!-- Your like button code --> <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.audina.net&width=124&layout=button_count&action=like&show_faces=true&share=true&height=46&appId" width="124" height="46" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
Custom Metatags in Views
You need the following metatags for the pages being generated:
<html> <head> <title>Your Website Title</title> <!-- You can use open graph tags to customize link previews. Learn more: https://developers.facebook.com/docs/sharing/webmasters --> <meta property="og:url" content="http://www.your-domain.com/your-page.html" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Your Website Title" /> <meta property="og:description" content="Your description" /> <meta property="og:image" content="http://www.your-domain.com/path/image.jpg" /> </head> <body> ... </body> </html>
In Yii, these meta tags have to be inserted in the required view:
$curUri = Html::encode(Yii::$app->params['companyWebsite'].Yii::$app->request->getUrl()); $this->registerMetaTag(['property' => 'og:url', 'content' => $curUri]); $this->registerMetaTag(['property' => 'og:type', 'content' => 'article']); $this->registerMetaTag(['property' => 'og:title', 'content' => Html::encode($this->title)]); $this->registerMetaTag(['property' => 'og:description', 'content' => strip_tags($model['intro_text'])]); $this->registerMetaTag(['property' => 'og:image', 'content' => Html::encode(Yii::$app->params['companyWebsite'] . Yii::$app->urlManagerBackend->createUrl('').'media/'.$model['main_image'] )]); echo "\n\n"; // Load Facebook SDK for JavaScript echo '<!-- Load Facebook SDK for JavaScript --> <div id="fb-root"></div> <script>(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/en_US/sdk.js#xfbml=1&version=v2.6"; fjs.parentNode.insertBefore(js, fjs); }(document, "script", "facebook-jssdk")); </script>'; echo "\n\n"; // Facebook 'Like' button code echo '<!-- Facebook Like button code --> <div class="fb-like" data-href="' . $curUri . '" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"> </div>'; echo "\n\n";
Custom Metatags in Controllers
Alternatively, you can automatically add it to each view. First, add it to your controller, or create your own extended version of Controller, such as MyController:
class MyController extends Controller { public function beforeAction($event) { $this->view->title = Yii::$app->params['pageTitle']; // Get customized meta tags (keywords, author, etc.) from the params config file as a default. \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultDescription'], "default_description"); \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultKeywords'], "default_keywords"); \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultAuthor'], "default_author"); // Open Graph Tags \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultOG_Description'], "default_og_description"); \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultOG_SiteName'], "default_og_sitename"); \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultOG_Title'], "default_og_title"); \Yii::$app->view->registerMetaTag(Yii::$app->params['pageDefaultOG_Type'], "default_og_type"); return parent::beforeAction($event); } }
Any new controllers created would extend MyController (instead of Controller), to get the defaults meta tags attached automatically.
If you need to customize a meta tag in some actions, you can override it:
class FancyController extends MyController { ... public function actionIndex() { // Replace the default value for 'description' \Yii::$app->view->registerMetaTag([ 'name' => 'description', 'content' => 'A custom description for Index view', 'id' => 'main_index' ], 'main_index' ); return $this->render('index'); } }