new course
CSS grid landing page tutorial (36min)

Lesson info

Lesson info

Social media buttons can increase interaction with your brand, drive traffic to your social pages, and add legitimacy to a project via the magic of social proof. Which is why we built them right into Webflow.

In this video, we cover the 2 social media elements included in Webflow's Elements Panel — Facebook and Twitter — and how to customize them to meet your needs.

Explore this project

Want to dig into the project featured in this video and see how everything is put together? We've included the full project we used when making this lesson, and we've shared the link right under this very paragraph.

View and clone this projectDownload lesson assets
Clone this projectDownload project assets


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

We'll cover three different components that are included in the Elements Panel: Facebook, Twitter, and Google Plus. And as a bonus, if we have time at the end, we'll cover MySpace.

The Facebook component, like other components we'll cover, can be dragged in from the Elements Panel to any part of our page. Once we drop in the Facebook component, we can see our Facebook Settings. Here we can type in or paste in the URL to our Facebook page.

Three options: Standard displays a Like button plus a text summary. Box also gives us a Like button and shows us how many likes we have. And finally, Button shows the same information, collapsed into a single button.

You can also manually control the width and height properties, and this can be helpful if you're looking to reflow or reposition some of the text or other content inside the component. And the Locale section lets you specify what regional settings like language will show up for your audience.

That's the Facebook component. Let's move on to Twitter.

Same idea here when we drag the Twitter component into our project. This time our settings give us two options: tweet and follow. Tweet, lets you specify a URL to share and specific placeholder text when someone presses the Tweet button.

Now Show Bubble aesthetically matches the other bubbles for Facebook and Google Plus, but Twitter no longer reports the Tweet count so there's an ellipsis there instead.

We also have a large button, which makes the button large.

Finally, vertical does exactly what you might expect: it stacks vertically.

The Follow Button gives us some different options: we can specify our Twitter handle or username, and choose whether or not to show the bubble, and of course, we can toggle the Large Button here, too.

That's Twitter.

Finally, let's look at Google Plus.

Again, we can specify our URL here, which is what will get shared by those people using Google Plus. Layout options specify size, or in the case of Tall, the positioning of the component. And the +1 Count can be displayed as a bubble (as you see here), inline, or not at all.

That's Google Plus.

Finally we'll look at MySpace—And that's all the time we have.

So, you can easily add social media components right to your project...for Facebook, Twitter, and Google Plus.