Add social sharing buttons to Gatsby websites and blog: Gatsby social sharing plugin
Social sharing buttons are super important for any website or blog. They're not just a nice-to-have; they're a key part of growing your online presence. By making it easy for visitors to share your content, you can really boost your website's visibility, drive more traffic, and even build a stronger community around your brand.
With billions of people on social media these days, it's a no-brainer to tap into that reach. Think about it:
- There are about 3.5 billion social media users worldwide.
- Facebook is still the king of social media platforms.
- A huge chunk of younger generations (90.4% of Millennials, 77.5% of Gen X) are active on social media.
- People spend an average of 3 hours a day scrolling through social networks.
- Most marketers (73%) find social media marketing pretty effective.
- A lot of shoppers (54%) use social media to check out products before buying.
- If someone has a good experience with your brand on social media, they're way more likely to recommend you (71%).
- Influence recommendations on social media really matter to almost half of consumers (49%).
- Instagram stories are huge, with 500 million uploaded daily.
- And most of us (91%) access social media on our phones.
So, with all these people out there, you'll want an easy way to get your content shared. That's where Social9 comes in. We make it super simple to add social sharing buttons to your Gatsby website or blog. Social9 is a free service that gives you social sharing buttons along with social analytics—all rolled into one.
Here's How To Get Started
- 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
First, you'll need to grab a one-time installation code snippet. You can find this in the Social9 Console, specifically under the Gatsby installation guide section. It'll look something like this:
(Image: A screenshot showing a code snippet with Social9 branding and a unique installation code.)
Add Script To Gatsby Config
The Social9 installation script is hosted on the Social9 CDN. Now, Gatsby by default restricts script injections from external domains. To get around this, you'll need the gatsby-plugin-load-script plugin.
Install it and add it to your package.json.
(Image: A screenshot showing the command to install gatsby-plugin-load-script and its addition to package.json.)
Next, you'll want to update your gatsby-config.js file, which is located at the root of your Gatsby project. It should look something like this:
(Image: A larger, clearer screenshot of the gatsby-config.js file showing the gatsby-plugin-load-script configuration with the Social9 script details.)
Once you've done that, just restart your Gatsby server, and you should see the integration working!
Additional Setup For Inline(Horizontal) Widgets
If you want to have an inline widget on your site—meaning the widget appears side-by-side with your content in a horizontal layout—you'll need to add an extra code snippet. Just pop this in wherever you want the widget to show up.
(Image: A screenshot showing a code snippet for inline widgets. This snippet likely contains a div with specific classes or IDs that Social9 uses to identify where to render the widget.)
This snippet tells Social9 where to place the inline widget on your page. It acts as a container for the widget to render within.
Inline Widget For Developers
You can create and configure these inline widgets over in the social9 configurations section, and it'll automatically show up on your website.
For inline widgets, you gotta tell Social9 where on your site it should appear.
By default, Social9 inline widgets are placed inside an element with the class name s9-widget-wrapper. But you can change this in the console. Just look for the "Parent Container Selector" field under the "Rules" section of the widget editor.
The inline widget needs a parent element to hook into, and this parent element acts as its container. You can specify this parent element using either an ID (like #s9-id-container) or a class name (like .s9-class-container). Using a class is handy if you need multiple instances of the same widget, say, on a news page with lots of articles.
(Image: A screenshot showing an example of a Gatsby blog post with the inline social sharing widget clearly visible next to the content.)
Congrats! You can now use Social9's services. Let us know what you think.
Social Analytics
Social9 also offers Social Analytics as a combo with the sharing buttons. You can access these analytics through your Social9 dashboard to see how your content is performing and who's sharing it.
We hope this guide helps you get social sharing up and running on your Gatsby site. If you have any questions or run into any issues, don't hesitate to reach out.