Home/ Questions/Q 8850887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T13:00:19+00:00

I am using this Element on GWT to successfully add and display HTML code

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0