How To Use A Custom Image To Create A StumbleUpon Share Button

There are many reasons why some site owners want to implement custom images for the social media buttons on their websites. Some just want buttons that blend with the entire theme of their websites. Well, for whatever reason, we’ll teach you how to use a custom image for a StumbleUpon share button. This particular tutorial is similar to How To Use A Custom Image For Tweet button and How To Use A Custom Image For LinkedIn Share Button. The JavaScript code that opens a pop-up window is essentially the same.

To ensure you send updates to StumbleUpon and help your site’s users to share your pages through a pop-up window, instead of opening a new browser tab or window, we’ll use JavaScript. Firstly, add the following JS code to the Head section of your HTML web page in-between the <head> and </head> tags:

  • <script language=”javascript” type=”text/javascript”>
    <!–
    var win=null;
    function NewWindow(mypage,myname,w,h,scroll,pos){
    if(pos==”random”){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor(Math.random()*((screen.height-h)-75)):100;}
    if(pos==”center”){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
    else if((pos!=”center” && pos!=”random”) || pos==null){LeftPosition=0;TopPosition=20}
    settings=’width=’+w+’,height=’+h+’,top=’+TopPosition+’,left=’+LeftPosition+’,scrollbars=’+scroll+’,location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=no’;
    win=window.open(mypage,myname,settings);}
    // –>
    </script>

Now we have to create our custom image for the StumbleUpon share. So, instead of using the default StumbleUpon share button, copy and paste the following HTML code on where your want the button to appear on your page:

  • <a title=”Share YourDomainNameGoesHere with your contacts on StumbleUpon” onclick=”NewWindow(this.href,’template_window’,’800′,’470′,’yes’,’center’);return false” onfocus=”this.blur()” href=”http://www.stumbleupon.com/submit?url=&lt;strong&gt;YourURL&lt;/strong&gt;” rel=”nofollow”><img style=”border: 0pt none;” src=”images/stumbleupon_ico.png” alt=”stumble” width=”35″ height=”35″ border=”0″ /></a>

Change YourDomainNameGoesHere to the URL of your actual domain name and YourURL to the actual URL of your web page. Also change images/stumbleupon_ico.png to the image location on your web server.

That’s it guys, you’ve just created a customized StumbleUpon share button using your own image, instead of the default one that are found on millions of websites out there.