How To Load Facebook Javascript Sdk In Polymer Project?

I know there is a web component out there called facebook-login and I don't want to install for the simple matter... I tried adding Facebook Javascript SDK in web component. In th

Solution 1:

note

( Just a good to know) The facebook SDK adder that you have copied over to the ready function, essentially creates a script tag with the src pointing to connect.fb.com as the very first script tag on the document. you are not scoping it to the component your are writing.

• where did you add that <div>?

  Inside the shadow DOM? - If so, the javascript has NO access to your div

Try creating a <slot> inside your element's shadow DOM

Something like so:

<dom-module id="my-app">
    <template>
       <!-- your element's shadow DOM -->
      <slot name="fb-like-frame" ></slot>
    </template>
</dom-module>

then, on the page where you are connecting your element, just write

<my-app>
    <div slot="fb-like-frame" >
        <!--Insert your div here-->
    </div>
</my-app>

Plunker

I have created a plunk .I have used your own code. Except,

• using slots.
• A dummy app id

Look at both index.html and landing-app.html

from the nav bar on the left hand side.

• Have you coded using <slots> ?

• Are you calling super.ready() inside ready()?

View the component displaying the button