With the share element, you create social share buttons. Your audience can click these buttons to share your content on their social networks. In this article, we show you how you can set up these buttons and how to manage them.
💡 The share element is a great way to let your audience engage with your content (and spread the word!).
🎥 Watch our quick 1-minute video on this topic.
What are social share buttons?
Social share buttons can be added to a page so users can share a page or Foleon Doc on their own networks. These can be added to the page with the share element. In the example below, you can see what that looks like for your audience.
How to add the share element
Navigate to the left-hand side of your screen and open up the elements tab. Click the Share element and drag it onto your page.
💡When you're working with the Content Builder, it's not possible to add a share element to your page. They're included in some block templates.
The first time you drop the social share element, a pop-up will open automatically, allowing you to choose which platform(s) you want to display. The following social platforms are supported:
- X (formerly Twitter)
- LINE
- Bluesky
You can change which social media icons are shown in the general settings of your element settings.
💡 When you click the email icon in the live Doc, Foleon will open your device’s default mail app. This depends on your laptop’s settings — if you're not logged in, you may be prompted to choose or sign in to your email provider.
Share from the navigation bar
The social icons in your navigation bar are typically designed to link to your social media profiles. However, if you'd rather use these icons to let viewers share your Foleon Doc, there’s a handy workaround.
Here are the steps you can follow:
- Add the share element anywhere on your page and select the platforms you want to include (e.g., LinkedIn). You will only add this element temporarily.
- Publish or republish your content, go to the live version, and click on the social icon from the share element.
- Copy the full URL from your browser’s address bar after clicking each icon.
For example: https://www.linkedin.com/shareArticle?mini=true&title=Recruitment%20-%20Content%20Compass&url=https%3A%2F%2F%3Futm_source%3Dlinkedin%26utm_medium%3Dsocial%26utm_campaign%3Dim-share-button - Return to your page in the editor and delete the share element.
- Open the Doc settings, scroll down to the marketing tab, toggle on social page(s) icon, and paste the URLs in their respective fields.
- Republish your Doc and check the live version to ensure the navigation icons now trigger social sharing.
💡 This method effectively turns your navigation bar icons into share buttons. Just remember: if your Doc’s URL changes, you’ll need to update those share URLs.
Element Settings
💡 When you're working with the Content Builder, the settings of the share element are limited to general settings and background.
General Settings
In the general settings, you can select the platform(s) you want to link to. You can also control the icon size to make the icons bigger or smaller.
By default, the social share element shares the current page. If you want to share a custom URL, you can add that in the alternative URL field.
Want to share the general URL of your content? You can paste this in the alternative URL field.
Alignment
Set the alignment of the social share buttons to make them align right, middle, or left in your column.
Border
The border option allows you to create a full border or a border on certain sides of your element. all sides at once are selected by default, which means that when you increase the border thickness, the same amount of border will appear on all sides at the same time.
When all sides at once is deselected, the option to increase the amount of the border per side will appear. It's also possible to add more than one border. Every border will have the same color that is selected at the border color picker.
Spacing
Spacing can be increased to create more space between the bottom border of the element and the content within the element.
Background
Here you can set the background color of the share element.
Animation
The entrance animation of the element can be selected in the drop-down menu. This animation will show one time when the page is opened. In the block settings, you can make the elements within the block animate only once, or make it animate every time it appears on the screen.
