Skip to content

short code

http://createfunnylogo.com/google/eclais%20avignon

Calendar, Clock, Flash, Gigya, Html codes, Shortcodes, Sidebar, Widgets

The gigya shortcode 3 – widgets

A standard reply in the wp.com forum has been that you cannot add flash, iframe, or javascript based objects (because you’re not allowed to use such codes in wp.com blogs, for security reasons), and that widgets can only be placed in the sidebar or bottombar of a blog.

But actually flash-based objects can be added, provided you transform the embed code into the appropriate shortcode; and this shortcode works in text widgets (for your sidebar/bottombar), but it works in posts and pages as well (in the HTML editor).

A

Some sites provide a post-to-WP button that creates an auto-post in your blog (with the appropriate shortcode in it). If you want the widget in your sidebar, you switch the post editor to HTML, copy the shortcode, go to Appearance>Widgets, add a Text widget, paste the shortcode, save (then back to Posts to delete the auto-post).

Example 1 – some gorgeous islamic widgets here:

http://www.al-habib.info/

Instructions here:

http://blog.al-habib.info/insert-flash-widget-wordpress-sidebar/

Example 2 – see my post on the Mixpod audio players:

http://wpbtips.wordpress.com/2009/12/05/alternative-audio-players/

B

Sometimes the post-to-WP button doesn’t work; or you might prefer not using it; plus there are other widget sites that provide no such button. In that case you’ll have to copy the flash embed code (after you select options, if any) and create a working shortcode out of it.

a. Copy the widget URL from the embed code (proper URL usually ends with “swf” or “widget”).

b. Copy the necessary attributes and values from the embed code.

If they’re written this way:

ATTRIBUTE= »VALUE »

you copy them as they are.

If they’re written this way:

<param name= »ATTRIBUTE » value= »VALUE »>

(or any other way)

you change them to:

ATTRIBUTE= »VALUE »

Some variables in customizable widgets may show up like this:

flashvars= »VARIABLE1=VALUE&VARIABLE2=VALUE&VARIABLE3=VALUE »

If you see such a string of options joined by ambersands but without the flashvars attribute, you need to turn them into the above. Same thing if you see such options appended to the actual URL after a questionmark.

c. Turn the whole into a shortcode this way:

Paste into text widget, or into html post or page editor.

Note that some attributes aren’t needed, and in some you can change the value; or you can add attributes not included. See here for details: http://kb2.adobe.com/cps/127/tn_12701.html

Also note that this technique works for flash objects in general, not just widgets.

Examples

A simple calendar

Embed code:

<img style= »visibility:hidden;width:0px;height:0px; » border=0 width=0 height=0 src= »http://counters.gigya.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEyNzkwOTU4NDg2OTkmcHQ9MTI3OTA5NTg1MzAzNiZwPTIyMzA1MiZkPSZnPTEmbz1kNTJmYzY5NzFmYTY*ZjQ4OTNh/OWRmNTFlZTk4NmQyMyZvZj*w.gif &raquo; />http://spanstyle=<br /><a href= »http://widgia.com/ &raquo; target= »_blank » style= »font-size: 10px; font-family: verdana; »>A Widgia Widget</a>

Shortcode:

Result:

http://wpcomwidgets.com/?src=http%3A%2F%2Fwidgia.com%2Fwidgets%2Fcalendar%2Fcalendar.swf&quality=high&width=206&height=215&_tag=gigya&_hash=75d230e58144ebdbe6adaec11fad2362

Width & height can be changed. Might be necessary if you want the calendar in your sidebar – see my post on sidebar width.

Another calendar

Embed code:

<div style= »width: 190px; height: 323px; »><object type= »application/x-shockwave-flash » data= »http://www.widgipedia.com/widgets/jeanphi/calendar-animated-water-5869-8192_134217728.widget?__install_id=1279080358677&amp;__view=expanded&amp;wmode=opaque&amp;bgcolor=0x&amp;lan=en » width= »190″ height= »323″> <param name= »movie » value= »http://www.widgipedia.com/widgets/jeanphi/calendar-animated-water-5869-8192_134217728.widget?__install_id=1279080358677&amp;__view=expanded&amp;wmode=opaque&amp;bgcolor=0x&amp;lan=en »&gt; <param name= »quality » value= »high »><param name= »wmode » value= »opaque »><param name= »allowScriptAccess » value= »always »><param name= »width » value= »190″><param name= »height » value= »323″><param name= »bgcolor » value= »# »><param name= »lan » value= »en »><param name= »FlashVars » value= »wmode=opaque&amp;bgcolor=0x&amp;lan=en »> [etc. etc. – the rest is links to original site and to latest Adobe Flash Player]

