Social media

Add Facebook and Twitter buttons to your Webflow site.

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.

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

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

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

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