Add social media modules to help visitors connect with you on popular social platforms and share your content with their network. Find these modules under the category Social media in the Add module menu.

0_-overview.jpg

 

Social media links

Use the Social media links module to include links to your different social media platforms on your website.

Hover the module and click on Content or Design on the dropdown to edit your Social media links module.

1_-Social-media-links.jpg


Content
There are two ways of adding links to your Social media links module:

  • Using Global Data: toggle Use Global Data source to display the social links you have previously created in Global Data
  • Adding links manually: click Add link and select the social media type by clicking on the corresponding icon. When you click on an icon, the name of your link will automatically change. Paste the URL of your social media page (e.g. https://www.facebook.com/companyname/) into the URL field. You can also add a title tag which will appear when visitors hover on the social media icon and contributes to improved search engine visibility.   

 

Design
The Design section is where you style the icon, background, border, and spacing on your Social media link module. For more specific styling options, click More local design options. For more information on styling, please refer to our dedicated styling guide.

 

Facebook modules

Use the Facebook modules to include different actions via Facebook on your website. Hover the modules and click on Content or Design on the dropdown to edit them.

  Tips for retrieving Facebook links

How to get the URL for a page: the URL of a page can be retrieved from the address field of your browser when you are on a Facebook page. The URL of a page should look like this: https://www.facebook.com/xxxxx/.

How to get the URL for a postwhen viewing a post, find the time stamp placed directly underneath the name of the individual or organisation who posted it. By clicking on it, the post should expand to fullscreen and from the address bar you can retrieve the URL to that specific post.

How to get the URL for a videoright click on top of a video and select the option Show Video URL. You can then copy the link and paste it wherever needed.

 

 

Facebook like

Use the Facebook like module to motivate visitors to like a page and to show how many people already do so.

Hover the module and click on Content or Design on the dropdown to edit your Facebook like module.

Content

  • URL to like: paste the URL of the page you wish the Like button to work on.
  • Action type: select whether you wish the visitors to either like the page or recommend it to their networks.
  • Show friends' faces: when this option is enabled, if a user has friends who have liked the page, a small thumbnail of their profile pictures shows close to the button.
  • Include Share button: add a Share button next to the Like/Recommend button. 


Design
The Design section is where you change the background, border, and spacing on your Facebook like module. For more information on styling, please refer to our styling guide.

In the Design section, you can also edit the button layout. There are four button layouts to choose from.

1. Standard
 2__Button_Layout_Standard.png

2. Box with count
 3__Button_Layout_Box_with_count.png

3. Button with count 
4__Button_Layout_Button_with_count.png 

4. Button only
 5__Button_layout_Button.png 

 

Facebook share

Use the Facebook share module to make it possible for visitors to share a page or a post on their own Facebook profiles. Hover the module and click on Content or Design on the dropdown to edit your Facebook share module.


Content
In URL to share, paste the URL to the page or post you want the visitors to share by clicking the button.


Design
The Design section is where you set the alignment, background, border, and spacing on your Facebook share module. For more information on styling, please refer to our styling guide.

In the Design section, you can also edit the button layout. There are six button layouts to choose from.

1. Box with count  
6__Button_Layout_Share_Box_with_count.png

2. Button with count  
7__Button_Layout_Share_Button_with_count.png

3. Button only
 8__Button_Layout_Share_Button.png

4. Icon with link 
9__Button_Layout_Share_Icon_with_link.png

5. Icon only  
10__Button_Layout_Share_Icon.png

6. Link only  
11__Button_Layout_Share_Link.png 

 

Facebook post

Use the Facebook post module to display any post, including the Like, Comment, and Share buttons. Hover the module and click on Content or Design on the dropdown to edit your Facebook post module.


Content
In Post URL, paste the URL of the post you wish to display.


Design
The Design section is where you set the post width, background, border, and spacing on your Facebook share module. For more information on styling, please refer to our styling guide.

 

Facebook video

Use the Facebook video module to display a video, which also includes the Like, Share, and Watch Later buttons. Hover the module and click on ContentDesign or Settings on the dropdown to edit your Facebook video module.


Content
In Video URL, paste the URL of the Facebook video you wish to display.


Design
The Design section is where you style the background, border, and spacing of your Facebook video module. For more information on styling, please refer to our styling guide.

In the Design section, you can also change the alignment and width of your Facebook video module.

  • Fit to column width: by enabling this option, the video will automatically stretch to the width of the column in which it is placed.
  • Allow fullscreen viewing: if enabled, visitors will be able to expand the video and view it fullscreen.
  • Video width: manually adjust how wide (in pixels) your video should appear when displayed on your website.


Settings
Toggle Autoplay video if you want your Facebook video to playback automatically when visitors open the page of your website where the module is placed.

 

  

Facebook comments

Use the Facebook comments module to open up a comment section on a predefined post. It will only show the comments posted on your page but there is still the possibility for people to also add the comment to Facebook. Hover the module and click on ContentDesign or Settings on the dropdown to edit your Facebook comments module.


Content
In Comments page URL, paste the URL of any content you wish to open up a comment section about.


Design
The Design section is where you set the background, border, and spacing of your Facebook comments module. For more information on styling, please refer to our styling guide.

In the Design section, you can also change the width and alignment of your Facebook comments.

  • Set width automatically: by enabling this option, the comments section will automatically stretch to the width of the column in which it is placed.
  • Comments box width: here you can manually adjust the width (in pixels) of the comments section.


Settings

  • Order comments by: define if you want the comments to be ordered by newest, oldest or top comments. 
  • Number of comments displayed: define how many comments you want to show on the module.

 

Facebook page embed

Use the Facebook page embed module to embed a Facebook page on your site with the possibility to show the timeline, send messages and/or see events. Hover the module and click on Content or Design on the dropdown to edit your Facebook page embed module.


Content

  • Facebook page URL: by default, the module will show Facebook's home page. Add the page URL of the Facebook page you wish to display in the field.
  • Show friends' faces: when this option is enabled, visitors will be able to see the pictures of friends who like the page.2_-Facebook-Embedded-Page_show-friend_s-faces.jpg
  • Hide cover image: with this option enabled, the background of the header will be left blank instead of displaying the cover image.
  • Page tab to show: by default, the timeline tab will be selected already. Click on the field to add the Messages and the Events tabs in case you wish to display them. 


Design
The Design section is where you change the background, border, and spacing of your Facebook page embed. For more information on styling, please refer to our styling guide.

In the Design section, you can also change the header styling, alignment, width and height of your Facebook page embed module.

Tick Small header if you want to switch to a small header above your embedded content. 2_-Facebook-Embedded-Page_small-header.jpg

 

 

Instagram embed

Use the Instagram embed module to display an existing Instagram post to your website visitors.  Hover the module and click on Content or Design on the dropdown to edit your Instagram embed module.


Content

  • Instagram post URL: add the short URL of the Instagram post - either picture or video - you wish to display on the module. The format of the URL should look like this: https://www.instagram.com/p/xxxxxxxx
  • Show caption text: tick this option if you wish to display both the post and the accompanying description. 


Design
The Design section is where you change the background, border, and spacing of your Instagram embed module. For more information on styling, please refer to our styling guide.

 

Twitter modules

Use the Twitter modules to include different actions via Twitter on your website.

 

Twitter share

Use the Twitter share module to enable visitors to share pre-defined content on Twitter. Hover the module and click on Content or Design on the dropdown to edit your Twitter share module. 


Content

  • Share URL: add the URL to the content you wish people to tweet.
  • Tweet text: write a small text that will show up alongside the URL in the tweet. If the tweet text is left blank, it will use the title of the page the module is on.
  • Author: add the Twitter username of the author of the content. If it is yourself, feel free to add your own username so people know who has originally posted the content.
  • Hashtags: add hashtags to the tweet by inputting them without the # in front and separated by a comma.
  • Show count: if enabled, a count with the total number of people who have shared that content will appear next to the Tweet button. 


Design
The Design section is where you change the background, border, and spacing of your Twitter share module. For more information on styling, please refer to our styling guide.

In the Design section, you're also able to determine how big you want the share button to be.

 

Twitter follow

Use the Twitter follow module to add a Follow button to your website in order to influence visitors to follow you. Hover the module and click on Content or Design on the dropdown to edit your Twitter follow module.


Content

  • Username: add your Twitter username so visitors can follow you.
  • Show username: when this option is enabled, your username will show up in the Follow button. Otherwise, the button only shows the Twitter icon and the text 'Follow'.  


Design
The Design section is where you change the background, border, and spacing of your Twitter follow module. For more information on styling, please refer to our styling guide.

In the Design section, you're also able to determine how big you want the follow button to be.

 

Twitter hashtag

Use the Twitter hashtag module to make it possible for your visitors to tweet your hashtag alongside a predefined text and URL.

Hover the module and click on Content or Design on the dropdown to edit your Twitter hashtag module.


Content

  • Hashtag: you can only add a single hashtag. Write it in the field and leave out the # in front.
  • Tweet text: write a small text to go alongside the hashtag. If the tweet text is left blank, it will use the title of the page the module is on.
  • Share URL: add the URL of the content you wish visitors to tweet.


Design
The Design section is where you change the background, border, and spacing of your Twitter hashtag module. For more information on styling, please refer to our styling guide.

In the Design section, you're also able to determine how big you want the hashtag button to be.

 

Twitter mention

Use the Twitter mention module to allow visitors to mention you or someone else in a tweet. If they mention you, it's possible to add a predefined text. Hover the module and click on Content or Design on the dropdown to edit your Twitter mention module.


Content

  • Share URL: add the URL of the content you wish visitors to tweet. 
  • Tweet text: write a small, predefined text you wish people to tweet out.


Design
The Design section is where you change the background, border, and spacing of your Twitter Mention module. For more information on styling, please refer to our styling guide.

In the Design section, you're also able to determine how big you want the Twitter mention button to be.

 

LinkedIn share

Use the LinkedIn share module to allow visitors to share your site or a specific page to their networks through LinkedIn. Hover the module and click on Content or Design on the dropdown to edit your LinkedIn share module.


Content
In Link to share, you can add the URL of the page you want your visitors to share. If you want them to share the page where the module is added, simply leave the field blank. The page added should have the following format: https://pagetoshare.com


Design
The Design section is where you change the background, border, and spacing of your LinkedIn share module. For more information on styling, please refer to our styling guide.

 

Email share

Use the Email share module to allow visitors to send the page URL to someone by email. You can insert the module anywhere on a page, also in the header and the footer. When visitors click on the email icon, an overlay appears asking them to fill in their name, email, friend's email, and complete a reCAPTCHA. 

14_-Email-share.jpg

Upon clicking Submit, an email will go out to the recipient with the subject line "Website recommendation" and the following body text: "*Name recommended you the following site *URL". It is not possible to customize this email message.

If you wish to edit the design of the Email share module, hover the module and click on Design on the dropdown.


Design
The Design section is where you change the background, alignment, border, and spacing of your Email share module. For more specific styling options, click More local design options. Please refer to our dedicated styling guide for more information.

Was this article helpful?
0 out of 0 found this helpful