<

Cool Sidebar Gadget For Your Custom Experts Exchange Badge

Published on
9,670 Points
3,470 Views
2 Endorsements
Last Modified:
Approved
Community Pick
Screenshot of desktop with gadgetThis article will show you how I created a Sidebar Gadget to display my medium-sized Custom Experts Exchange Badge. I'm not a fan of having things on my desktop, but this is a neat little deal to place on your desktop to showcase your EE profile.

A gadget is simply a folder, a HTML file, and a XML file. That's it! Only 3 simple items to create a Windows Sidebar Gadget. (take note that I have only developed this in Windows 7 - I can't vouch for Vista, however I assume this simple example will work on Vista also...)

1. Create a folder on your desktop (we'll move it later) and name it something like "eeBadge.Gadget".

2. Create a XML file inside the folder you created and name it exactly "gadget.xml".

3. Create a HTML file inside the folder you created and name it something like "eeBadge.html".

Okay, now were ready to see what goes inside these 2 files. Let's start with the XML file as that will be the simplest one and once it's setup you won't have to go back to it. The XML file basically puts a 'Name' to your gadget and points to the HTML file that you created. Although not necessary, you can attach an icon to your gadget if you want. Just place the image in the folder you created and reference to it in the XML file. I put the Experts Exchange Logo in there and called it "logo.png".
<?xml version="1.0" encoding="utf-8" ?> 
<gadget> 
  <name>Experts Exchange Gadget</name> <!-- the name of your gadget --> 
  <version>1.0</version> 
  <description>Displays Your EE Badge In a Simple Gadget</description> <!-- the description of your gadget --> 
 
  <copyright>&#169; Patsmitty.com</copyright> 
  <icons> 
    <icon height="48" width="48" src="logo.png" /> <!-- the reference to your icon if applicable--> 
  </icons> 
  <hosts> 
    <host name="sidebar"> 
      <base type="HTML" apiVersion="1.0.0" src="eeBadge.html" /> <!-- the reference to your HTML file --> 
      <permissions>Full</permissions> 
      <platform minPlatformVersion="1.0" /> 
      <defaultImage src="logo.png" /> 
    </host> 
  </hosts> 
</gadget>

Open in new window

A couple of important things to note regarding the XML file:
1. the file is named exactly "gadget.xml"
2. the <base> tag references your html file

Now that we have the XML file complete, you can close it and open the HTML file that you created. The shell of your html file should look like this:

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" /> 
        <title></title> 
        <link type="text/css" rel="stylesheet" href="http://www.experts-exchange.com/shared/expertBadgesCss.jsp" /> 
    </head> 
    <body style="height: 270px; width: 220px;"> <!-- this is the size for the Medium Custom Badge. If you want to show another size of your badge (i.e. small or large) you'll have to modify these dimensions. Small Badge = 350 x 170 (h x w) :: Large Badge = 245 x 320 (h x w) --> 
        <script type="text/javascript">setInterval(addScript, 1800000); // updates the data every 30 minutes</script> 
         
    </body> 
</html>

Open in new window


It's time to go to get your badge from experts-exchange.com and copy and paste the code into the body of your HTML file right after the </script> tag. Here is how to get the code for your badge:

1. Go to www.experts-exchange.com and login.


2. Click on 'My Account' towards the top-right of the page

A small drop-down box will appear. Select the "Edit" link to the right of "Profile"


3. Select the 'For Experts' tab



4. Follow the 5 Steps on the page to create your Badge and retrieve your code

After you have selected your type, size, options, and zones; Click the "Create Certified Expert Badge" button to generate your code.


5. Copy and Paste your code

Copy and Paste your generated code into the body of your HTML file just after the </script> tag.


And that's just about it! Save your HTML file and close it. Now all that needs to be done is to move the folder into the right directory. Go to C:->Program Files->Windows Sidebar->Gadgets and place the folder there inside the Gadgets folder.

Go to your desktop and right-click, select 'Gadgets' located near the bottom, and you should see your new gadget in the list! Drag it onto your desktop.

Screenshot of gadget window with new gadget
2
Comment
Author:Bruce Smith
8 Comments
 
LVL 11

Author Comment

by:Bruce Smith
Alan, I removed the code snippet at the bottom of the article 3x now and it keeps coming back! Can you try and remove this for me?

Other than that, the article has been modified to your standards and is ready to go. It's just that the last code snippet keeps showing up...

Thank you!
0
 
LVL 76

Expert Comment

by:Alan Hardisty
Nice article. I like having the gadget on my desktop so I can keep an eye on my status.

Yes vote from me.
0
 
LVL 10

Expert Comment

by:Christian de Bellefeuille
The setInterval on this script doesn't seems to work for me.  I've placed a timer of 900000 to get it refreshed every 15 minutes).  Few hours elapsed, still no update.  But if i check at the copy the link found in addScript in a browser windows, i see some informations showing correctly (112 questions answered, while the badge in the gadget still show 111).

