Irsah in Designs


Custom Google+ Pop Up Social Share Buttons/Icons Improve Website




In this tutorial, we would like to share with you on how to add/install a workable/custom browser friendly pop up social share button for Google Plus. In addition, you can customise the required icons/images accordingly to your website's current/future layout design. Which means, your site will have more design consistency without ever to depend on any 3rd party social sharing buttons/icons.

Code given below was tested and works with PHP driven websites ie. Wordpress, concrete5, Joomla, Drupal etc. No external javascripts required and it can be easily customised to your website preference. Do take note that, certain CMS powered websites/blogs will require for you to include work arounds, and you can find solutions via their respective forums/community/support.

There were cross browser compatibility issues, but this code was tested and managable on major web browsers ie. Google Chrome, Internet Explorer 7, IE8 and FireFox - even with the browser pop-up blocker activated! Please keep us updated on any issues with the available browsers in the market to date. Thank you. 

Custom_Google_Pop_Up_Share_Buttons-Icons_Improve_Website_-_Small-BizNext.jpg

Why do want to host your own Google+ social sharing/button pop up on your site?

Socially;

  • Easy user use and share via small pop up window on same webpage.
  • Prevent social website login/share opening up new window on same browser
  • Giving your posts/articles "automatic feets" - depending on shared frequency.
  • Shared directly from your website without redirecting to social sharing site web pages.

Technically;

  • Improve website load speed - quick icon/image rendering.
  • Lower external script calls - improve site performance
  • Lower header http calls - minimal browser request to load webpage.
  • Lower CDN and non dependable on external server web scripts.
  • Cross browser safe - works on major browsers ie Chrome, IE and FireFox
  • Workable PHP/Javascripts - no external/additional Js files needed.
  • Easy customisation and optimisation for images
  • Easy customise and optimise tags and title. 

 

Guide in Adding/Install Google+ Custom Pop Up Social Share Button/Icon

> Upload your Google+ image/icon via FTP to your webhost.

> Copy the generated URL for the image/icon and save it to your favourite text editor is MsWordPad, Crimson Editor etc.

> Copy the PHP and Javascript code below:-

<a href="#" onclick="popUp=window.open('https://plus.google.com/share?url=YOUR-WEBPAGE-PERMALINK/URL', 'popupwindow', 'scrollbars=yes,width=800,height=400');popUp.focus();return false"><img class="share-googleplus" src="YOUR-GOOGLE+-IMAGE-ICON-URL" alt="Social Share Articles on GooglePlus" title="Share articles to GooglePlus" /></a>

> Paste the above code in your customised <div>....</div> section in your website themes/templates/blocks.

 

Required Fields:-

 

YOUR WEBPAGE PERMALINK/URL - Include your PHP permalink driven code here ie. for WordPress users, your PHP code will look like this :

<?php $permalink = get_permalink( $id ); ?>

YOUR GOGGLE+ IMAGE/ICON URL - Include the saved URL from your uploaded Google+ image/icon. 

Note: For WordPress powered websites/blogs, the were known issues of broken links in different web browsers. The solution would be is to use the exact code (in one sequence); PHP, Javascript and images URL fields as shown above.

 

Customised Stylesheets Class;

.share-googleplus {margin: 0 0 0 5px}

Note: Stylesheet above indicate icon/image with 5px margins to the right. Style to your needs and website layout.

 

For concrete5 users, you can use the PHP codes below;

 

YOUR WEBPAGE PERMALINK/URL- Include your concrete5 PHP "get" page link code which exactly look like this :

<?php  echo $nav->getLinkToCollection($c, true); ?>

YOUR GOGGLE+ IMAGE/ICON URL - Include the saved URL for your uploaded Google+ image/icon in your images theme path like so:

<?php  echo $this->getThemePath(); ?>/YOUR-IMAGE-FOLDER/YOUR-IMAGE-FILE-NAME.png

 

In addition, to optimise your URL structure, you can add  this code in your alt or title tags, which ever suits you best.

<?php  echo $c->getCollectionName(); ?>

 

concrete5 PHP Code Explanations;

<?php  echo $nav->getLinkToCollection($c, true); ?>

 - concrete5 global PHP code to insert your page/post URL.

<?php  echo $this->getThemePath(); ?>

 - concrete5 PHP global code to insert your images via your theme path and folders.

<?php  echo $c->getCollectionName(); ?>

 - concrete5 PHP global code to insert your page/post title.

 

Additonal Hacks for concrete5 Users

In order for the social sharing icons/buttons to fetch your proper URL, description and page image, add code below in your 

<head>......</head>

 section in your header themes, before this code: 

<?php   Loader::element('header_required'); ?>

 

<?
$cPath = $c->getCollectionPath();
$canonicalURL = BASE_URL;
$canonicalURL.= $cPath;
$pageIndentifierVars = array('keywords','fID','tag','productID');
$canonicalVars = array(); foreach($pageIndentifierVars as $var)
if($_REQUEST[$var])
$canonicalVars[]= $var.'='.$_REQUEST[$var];
<link rel="canonical" href="<?= $canonicalURL ?>" />

Code provided by: concrete5packages - canoncial-urls

Note: Without the code above in your concrete5 theme headers, most social sharing will have errors/non fetching your page descriptions/images. We've tested in all our concrete5 powered websites and blogs, and still no known issues to date. However, we will keep you posted on relevant changes especially from social sharing website API end. 

Have fun coding your workable cross browser function, custom design pop-up social share Google+ buttons/icons!