Add social sharing buttons to Gatsby websites and blog: Gatsby social sharing plugin

Social sharing buttons are the essential functionality for any website and blog.

You may have question in you mind that Why to use Social sharing button. Social sharing buttons are essential part of growth.

Here are some inserting facts-

1. 3.5 billion social media users worldwide.
2. Facebook is the most popular social media platform.
3. 90.4% of Millennials, 77.5% of Generation X, and 48.2% of Baby Boomers are active social media users.
4. Users spend an average of 3 hours per day on social networks and messaging.
5. 73% of marketers believe that social media marketing has been “somewhat effective” or “very effective” for their business.
6. 54% of social browsers use social media to research products.
7. 71% of consumers who have had a positive experience with a brand on social media are likely to recommend the brand to their friends and family.
8. 49% of consumers depend on influence recommendations on social media.
9. 500 million daily active Instagram stories are uploaded worldwide.
10. 91% of all social media users access social channels via mobile devices.

Source - click here.

In this article, we will implement a social sharing using Social9. We provides simpler implementation of social button into Gatsby website or blog. Social is a free service and providing social sharing buttons with Social Analytics as a combo.

Outline

1. Get The Code Sippet From Social9 Console
2. Add Script To Gatsby Config
3. 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,Copy

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.Copy

Update your gatsby-config.js file under the root path of your Gatsby project which should look like this,Copy

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.Copy

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 names9-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.

Unlike any other widget, the inline type requires a parent element to associate itself with. That parent element acts as a container for the widget to render.

You can provider either an id (#s9-id-container) or the class (.s9-class-container) name to identify the element in the page. Note: class is useful when multiple instances of the same widget are required e.g. a news page with multiple cards.Congratulations! Now you can leverage the social9 services. Let us know you thoughts on this!