Shortcode:

Result:

http://wpcomwidgets.com/?src=http%3A%2F%2Fwww.widgipedia.com%2Fwidgets%2Fjeanphi%2Fcalendar-animated-water-5869-8192_134217728.widget&quality=high&wmode=opaque&width=190&height=323&bgcolor=%23ffffff&lan=en&_tag=gigya&_hash=7c2da6154b731f0e7a3337f54970c5cf

Width, height, and language can be changed.

I’ve set the background color to white (#ffffff). Depending on the theme you’re using, you may need a different color – see the “Color” links in my left sidebar. Or you could delete the bg attribute, and change the wmode value from “opaque” to “trasnsparent”; but this doesn’t work in all versions of (naturally…) Explorer.

Some widget sites

Widgia.com

Lots of widgets, grouped in categories. When you find one you like, click “Get this widget”; if you see that it’s flash, not javascript, use the post-to-WP button or copy the embed code and proceed as shown above.

Widgipedia.com

Lots of widgets, unfortunately not grouped in categories. Browse through or use the search box. Watch out: the site includes widgets for various platforms; make sure the widget you select says “Platform: Flash”. Don’t copy what the site calls “Widget embed” code, because that’s javascript: click “Get Widget” and copy the “alternate code”, then proceed as shown above.

Widgetbox.com

Thousands of pages of widgets. Browse through, or browse by tag, or use the search box. When you find one you like, click name of widget, click “Get Widget”, copy embed code from popup after you click “Flash” (if there’s no Flash tab, forget the widget) and proceed as shown above. Unfortunately this site imposes an ad popup and a “Get Widget” tab below each widget unless you “go pro” with them (become a paying subscriber).

Wishafriend.com

Many flash widgets (some childish). Browse by category or use the search box. When you find one you like, click “Get Code”: use the post-to-WP button, or copy embed code and proceed as shown above.

Magicwidgets.com and PagePlugins.com

Various customizable widgets.

Stay tuned for several posts with various widgets and worked-out shortcodes.

Update: see Widgets in my top nav menu.

Related posts:

The gigya shortcode 1 – inserting videos

The gigya shortcode 2 – inserting Flickr slideshows

The gigya shortcode 4 – inserting Issuu docs

http://wpbtips.wordpress.com/

Discussion

248 Responses to “The gigya shortcode 3 – widgets”

  1. Oh wow! Pretty cool!

    There was a “gigya src” thread before in 2009 in the wordpress.com forums, but unfortunately, it did not have much luck!

    http://en.forums.wordpress.com/topic/embedding-flash-object-using-gigya-code-works?replies=2

    I hope you have grand success with these Flash hacks. What an awesome gift to the wordpress.com community.

    psst: I feel so jealous that I couldn’t spot the “gigya src” trick. I thought my bookmarklets for wordpress.com were cool. But I see your Gigya posts and I can hear this Doors song in full volume in my head:

    “Break on through to the other side”.

    😀


    Posted by Netty Gritty | July 22, 2010, 11:36

  2. Impressive as always! The amount of work you put in to researching and preparing this and all the topics you post on is really, really appreciated.


    Posted by Jennifer | July 22, 2010, 12:48

  3. @NG: Thanks! I think your exaggerating, but maybe it is indeed a bit of a breakthrough.

    (Love the Doors!)

    As I’m saying in the first post of this series, I discovered the gigya shortcode when I tried the Mixpod audio players. I recently spotted the thread you link to, too, and I was surprised it had gone completely unnoticed.

    @Jennifer: Thanks! There’s much more to come: next post will be a few more calendars, then some posts with clocks, then weather widgets and other stuff…


    Posted by Panos | July 22, 2010, 17:45

  4. Really amazing! Thank you very much, Panos.


Publicités