Facebook button not displayed inside GWT Element.setInnerHTML(). Tweet button displayed without styles

Question

I am using this Element on GWT to successfully add and display HTML code on my web app.

However, when I try to add the "Facebook like button" code, it is not displayed at all:

Element adContainerDiv = getView().getFooter().getElement(); 
adContainerDiv.setInnerHTML("<div class='fb-like' data-href='http://www.example.com' data-send='false' data-layout='button_count' data-width='100' data-show-faces='false' data-action='recommend' data-font='arial'></div>");

This code is at the begining of the <body>:

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=1265448483273";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
    <!-- END Facebook button function -->

Something similar happens with the "Tweet button" code, where a plain text link is displayed, without any style:

Element adContainerDiv = getView().getFooter().getElement();
adContainerDiv.setInnerHTML("<a href=\"https://twitter.com/share\" class=\"twitter-share-button\">Tweet</a>");

Right after the <body> I have this code (I tried as well on the setInnerHTML but still doesn't work:

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

This is the way it looks in the DOM for the Tweet button between the <body></body>:

<script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=13592647473";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>

<div style="top:0PX;height:60PX;width:1000PX;position: relative;" id="ur39jgf03kd">
<a href="https://twitter.com/share" class="twitter-share-button" 
data-via="example_com">Tweet</a></div>

Any ideas?

score 2 · Accepted Answer · edited May 23 '17 at 11:58

I doesn't work for obvious reason - by default facebook/twitter buttons expects that all the buttons are created BEFORE the facebook/twitter script loads. So you should notify those external libraries after you created new buttons and attached them to the dom.

Quick search for "Dynamically add twitter button using javascript" gives us the way how to do it for twitter:

twttr.widgets.load();

So we need to wrap this into native method into some your GWT classes (this is called JSNI):

  public static native void refreshTwitterButtons()/*-{
     $wnd.twttr.widgets.load();
  }-*/;

What is left, is to call this function after you created and attached to DOM twitter button html code. For facebook at is basically the same workflow, you google "Dynamically add facebook button using javascript", you find out which API you have to call, you create appropriate native method for it.

score 1 · Answer 2 · answered Nov 21 '12 at 22:06

Here is a simple fix for your problem:

In your HTML, include the following

    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId      : 'YOUR_APP_ID', // App ID
                status     : true, // check login status
                cookie     : true, // enable cookies to allow the server to access the session
                xfbml      : true  // parse XFBML
    });

  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
   }(document));
</script>

Create FBWidget class that can be extended, like this:

public class FBWidget extends HTML{

protected String id;

public FBWidget(String string)
{
    super(string);
    id=null;
}

@Override
protected void onLoad() {
    try {
        if(id==null)
        {
            parseFBXML();
        }
        else
        {
            parseFBXML(id);
        }
    } catch (JavaScriptException e) {
        System.err.println(e);
    }
}

protected native void parseFBXML()
/*-{
    $wnd.FB.XFBML.parse();
}-*/;

protected native void parseFBXML(String id)
/*-{
    $wnd.FB.XFBML.parse(document.getElementById(id));
}-*/;

}

Now if you for example want to add a FBLike widget, just extend the class like this:

public class FBLike extends FBWidget {

public FBLike(String url) {
    super(getCode(url));
}


private static String getCode(String url) {
    return "<fb:like id=\""+"PUT_AN_ID_HERE"+"\" href=\""+url+"\" send=\"true\" width=\"500\" show_faces=\"false\" ></fb:like> ";
}

}

to increase the fb.parse speed you could include an id for the FBLike method, this would not parse the entire page, just the elements with the specified id;

@718333 What id are you referring to with "PUT_AN_ID_HERE"? Where do you get it from? Thx. — Patrick, Mar 04 '13 at 03:27

score 0 · Answer 3 · answered Nov 05 '12 at 13:22

0

Sorry if this is too obvious but where have you defined the CSS class "fb-like"?

btw There are quite a few JS/JQuery libraries for adding buttons like this. GWT/JS integration is reasonably easy with JSNI. It could also be triggered from GWT by just using CSS class names.

answered Nov 05 '12 at 13:22

salk31

995
2
8
13

We do not need to define that CSS class. Facebook does this for you. My code works elsewhere except inside a setInnerHTML. Thanks. – Nov 05 '12 at 13:28

score -1 · Answer 4 · answered Nov 16 '12 at 15:45

You can try this:

HTML fbLikeButton = new HTML("<div class='fb-like' data-href='http://www.example.com' data-send='false' data-layout='button_count' data-width='100' data-show-faces='false' data-action='recommend' data-font='arial'></div>");
containerForSocialMediaButtons.add(fbLikeButton);

Where containerForSocialMediaButtons is a GWT Panel you added in the appropriate place. When trying to add raw HTML to your page, always use the HTML class. But beware that if the String you put inside HTML is unsafe, you may run into security issues.

Facebook button not displayed inside GWT Element.setInnerHTML(). Tweet button displayed without styles

4 Answers4