Social media

Add Facebook and Twitter buttons to your Webflow site.

elements
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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.


The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?