Follow @irsahindesigns

Custom Pop-Up StumbleUpon Button Icon Easy Submit Articles

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;

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

Technical Aspect;

• Improve website loading speed - quick icon/image rendering.
• Lower external script calls - improve website performance
• Lower header http calls - minimal browser request to load webpage.
• Lower CDN look ups and does not depend on external server web scripts.
• Cross browser tested and safe - works on major browsers ie Chrome, IE and FireFox
• Workable PHP/Javascripts - no external/additional Js files needed.
• Easy customisation and optimisation for icon/buttons images - optional css rendering
• Easy customise and optimise tags and title for social sharing.
• There were issues, certain social site server's error's and slowing down website page speed during icon/image rendering - solved with custom install. 

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

> 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.

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

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.

Customised Stylesheets Class;

.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.

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 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(); ?>

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.

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!