The social buttons widget gives your website visitors the ability interact with your organization on social media in two distinct ways. One configuration of the widget will drive additional traffic to your social media sites on the following platforms:
- Google Plus
- YouTube
The other configuration will enable visitors to share the current page in their browser to the social media platforms above (excluding YouTube) and also:
Each button can be turned on and off individually, but you can also activate Google Tag Manager events for each button as well if you choose. For more information about Google Tag Manager, view their documentation here.
The social buttons widget also requires the inclusion of the Font Awesome CSS library on your templates. The widget does not add this library by default. For a reference on how to add the library to your template, view this page and navigate to the section titled "Inserting Additional Head Content or Code" for instructions. To get the Font Awesome CDN link, start here.
Configure Your Buttons (Layout Tab)
Use the following steps to create a set of social buttons:
- Create a new template for pages that should include the social buttons.
- Open the Layout tab and click and drag the Social Buttons widget onto your template and drop it in the desired region
- Keeping on the Layout tab, either double-click the widget or single-click and then click the wrench icon to configure the widget’s properties
- A pop-up window will then be displayed that will look like the screenshot below:
From here, you can customize the location of the buttons with any combination of the positioning dropdowns. There are also more advanced options that allow precise vertical offset padding and mobile breakpoint.
- Click OK to save and close the configure widget properties window.
- Click Save to save the Layout.
Setting Button Functionality (Content Tab)
- Navigate to and open the Content tab
- Select the edit icon to edit the social buttons widget content
- Choose the button functionality option
- Check “Enable Button” for the platforms you would like to appear
- If you have Google Tag Manager (GTM) configured on your template, you can enable event pushes to the default dataLayer array as a “click” event type. The value of the event is depends on the button functionality you selected. For example:
-
- If you have GTM configured on your template, “Share current page” is select for functionality, and the Facebook button is enabled for both viewing and GTM push, the object pushed to the dataLayer array will be: “click: facebook-share”
- However, if “Link to your social media pages” is selected for button functionality, the object pushed to the dataLayer array will be “click: facebook-page”
This will allow you to differentiate between the click types when analyzing the GTM data.
- Click Save to save your changes.
Reordering Your Buttons (Content Tab)
The social buttons can be reordered by using the up and down arrows to the right of each row. After you have them placed in a satisfactory order, click Save to save your changes.
Widget Style Properties (Style Tab)
CSS Root Class: A text box in which you can enter a CSS class that you want to apply to the rendered content. Your site designer can provide you with the class name. This can be configured from the Template's Style tab and editing the widget's properties from here.