Social Media Buttons

WEB STRUCTURE

WEB STRUCTURE

New

Element Hierarchy

Element Hierarchy

New

3:57

Navigator Panel

Navigator Panel

New

2:45

Structure Elements

Structure Elements

New

Section

Section

New

4:14

Container

Container

New

2:44

Columns

Columns

New

2:22

Div Block

Div Block

New

3:37

Buttons & Links

Buttons & Links

New

Button

Button

New

14:08

Link Block

Link Block

New

9:35

Text Link

Text Link

New

1:16

Typography

Typography

New

Heading

Heading

New

2:02

Paragraph

Paragraph

New

4:42

Rich Text

Rich Text

New

3:52

Text Block

Text Block

New

0:56

Block Quote

Block Quote

New

0:42

List

List

New

2:31

Media

Media

New

Image

Image

New

3:39

Image File Types

Image File Types

New

2:22

Image Resolution

Image Resolution

New

3:28

Assets Panel

Assets Panel

New

3:08

Video

Video

New

1:20

Background Video

Background Video

New

3:15

Lightbox

Lightbox

New

3:44

Forms

Forms

New

Intro to Forms

Intro to Forms

New

4:55

Styling Forms

Styling Forms

New

2:55

Navbar

Navbar

New

Navbar

Navbar

New

9:38

Styling a Navbar

Styling a Navbar

New

4:34

Navbar Menu Button

Navbar Menu Button

New

4:51

Dropdown

Dropdown

New

4:38

Pre-built Components

Pre-built Components

New

Slider

Slider

New

4:56

Tabs

Tabs

New

4:38

Map

Map

New

2:58

Social Media Buttons

Social Media Buttons

New

2:49

Custom Code Embed

Custom Code Embed

New

1:24

Symbols

Symbols

New

3:47

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

Transcript

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.