Follow @irsahindesigns

Add Twitter Social Share Button/Icon - Pop-Up Window Tweets

In this tutorial, we would show you on how to add custom browser friendly pop up social share button for Twitter. You can customise Twitter's equired icons/images accordingly to your website's layout design. Your website will have more design consistency without ever depending on any 3rd party social sharing icons.

There were cross browser compatibility issues in using Jquery/Javascripts, 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! Please keep us updated on any issues with the available browsers in the market to date.

Code given 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's 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 community.

Obviously, the reasons for you in installing Twitter's social share button/icon is for;

Social Aspect;

• Ease user's share via small pop up window on same webpage.
• Preventing social website login/share opening up new window on same browser
• Enhance your posts/articles/website visibility - depending on shared frequency.
• Shared directly from your website without redirecting to social site's.

Technical Aspect;

• Improve site load speed - quick icon/image rendering.
• Lower external script calls - improve website 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.
• Known issues that social site server's error's and slowing down page speed during icon/image rendering. 

How to Add and Install Twitter Custom Pop Up Social Share Button/Icon

> Upload your Twitter image/icon via FTP to your webhost.

> Copy the generated image/icon/graphic URL 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://twitter.com/share?url=YOUR-WEBPAGE-PERMALINK/URL'&text=YOUR-TWITTER-NAME, 'popupwindow', 'scrollbars=yes,width=800,height=400');popUp.focus();return false"><img class="share-twitter" src="YOUR-TWITTER-IMAGE-ICON-URL" alt="Social Share Icon for Twitter" title="Tweet our articles at Twitter" /></a>

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

Required Fields (For concrete5 CMS users, please refer c5 installation section):-

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

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

YOUR TWITTER NAME - Include your Twitter ID ie. @irsah_blog or sample text which you want to include in your shared tweets.

YOUR TWITTER IMAGE/ICON URL - Include the saved Twitters image/icons/graphic URL which you have uploaded previously. 

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-twitter {margin: 0 0 0 5px}

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

concrete5 installation section - use global c5 CMS PHP codes below;

YOUR WEBPAGE PERMALINK/URL- Include your concrete5 PHP "get" link code for pages which exactly looks like this :

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

YOUR TWITTER IMAGE/ICON URL - Include the saved Twitter image/icon URL uploaded previously, by adding code like so:

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

In addition, you can add below code at YOUR TWITTER NAME to fully utilise Tweets and shared informations.

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

concrete5 CMS PHP 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.

You can find more tutorials for PHP powered websites/blogs to include/customise your social sharing ie Google+ pop-up buttons at related links below. All codes have been tested and still workable with popular web browsers. Have fun coding your customised cross browser function Twitter social share button/icons and happy Tweeting!