react-social-schema
A hybrid implementation of Social Share Buttons and Structured Data.
Why?
Structured data is valuable for search engines to discover information in your web application. This approach uses the structured data provided as props to create the stories used in social sharing buttons so you only have to worry about one set of data.
Features
-
Share buttons for Facebook, Twitter, Tumblr, and Pinterest
- Live refreshing for all except Twitter.
- Intent opens in a popup window
-
Structured Data
- Provides data for share intents - two birds with one stone!
Install
yarn add react-social-schema
Because it's 2017. Yarn rocks.
Compatibility
Built with React v15 and Chrome 55, not yet tested elsewhere.
How to use
See ./example/MyApp.jsx
API
Container
| Props | Default Value | Description |
|---|---|---|
| schema | not set | The schema object that will be passed down via context. |
| className | "share-actions" |
The class name that will be given to the container component. |
| thisComponent | "div" |
The HTML element or React Component that will be used as the container. |
render()
Returns the wrapper component, a <script> tag containing the JSON schema, and whatever children are passed to this component.
BaseButton
| Props | Default Value | Description |
|---|---|---|
| buttonComponent | 'button' |
Component or HTML element to use for the button. |
| countComponent | 'span' |
Component or HTML element to use for the count display. |
| children | <FacebookIcon /> |
Inner HTML for the button component. |
| className | 'facebook' |
For the button. |
| count | null |
If set, live refreshing will be disabled. |
| fetchTimeoutMS | 3600 * 1000 |
Interval in milliseconds to live refresh the count. |
| State | Description |
|---|---|
| count | Contains the value of the last fetched count. |
| lastFetch | The timestamp (in milliseconds) of the last fetch |
setCount(count)
Updates this.state.count and this.state.lastFetch
getCount()
Returns the last known count. If this.props.count is specified (live refreshing disabled), it will return that value. If not set (live refreshing enabled) then this.state.count will be returned if the value is fresh.
Otherwise, this.updateCount will be called and this.state.count will be returned immediately.
updateCount()
This method will error out unless it is defined in classes extending from BaseButton.
countNode()
Returns the count component or HTML element with the latest fetched value.
render()
Provides default markup that can be overridden. Provides hooks to onClick
FacebookButton
onClick()
Spawns a popup for the Facebook Sharer.
getCount(): Promise
Retrieves the latest count from Facebook and resolves.
PinterestButton
onClick()
Spawns a popup for the Pinterest Sharer.
getCount(): Promise
Retrieves the latest count from Pinterest and resolves
TwitterButton
getTwitterHandle()
If specified, this will always return this.props.twitterHandle
Else, it will try to detect the handle from the schema using resolveSocial(schema, test)
onClick()
Spawns a popup for the Tweet and/or Retweet Intents.
If specified, this.props.tweetID will prompt a Retweet instead of a Tweet intent.
getCount(): Promise
Immediately rejects because Twitter does not provide share counts.
TumblrButton
onClick()
Spawns a popup for the Tumblr Sharer.
getCount()
Retrieves the latest count from Tumblr and resolves.
popup.js
popup(url, inputOptions, callback)
Spawns a new popup window. If specified a callback function will be called when the popup window is closed.
selectors.js
getTitleAttribute(schema)
Returns the schema attribute designated as a story's title.
getBodyAttribute(schema)
Returns the schema attribute designated as a story's content body.
getImageAttribute(schema)
Returns the schema attribute for the most likely image, in the following order of first available:
- schema.image
- schema.author.image
- schema.publisher.logo
If none of these are available, a deep search will occur for an object where @type = "ImageObject" and return the first match.
resolveSocial(schema, test)
Returns the first object in the following list where a value matches test
- schema.author.sameAs
- schema.publisher.sameAs
- schema.provider.sameAs
- schema.sameAs
Example:
resolveSocial(schema, (a) => a.indexOf('twitter.com') !== -1);
Need Help
Any pull request is warmly welcomed towards making this module better - adding additional networks, tests, or providing better compatibility.