Irsah in Designs
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;
Technical Aspect;
> 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.
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.
.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.
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(); ?>
<?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!