Social Sharing

The Social Sharing Sidebar Extension allows you to share a piece of content (entry) such as title, URL, and body, on social media websites such as Facebook, Twitter, and LinkedIn directly from Contentstack.

When you create or edit an entry in your content type, you can use this Sidebar Extension to post the URL or the title of your entry on the selected social media website.

How Does the Extension Work

This Sidebar Extension uses the URL of your entry and the publishing environment. So when you select the Social Sharing widget from the Widget dropdown, it picks up the URL of your publishing environment (such as production or development) along with the URL of the entry and creates a new URL which can be shared on social media websites.

Note: On Facebook and LinkedIn, you can only post the URL that is generated by the Sidebar Extension. On Twitter, you can share the title, the generated URL, and certain text from the body of your entry. The maximum character limit on Twitter is 280.

This step-by-step guide explains how to create a Social Sharing Sidebar Extension in Contentstack.

1. Create a Sidebar Extension

   To create a Sidebar Extension, log in to your Contentstack account and perform the following steps:

   1. Go to your stack and click on the “Settings” icon on the left navigation panel.
   2. Click on Extensions. You can also use the shortcut keys “alt + X” for Windows OS users, and “option + X” for Mac OS users to access the extensions menu.
   3. Click on + New Extension button on the top-right corner and select Create new. 
      
      
   4. On the Select Extension Type screen, select Sidebar Extension.
   5. On the Create New Extension page, enter the following details:
      
      1. Title: Enter a name for your extension, for example, Social Sharing.
      2. Hosting method: Select Hosted by Contentstack. When you select Hosted by Contentstack, the Extension source code field becomes visible.
      3. External source code: In this field, you need to enter the extension code. If Extensions are part of your plan, contact our Support team to get the code for the extension.
         The support team will provide you with the source code (src file). Copy the code from the index.html file located in the root folder and paste it in the "Extension source code" field.
      4. Scope: Select the content type for which you want to use this extension. The default value is All Content Types. You can select multiple content types.
   6. Click on Save to save your settings.

2. Use the Extension

   1. Go to your stack and click on the “Entries” icon on the left navigation panel.
   2. Select the content type for which you have enabled the Sidebar Extension and click on an entry.
   3. Click the “Sidebar Extensions” icon on the right-hand side of the page to expand the sidebar.
      
   4. Select Social Sharing from the drop-down menu. This will display the list of options you can choose from.
      
   5. The selected Sidebar Extension expands on the sidebar displaying the list of options that you can choose from
      • Select URL: You need to select the URL of the environment such as production, development, or whichever that you have set up.
      • Select Field To Share: From this dropdown, select the field which you want to share on the available social media platforms. For example, on Twitter, you need to specify the fields such as Title, URL, or Body. On LinkedIn and Facebook, only the URL can be shared.
      • Finally, select the social media platform on which you want to share your content. For our example, click on the Twitter option.
        

   If you select Twitter, the following screen will pop-up. You can see that the Body of the entry is published along with the URL generated by the Sidebar Extension.