最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin7浏览0评论

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.

Share Improve this question edited Mar 15, 2016 at 22:16 sheki asked Mar 15, 2016 at 18:02 shekisheki 9,37014 gold badges55 silver badges70 bronze badges
Add a ment  | 

1 Answer 1

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

发布评论

评论列表(0)

  1. 暂无评论