javascript - How do I embed a facebook send button in my react app? - Stack Overflow

admin管理员组

文章数量:1329341

I have a client side rendered react app. I want to display a facebook send button on my page.

The instructions given on the developer page do not tell me how to do it

Plus, I did not find an npm patible package released by facebook for their SDK. So how does one go about including the SDK in a react app?

EDIT: I tried using some async loader in react.

import React, { Component } from 'react';
import scriptLoader from 'react-async-script-loader';

@scriptLoader(
  '.js#xfbml=1&version=v2.5',
)
class FacebookSendButton extends Component {

  ponentDidMount() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props;
    if (isScriptLoaded && isScriptLoadSucceed) {
      console.log('script load success from didMount');
    }
  }

  ponentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
    if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
      if (isScriptLoadSucceed) {
        console.log('script load success from receiveProps');
      }
    }
  }

  render() {
    return (

      <div>
       BEFORE FB ROOT.
      <div className="fb-send"
        dataHref=".html"
        dataLt ayout="button_count"
      />
      <div id="fb-root"></div>
    </div>
    );
  }
}

export default FacebookSendButton;

This does not render a facebook send button.

I have a client side rendered react app. I want to display a facebook send button on my page.

The instructions given on the developer page do not tell me how to do it

https://developers.facebook./docs/plugins/send-button#configurator

Plus, I did not find an npm patible package released by facebook for their SDK. So how does one go about including the SDK in a react app?

EDIT: I tried using some async loader in react.

import React, { Component } from 'react';
import scriptLoader from 'react-async-script-loader';

@scriptLoader(
  'https://connect.facebook/es_ES/sdk.js#xfbml=1&version=v2.5',
)
class FacebookSendButton extends Component {

  ponentDidMount() {
    const { isScriptLoaded, isScriptLoadSucceed } = this.props;
    if (isScriptLoaded && isScriptLoadSucceed) {
      console.log('script load success from didMount');
    }
  }

  ponentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
    if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
      if (isScriptLoadSucceed) {
        console.log('script load success from receiveProps');
      }
    }
  }

  render() {
    return (

      <div>
       BEFORE FB ROOT.
      <div className="fb-send"
        dataHref="http://www.your-domain./your-page.html"
        dataLt ayout="button_count"
      />
      <div id="fb-root"></div>
    </div>
    );
  }
}

export default FacebookSendButton;

This does not render a facebook send button.

• javascript
• facebook
• reactjs
• npm

Share Improve this question Follow edited Mar 15, 2016 at 22:16 sheki asked Mar 15, 2016 at 18:02 shekisheki 9,3701414 gold badges5555 silver badges7070 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Once the FB SDK loads, it parses through the entire markup of the page to find elements with the special fb-* classes. Since the FB script is loading at the time your module is initialized, it's likely that the SDK loads before you end up mounting your ponent. To get it to re-process the DOM, you'd want to add something like the following to your ponentDidMount:

if (window.FB) {
  // Read the entire document for `fb-*` classnames
  FB.XFBML.parse();
}

Of course, you probably don't want to parse the entire document every time a send button mounts. You can narrow the scope of the search by creating a ref to the DOM node you want to search, and then passing that to the parse() method.

ponentDidMount() {
  const { isScriptLoaded, isScriptLoadSucceed } = this.props;
  if (isScriptLoaded && isScriptLoadSucceed && window.FB) {
    window.FB.XFBML.parse(this._scope);
  }
}

ponentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
  if (isScriptLoaded && !this.props.isScriptLoaded) { // load finished
    if (isScriptLoadSucceed && window.FB) {
      window.FB.XFBML.parse(this._scope);
    }
  }
}

render() {
  return (
    <div ref={(s) => this._scope = s}>
      <div id="fb-root"></div>
      <div
        className="fb-send"
        data-href="http://www.your-domain./your-page.html"
        data-layout="button_count"
      />
    </div>
  );
}

You'll notice I use the new method of functional refs here. Named refs (eg ref="somestr") are being deprecated & discouraged by the React team.

I have a hacky version of this working from the following gist: https://gist.github./andrewimm/9fdd0007c3476446986a9f600ba4183f

本文标签： javascriptHow do I embed a facebook send button in my react appStack Overflow