Twit This Wordpress Code

Can you see my “Twit This Post” link ? Contrary to most web and blogger owners which use static images or a two framed animated gifs (at most), I am using an embedded swf file. As you can see, the animation on my twitter link is too heavy which I don’t want to convert to an animated gif because of notable animation degradation, so embedding an swf file is the only option.

If you are using a static or an animated gif, you can easily create a dynamic link by just wrapping this anchor code around the image:

<a href=” @keywordspeak - <?php the_title(); ?><?php the_ID(); ?>”> <img src=”img001.jpg”/></a>

This must be inserted on the single.php file. Very easy right? Now here’s the problem.

If you want to use a swf file for your twitter link, then you can’t just wrap it with the regular anchor tag like we used above. Here’s a workaround I made which you can’t found anywhere on the net (as of my two days of googling).

<div style=”clear:both; position:relative; float:left; top:0; left:0; z-index:1;” onclick=”’ @keywordspeak - <?php the_title(); ?><?php the_ID(); ?>’)”><object width=”500″ height=”120″> <param name=”movie” value=”animation01.swf”> <param=”wmode” value=”transparent”> <embed src=” animation01.swf” width=”500″ height=”120″ wmode=”transparent”> </embed> </object> </div>

Now here’s another the problem. This perfectly works on Firefox, Chrome and Safari but didn’t seem to work on IE. Do not wory, here’s the solution for this:

<div style=”clear:both; position:relative; float:left; top:0; left:0; z-index:1;” onclick=”’ @keywordspeak - <?php the_title(); ?><?php the_ID(); ?>’)”> <div style=”position:relative; float:left; top:0; left:0; width:500px; height:120px; z-index:1″> <object width=”500″ height=”120″> <param name=”movie” value=” animation01.swf “> <PARAM NAME=”wmode” VALUE=”transparent”> <embed src=” animation01.swf ” width=”500″ height=”120″ wmode=”transparent”> </embed> </object> </div> </div>

To save you from the trouble of spotting the difference, I just added another div tag around my embedded object.

But if you think we’re done, I still have a bug for this code. This now works on four major browsers (FF, IE, Chrome & Safari). I managed to make it work on IE but in order for the link works, the mouse cursor must not hit any object on the animation.

Still not a final solution for the IE users but here’s the conclusion:

Conclusion #1: Aware users (those who owns blogs or websites and most especially those who uses twitter) probably are using FireFox and not IE. Reasons here: See what the press are saying.

Conclusion #2: Those who uses IE probably are novice users in which chances are they don’t even bother to know what twitter is, meaning they can use the twitter link but the bottom line is: they don’t need to.

Conclusion #3: (FINAL CONCLUSION) – With the code working on Firefox, Chrome, Safari and I also tried it on Wyzo (which could mean that this could probably be working on other minor browsers), and with just a little minor bug for IE. Then this wordpress code is very functional and worth using.

The only problem is, there’s no twitter icons in swf format that is available on the net (as far as I’ve known, since I haven’t surf the entire net yet). So I will share my swf twitter icon or you can customize your own.


ICON #1: Download Here

ICON #2: Download Here

Calling all developers, if you can find the final solution for the ie bug, post it here. Comments are encourage. Bill?



Leave a Reply