Anyone got an idea why it doesn't work for me?

I got Windows 7 Home Premium 64 bits, (french version).

i'll try to keep my browser opened, and answer few questions, just to see if it will update or not in the browser...
0
Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

 
LVL 11

Author Comment

by:Bruce Smith
@cdebel: you can alter your avatar-like image (eeple icon) to force changes to your badge so you don't have to wait for questions to be answered. Try moving the script around the document a bit to see if anything changes. I'll look into it further. Thanks for the feedback.
0
 
LVL 10

Expert Comment

by:Christian de Bellefeuille
FYI: I've kept my Internet Explorer window opened with the eeBadge.html opened, and it didn't changed there too.  

I've googled a bit about this function (i'm no expert of javascript).  In every sample i've seen, they always add "()" at the end of the function name.  Like this:

setInterval(addScript(), 900000);

Is it the problem?  I've modified it to see if it make a difference...
0
 
LVL 11

Author Comment

by:Bruce Smith
The function will be called either way. Can you copy and paste the code here so I can see it exactly?
0
 
LVL 10

Expert Comment

by:Christian de Bellefeuille
Ok, here's the code... in this version i've dropped the refresh rate to every 1 minute.
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" /> 
        <title></title> 
        <link type="text/css" rel="stylesheet" href="http://www.experts-exchange.com/shared/expertBadgesCss.jsp" /> 
    </head> 
    <body style="height: 222px; width: 300px; padding:0 0 0 0; margin:0 0 0 0"> 
        <!-- this is the size for the Medium Custom Badge. If you want to show another size of your badge (i.e. small or large) you'll have to modify these dimensions. Small Badge = 350 x 170 (h x w) :: Large Badge = 245 x 320 (h x w) --> 
        <script type="text/javascript">setInterval(addScript(), 60000); // updates the data every 1 minutes</script> 



.... HERE, I PLACED THE CODE FROM THE E-E WEB SITE

    </body> 
</html>

Open in new window

0
 
LVL 49

Expert Comment

by:DanRollins
Using the above steps, I get a "addScript is undefined" error.  
I believe that the problem can be fixed by repositioning part of the HTML.  I removed line 8 and added this below the EE-generated script:
<script type="text/javascript">
setInterval(addScript, 10000); // updates the data every 10 seconds
</script>  

Open in new window

(right above the </body> tag)  Change the interval back to 180000 later.

It appears that the EE code expects to manipulate a particular script block, based on its ordinal position within the HTML.

Note: I'm also seeing an odd white border around the gadget rather than the expected gradient fill.  It might be related to my OS and IE version (Win7, IE 8)
-- Dan
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Join & Write a Comment

This Micro Tutorial will give you a basic overview of Windows DVD Burner through its features and interface. This will be demonstrated using Windows 7 operating system.
The viewer will learn how to successfully download and install the SARDU utility on Windows 7, without downloading adware.

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month