Problem adding official Tweet Button using HTMLPane widget

[deepfriedbrain]

Hi,

I'm reluctantly posting this question in this forum as I'm not sure whether it's a SmartGWT issue or a browser issue (or something else). Moreover, I'm new to GWT and SmartGWT. So, please don't shoot me if it doesn't belong here.

Problem:

I've added the official Tweet Button to my SmartGWT based app using an HTMLPane widget. The button shows up fine in FF 3.6, but it doesn't work in IE 7 and Chrome 7. IE and Chrome only show the hyperlink "Tweet".

This is the code I got from http://twitter.com/about/resources/tweetbutton :

<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="mytwitterid">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Obviously, the code works fine when put in a normal HTML page, and (as I mentioned above) it works fine in my SmartGWT app on Firefox.

My application code looks similar to the following:

String contents = "<a href=\"http://twitter.com/share\" class=\"twitter-share-button\" data-count=\"horizontal\" data-via=\"mytwitterid\">Tweet</a><script type=\"text/javascript\" src=\"http://platform.twitter.com/widgets.js\"></script>";

HTMLPane htmlPane = new HTMLPane();  	  
htmlPane.setContents(contents);

//htmlPane.setEvalScriptBlocks(true);

I suspect that the embedded javascript (http://platform.twitter.com/widgets.js) is not getting executed. I tried adding the setEvalScriptBlocks(true) call, but it didn't change anything.

Can I use a different widget to get around the issue? Is there any other way to fix this issue?

I'll appreciate all help.

Thanks.

[gstier]

I am seeing the exact same problem, and I have not been able to come up with a fix. I'm currently using SmartGWT version 2.2. My browser versions are the same as stated in the original problem.

[gstier]

In case anyone is reading this I did find a solution for this. I had a similar issue with the facebook like button, so I'll just post both solutions here since they are the same.

The first thing you need to do is place the script tags in your host html file:

    <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
    <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

I placed mine in the head tag.

Next you need to embed your tweet button anchor tag and fb:like button in your application using something like the HTMLPane. In the end you need the source html to render to something like this:

<div id='fb-detail'><fb:like href="[someurl]" send="false" layout="button_count" width="120" show_faces="false" font="lucida grande"></fb:like></div>


<a href="http://twitter.com/share" class="twitter-share-button" data-url="[someurl]">Tweet</a>

Both the FB and Twitter buttons get rendered at load time, so you need to create a JSNI method to render the buttons at runtime:

	public static native String renderSocialMedia() /*-{
		// Render the FB button
	  $wnd.FB.XFBML.parse($doc.getElementById("fb-detail"));
	  
	  // Render the tweet button
	  var links = $wnd.$('#tweet-detail').find('a.twitter-share-button');
	  var tweet_button = new $wnd.twttr.TweetButton( links[0] );
	  tweet_button.render();
	}-*/;

Note: I'm using Jquery to fetch all the tweet button anchor tags, and using the dom to fetch the FB div tag.

I've also posted this fix on my blog with a little more detail: http://thegregstier.blogspot.com/201...uttons-in.html