Inspired by Victoria Keech  of www.victeach.wordpress.com who asked for help on this one via twitter @victeach.

(Note this is for blogs hosted on wordpress.com , self hosted wordpress websites can use the embed code directly given from ning)

Because wordpress.com doesn’t let you  embed flash objects in the sidebar you need to do things a little differently.

  1. Go to the ning page in question and take a screen shot of the badge and crop it accordingly.
    English Companion
  2. In WordPress go to Media -> Add New and upload the image.
  3. Then take note of the web address where the image resides from the “Source” box after the image is uploaded. eg the one above is
    http://thewpguy.files.wordpress.com/2009/12/english-companion-badge.png
  4. Go to the Appearance -> Widget -> Drag the “Text” widget to the sidebar
  5. Paste in the following code into the textbox and leave the Title blank
    <a href=”http://englishcompanion.ning.com/” target=”_blank”><img src=”https://www.thewpguy.com.au/wp-content/uploads/2009/12/english-companion-badge.png”></a>
  6. Substitute the web address of the actual ning website you want to link to at the beginning of the code above
  7. Substitute the web address from Step 3 into the image location at the end of the code above.

A live example is here with 2 badges in use. http://thewpguy.wordpress.com/

The exact code used in the example is as follows and @victeach you can copy it verbatim into you tect widget in your sidebar and it will work perfectly.

<a href=”http://englishcompanion.ning.com/” target=”_blank”><img src=”https://www.thewpguy.com.au/wp-content/uploads/2009/12/english-companion-badge.png”></a>

<a href=”http://edupln.ning.com/” target=”_blank”><img src=”https://www.thewpguy.com.au/wp-content/uploads/2009/12/the-educators-pln-ning.png”></a>