Social media

Add Facebook and Twitter buttons to your Webflow site.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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

In this article, we’ll show you how to add the 2 social media elements included in Webflow’s Elements Panel:

  1. A Facebook like button
  2. A Twitter follow and tweet buttons

‍Add a Facebook like button

From the left toolbar, click the plus sign (the Add button) and find the Facebook element under Components. Drag it into your design.

The eleven elements that are included in the components section are background video, dropdown, embed, lightbox, navbar, search, slider, tabs, map, facebook (highlighted) and twitter.

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

  1. Connect your Facebook URL (or the URL you want to showcase likes for)
  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 page you’d like to connect to the button. Facebook will automatically pull in and display the likes for the page you choose. So this can be your Facebook page or a website URL you’d like to showcase Facebook likes for. 

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
The three facebook layout options are displayed.

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

Like we did for Facebook, drag the Twitter button from the Add panel. 

Choose your button type: 

  1. A tweet button
  2. A follow 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
  3. Show or hide the bubble: Twitter gives you the option to show a bubble, but because Twitter no longer pulls the number and it shows up as an ellipsis, you may want to hide it.
  4. Choose your button size
The Twitter settings panel displays two tab choices for the button, text input fields for both "share URL" and "tweet text". It also displays tabs options for Bubble, layout, size and a show all settings button.

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 (without the @ sign)  
  2. Show or hide the bubble: this displays the number of followers for the handle provided 
  3. Choose your button size
The Twitter settings panel for a follow button displays a text input field for the User @ handle, two tabs for both Bubble, size and a how all settings button.

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


Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top