How To Create Social Sharing Icons For Your Website Under 5 mins?

What is a social sharing icon?

A social sharing icon contains a URL of your website. Users visiting your website can share the URL on multiple social media platforms. Visitors to your website can share it with a single click rather than going through the lengthy procedure of copying the URL and creating content before sharing it. Social platforms are the largest source of traffic for e-commerce businesses. On average, people spend 2.5 hours on social networking platforms. While reviewing products or watching something interesting, I share it with my friends.

‍

Consider the following scenario: You browse a website with interesting items for sale, but the share icons are hidden. It will be difficult for a user to open a new tab, log in to the desired social site, and then copy the URL to share. Most users will not do that and will leave your website without sharing it with anyone.

‍

If you're putting in the time and effort to create a website, it's wise to include URLs to share on social websites with a single click. Fynd Platform offers the Social Share extension to configure and add social icons on your website.

Features

1. 50+ social icons to add to your website.
2. Engaging design with laptop, tablet, and mobile compatibility.
3. Fully customisable icons, configure colour, shapes, layouts, etc.

Let's understand how to configure Social Share extension on your website.

1. On the Fynd Platform, click on Extensions and select the Social Share extension from the list.
2. Select the Sales Channel from the dropdown list where you wish to add social sharing icons.
3. Click on Configure your Application to move forward with extension settings.

Two options are available for extension configuration, Behavior and Design.

Behavior settings of Social Share extension

This tab allows you to add multiple social icons to your webpage.

1. Click on +Add to add the social icon of your choice.
2. A window will appear. Select the type of social sharing icon from the dropdown list.
3. More than 40 social options are available on the list. Select the icon you wish to add first.
4. In the Url section, paste the URL you want to share after the user clicks on the social share icon.
5. The extension allows you to select whether to open the link in a New Browser Tab or Same Browser Tab.
6. Click on Save. Your first social share icon is ready. Now add other options following the same procedure.

‍

Design settings of Social Share extension

The Design section has four configuration choices for customizing the icon appearances. Layout, Color, Hover, and Borders are the four elements. Let's look at how to set up each of these features.

‍

1. Layout configuration

There are two layout options: Default and Fixed Banner. The default setup option provides an easy setting with no complex layout modification options. Configure social icons by choosing the orientation, icon size, and app width.

‍Fixed Layout option settings

• Position - Select the Top, Down, Right, and Left display positions of the social icons.
• Offset Plugin Position - This slider allows you to move the social icons across the width of your page.
• Select Orientation - Set the positioning of the social icons, either vertical or horizontal.
• Icon Size - Increase or decrease the icon size using the slider.

Click on Save after fixing the layout of your social share icons.

‍

2. Color configuration

The Color section allows you to customise the look of the social share symbols to match your brand. Set the icon and background colour by adding RGB values or hovering over the colour palette. You can also enable the gradient option. It allows you to select two colours for the background.

‍

3. Hover configuration

This option allows you to configure the hover effect settings. The appearance of the icons will change if a user hovers over them. This option can be disabled if you wish to keep the icons static.

‍

4. Border configuration

Configure the border appearance from this section.

• Border Size - Increase or decrease the width of the icon borders in pixels (px).
• Border Roundness - This slider allows you to change the roundness of the social share icons. Setting this to the maximum will make the icons circular.
• Border Color - Set the colour of the icon border.
• Background Shadow - Enable shadow to the social icons. Select from the four available options and add shadow to the icon appearance.
  ‍

Click on Save. Your social share icon configuration is complete. It will be visible on your website once you make it active using the toggle button on the right top corner of the extension settings.Voila! Your social share icons are ready in no time.

‍

Now, allow your customers to share your website URL anywhere and everywhere with a single click. Get in touch with us at [email protected] to know more.