CODEWITHSUNDEEP
javascripthtmlgwttwitter
user411103
user411103

Reputation:

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

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?

Upvotes: 1

Views: 909

Answers (4)

fernandohur
fernandohur

Reputation: 7154

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;

Upvotes: 1

jusio
jusio

Reputation: 9920

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.

Upvotes: 2

Renato
Renato

Reputation: 13700

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.

Upvotes: -1

salk31
salk31

Reputation: 1015

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.

Upvotes: 0

Related Questions