The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!

Since the Google Plus button no longer displays a +1 count, the UI of the Google Plus settings doesn't have that option anymore.

This video features an old UI. Updated version coming soon!

Social Media elements can increase user interaction, drive traffic to your social pages, and add legitimacy to a project. 

In this article, we will cover the three social media elements included in the Elements Panel: Facebook, Twitter, and Google Plus.

Webflow social media elements
Social media elements


Once you drop in the Facebook button, you can see the Facebook settings. You can also access these settings by selecting the element and pressing enter.

Webflow Facebook element

Here, you can type in or paste in the URL to your Facebook page.


Then, you can choose from three layout options:

  • Standard displays a Like button plus a text summary.
  • Box also gives you a Like button and shows you how many likes you have.
  • Button shows the same information, collapsed into a single button.
Webflow Facebook button layouts

You can also control width and height properties of this component. This can be helpful if you're looking to reflow or reposition some of the text or other content inside the component.

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


Webflow Twitter element

Drag the Twitter component into your project. The Twitter settings modal gives you two options: Tweet or Follow. You can also access these settings by selecting the element and pressing enter.

Tweet Option

Tweet, lets you specify a URL to share and a Tweet text which is the specific message you want to share along with the URL.


Show Bubble toggles the bubble which used to show Tweet counts. However, Twitter no longer reports the Tweet count so there's an ellipsis there instead. There’s also an option for a larger version of the button. You can choose to display the Twitter button and the bubble side-by-side horizontally or stacked vertically.

Follow Option

The Follow Button gives you some different options. You can specify your Twitter handle or username, and choose whether or not to show the bubble, and of course, you can toggle the Large Button here as well.


Google Plus

Webflow Google Plus element

Once you drag the Google Plus element onto your page, you can specify the URL you want people to share on Google Plus. You can access these settings by selecting the element and pressing enter.

Layout options specify size, or in the case of Tall, the positioning of the component.

Google plus settings in Webflow

Now, you know how to easily add social media components to your project for Facebook, Twitter, and Google Plus.