Irsah in Designs
Yet another series of great tutorial updates on customising social share button/icons for StumbleUpon and workable too! In this tutorial, we would show you, how to add browser friendly pop up share button for StumbleUpon social site. You can customise the buttons as desired, accordingly to your website's layout with your own images and css classes. This way your site will be more consistently designed without ever to adapt 3d party generated sharing buttons/icons.
Again, cross browser compatibility issues for Jquery/Javascripts was in mind, but we found this code workable on major web browsers ie. Google Chrome, Internet Explorer 6,7 and IE8, IE9 and even FireFox (latest versions). Tested and used by many of our friends and clients websites to further enhance overall site layout and users needs. If there are any issues, please keep us posted and hopefully we'll find usable workarounds.
The StumbleUpon pop-up social sharing icons/buttons works with PHP driven websites ie. concrete5, Wordpress, Drupal etc. No external javascripts required and it can be easily customised to your website's preference. Take acccounted for, certain CMS powered websites/blogs will require for you to include additonal requirements for customisations, you can find solutions via their respective community.
And as usual, some of the reasons in installing StumbleUpon pop-up social share button/icon is for;
Social Aspect;
Technical Aspect;
> Upload your favourite/chosen StumbleUpon 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 for the pop-up icon/button:-
<a href="#" onclick="popUp=window.open('https://www.stumbleupon.com/submit?url=YOUR-WEBPAGE-PERMALINK/URL', 'popupwindow', 'scrollbars=yes,width=800,height=400');popUp.focus();return false"><img class="share-stumbleupon" src="YOUR-TWITTER-IMAGE-ICON-URL" alt="Social Stumble/Share Icon for StumbleUpon" title="Stumbled our articles at StumbleUpon" /></a>
> Paste the above code in your customised <div>....</div>
section in your website themes/templates/blocks for the dedicated social sharing buttons area.
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 STUMBLEUPON IMAGE/ICON URL - Include the saved Stumbleupon image/icons/graphic URL which you have uploaded via FTP 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-stumbleupon {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 STUMBLEUPON IMAGE/ICON URL - Include the saved Stumbleupon image/icon URL uploaded previously to your themes folder, 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 PAGE TITLE to fully utilise tags 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.
Find more tutorials for PHP powered websites/blogs to customise your social sharing ie Google+, Twitter, Facebook pop-up buttons at related links below. All PHP/javascripts codes for the social share buttons/icons have been tested and still workable with popular web browsers. Customising never made easy with scripts technology and workaround today for your CMS, don't forget to stumble us too!