How to Install the widget on Gatsby
This document covers the installation steps required to integrate Social9 with your Gatsby website
Outline
- Get The Code Snippet From Social9 Console
- Add Script To Gatsby Config
- Additional Setup For Inline(Horizontal) Widgets
Get The Code Snippet From Social9 Console
Copy the one-time installation code snippet under the gatsby installation guide section of the Social9 Console. This should look similar to,
{
resolve: "gatsby-plugin-load-script",
options: {
id: "s9-sdk",
async: true,
defer: true,
content: "<REPLACE WITH YOUR USER ID>",
src: "//cdn.social9.com/js/socialshare.min.js"
},
}
Add Script To Gatsby Config
Social9 installation script is served from Social9 CDN. Now, out of the box script injection from an outside domain is restricted in a Gatsby site. To enable that, you need the gatsby-plugin-load-script
plugin.
Install and add it to your package.json
.
npm install --save gatsby-plugin-load-script
Update your gatsby-config.js
file under the root path of your Gatsby project which should look like this,
module.exports = {
plugins: [
...,
{
resolve: "gatsby-plugin-load-script",
options: {
id: "s9-sdk",
async: true,
defer: true,
content: "f76dc********************ab7de",
src: "//cdn.social9.com/js/socialshare.min.js"
},
}
]
}
Now you may restart the Gatsby server and verify integration!
Additional Setup For Inline(Horizontal) Widgets
If you'd like to configure an inline widget in your site (i.e. when the widget is placed side-by-side with your page content with a horizontal view), just add this additional code snippet where ever you want the widget to be rendered.
<div class="s9-widget-wrapper"></div>
Inline Widget For Developers
You can create or configure inline widgets under the social9 configurations section and it will automatically be reflected on your website.
For inline widgets, you need to specify the location on your site where the widget should be rendered.
By default, the social9 inline widgets are rendered under the element with class name s9-widget-wrapper
although you can change the name in the console. This can be done by changing the Parent Container Selector
field under the Rules
section of the widget editor.
Paste the following snippet in your site where the inline widget should render.
For id
selectors
<div id="s9-widget-wrapper-id"></div>
For class
selectors
<div class="s9-widget-wrapper-class"></div>