Social Media Buttons

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Social Media Buttons

Adding Facebook and Twitter buttons to your website can help increase user interaction and drive traffic to both your website and your social pages.

In this article, we will show you how to use the two social media elements included in the Elements Panel and add the following:

  1. Add a Facebook ‘like’ button
  2. Add Twitter follow and tweet buttons

Add a Facebook ‘like’ button

 

Once you add the Facebook button to the canvas, set it up as follows:

  1. Connect your Facebook URL
  2. Customize the Facebook button layout and size
  3. Specify the Facebook button locale

Connect your Facebook URL

In the Facebook button settings, enter the URL of the Facebook page you’d like to connect to the button.

You can add multiple Facebook buttons to your project if you’d like to connect multiple unique Facebook URLs.   

Customize the Facebook button layout and size

By default, the Facebook button will display alongside the number of likes on the Facebook page you’ve connected. In the Facebook button settings, you can customize how the button and number of likes is displayed.

You can choose between 3 layout options in the button settings:  

  • Standard: displays the ‘like’ button and text summary in a single line
  • Box: displays the ‘like’ button and number of likes in a box, stacked vertically
  • Button: collapses the ‘like’ button and number of likes in a single button

In the button settings, you can also set a custom width and height for the button. To do so, enter the desired width and height in the input fields.

Specify the Facebook button locale

You can specify the regional and language settings of the Facebook component using the Locale settings.

Add Twitter follow and tweet buttons

Add the Twitter button from the Add panel. Then, choose what type of Twitter button you want this to be: a follow button or a tweet button.

Create a Tweet button

The tweet button allows users to quickly share a link to your site or a specific page on your site from their Twitter profile. The tweet button helps drive traffic from Twitter to your site and increases the visibility of your content.

Once you’ve added the Twitter button to the canvas and selected the tweet button option, you can update the tweet button settings:

  1. Enter the share URL: this is the URL that will populate the tweet when users share your page.
  2. Enter the tweet text: customize the text that will pre-populate the share tweet.
 

Create a Twitter follow button

The follow button allows users to quickly find and follow your Twitter profile, driving traffic from your site to your Twitter profile and increasing engagement with your site’s visitors.

Once you’ve added the Twitter button to the canvas and selected the follow button option, you can update the button settings:

  1. Enter your Twitter handle: the Twitter account linked to the follow button  
  2. Show or hide the bubble: this displays the number of followers for the handle provided
  3. Enable or disable the large button
 

To add both a tweet and follow button to a page, add two separate Twitter buttons to the page.

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form