Customizing your social sharing buttons with Webflow CMS

Learn how to build custom social sharing buttons in Webflow — without using 3rd-party plugins.

Customizing your social sharing buttons with Webflow CMS

Relive all the fun of Webflow Conf 2024

From our keynote to the inspiring and informative breakout sessions, all recordings from this year's Webflow Conf are now available to watch on demand.

Spend a few minutes online researching social sharing buttons and you’ll find a number of articles telling you they’re a waste of time.

The common complaints against social buttons are:

  1. Low engagement: According to Moovweb customer data, 99.8% of mobile users don’t use social buttons  and only 0.6% of desktop users bother to click to share.
  2. Reduced performance: Most sites use plugins to create their social buttons. This means that sites need to load JavaScript and who knows what to get the plugin to work, leaving visitors waiting.
  3. Distracting: Social buttons distract users from primary calls to action. Taloon.com performed A/B testing on their product pages and found that removing social share buttons increased conversion 11.9%.

Oh, wow — I just made a great case for scrapping social buttons altogether!

But not so fast: There’s a major flaw in these criticisms. Because it’s not really about the social buttons at all.

It’s not about social buttons — it’s about content and design

An 0.6% engagement rate sounds terrible. But that can still translate into a lot of shares if you generate the traffic. And once it’s shared, who knows how far your content will spread. More importantly, this aggregate data doesn’t show us that social buttons are bad for business.

In fact, it reveals that there's a lot of content out there that’s just not worth sharing. In other words, a lot of bad design choices are being made.

If you're distracting people from your main call to action, that’s a bad design choice — not a problem with social buttons.

If no one’s using your social buttons, but you have them on every page, that’s a bad design choice. No one wants to share your terms of service page. Focus on sharable content.

If you’re worried about load times, don’t use plugins. Build the experience yourself.

Luckily, Webflow gives you full control over your content and design, so you can build your own social sharing buttons, and ensure they’re in the right places.

So let's jump into it.

Unleash your creativity on the web

Build completely custom, production-ready websites — or ultra-high-fidelity prototypes — without writing a line of code. Only with Webflow.

Read now

Social sharing button customization made simple

Social sharing buttons live all over the internet, but many use third-party services and complicated JS scripts that don’t always work. So while you can use something like AddThis,  using Webflow CMS with some simple HTML and CSS to create a totally custom experience can improve performance. Plus, it’s way more fun.

So this is what we’re looking to build: someone hovers their cursor over a Twitter icon, which transitions from white to Twitter blue. When they click the icon, a new window opens, giving them the option to tweet the article’s title and link.

click-to-tweet window

Step 1: Design your icon

We’ll start by designing the icon in Webflow so we can test how the styles will work in our layout and create the CSS we’ll use later.

First, add a link block to the design. I use Font Awesome to quickly bring in icons —  and so I can style them using Webflow’s typography controls. I find this easier than using image-based icons that I’d have to edit in Photoshop or Sketch.

To style the icon, we’ll add a class to the link block and call it “share-button.” We’ll then use this class to define the Font Awesome icons’ look and text color in their normal state. I chose an off white (#ede9e1), but you can use whatever fits your design.

Styling FontAwesome's typography
Using Font Awesome instead of image-based icons lets you use typographic controls for sizing, color, transitions, and more.

Next, on this same class, we’ll add a transition to control how the icon will look on hover. By applying it to this class, we can ensure all of the social buttons will share this behavior. In the Style panel, scroll down to the Transitions and Transforms section and add a transition that affects the color.

Adding a color transition to the social button class.

From here, we’ll create a combo-class for each social button so we can customize the color that appears on hover.

This first button thus gets a combo class called “twitter.” Select the hover state from the states dropdown menu. In the Typography section, change the font color to Twitter blue: #1da1f2. You can repeat this step for other social platforms by creating a new combo class for each network.

Styling your Twitter share button's hover state
‍Switching our combo-class to the hover state.

Alright, the CSS is set.

Step 2: Add and edit Twitter’s custom share code

Now for a little custom coding. First, add an Embed component to your site where you want the button to appear. Then copy and paste the the following code into the Embed:

<a href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"
<div>Twitter</div>
</a>

Then replace the text “Twitter” with the Font Awesome shortcode for a Twitter icon: 

<a href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"
<div>&#xf099;</div>
</a>

Add the class names you created in step 1 to the link element (so, “share-button twitter”) for the Twitter button.

<a class="share-button twitter"

href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"

<div>&#xf099;</div>

</a>

Note: combo classes are separated by a space.

If you want, you can also add a little JavaScript so a new window will pop up rather than a new tab, which looks a lot better and is less disruptive:

onclick="window.open(this.href, 'twitter-share','width=580,height=296');return false;”

(Thanks to Jason Gipson for finding that.)

The updated code looks like this:

<a onclick="window.open(this.href, 'twitter-share','width=580,height=296');return false;”

class="share-button twitter"

href="http://twitter.com/share?url=<URL>&text=<TEXT>&via=<USERNAME>"<div>&#xf099;</div></a>

To grab the equivalent code for other social networks, check out Gregory Schier's "Pure HTML Share Buttons."

Step 3: Connect the Embed to your Collection

The final step is to connect the CMS data to the share link by replacing the <URL>, <TEXT>, and <USERNAME> elements of the generic code with your data.

For <URL>, type in the root URL for all of your blog posts, with a final forward slash. Then insert the CMS’ “Slug” field after that last slash.

Usually, these buttons include the article’s title in the tweet. So we’ll replace <TEXT>, with the “Name” field. (Or whatever field you use for titles, if not the Name field.)

Last but not least, replace <USERNAME> with your Twitter handle.

Adding your Collection data to your social sharing embed
Replacing the generic elements of the code with your Collection data.

Pro tip

If you’ve got a multi-author blog, create a Collection called Authors and include their Twitter handles in a field so you can pull that field into the code!

And you’re done!

Advanced move: Create click-to-tweet content

You can get even more creative by giving your visitors some pre-written content to share, and designing an attractive module to entice them to share it really adds to the experience.

To do this, add a text field to your blog Collection and call it Tweet. Then design an element on the page that displays the tweet as text and repeat the steps above to create the button.

But this time, instead of using the Name field to replace <TEXT>, use the Tweet field. This is exactly how the Webflow blog’s click-to-tweet works.

Dynamically pulling in a Collection field to populate the tweet's text
‍Dynamically pulling in a Collection field to populate the tweet's text

And here’s how it works.

pre-content.gif
Add here's my click-to-tweet module, dynamically pulling in my tweet.

For a detailed walkthrough of this, check out “How to dynamically embed Twitter share buttons in Webflow.”

Have any question or examples of creative social buttons? Share them in the comments below!

Read now

Last Updated
October 10, 2016
Category

Related articles

How to add dynamic filtering and sorting to your Webflow websites
How to add dynamic filtering and sorting to your Webflow websites

How to add dynamic filtering and sorting to your Webflow websites

How to add dynamic filtering and sorting to your Webflow websites

Development
By
Anna Sabatini
,
,
Read article
Hamburger menus: A design guide with examples
Hamburger menus: A design guide with examples

Hamburger menus: A design guide with examples

Hamburger menus: A design guide with examples

Design
By
Webflow Team
,
,
Read article
11 time-saving pro tips for web designers working in Webflow
11 time-saving pro tips for web designers working in Webflow

11 time-saving pro tips for web designers working in Webflow

11 time-saving pro tips for web designers working in Webflow

Design
By
Vincent Bidaux
,
,
Read article
Designing with multilayered fonts in Webflow
Designing with multilayered fonts in Webflow

Designing with multilayered fonts in Webflow

Designing with multilayered fonts in Webflow

Design
By
Vincent Bidaux
,
,
Read article
How to create (and grow) a job board using Webflow
How to create (and grow) a job board using Webflow

How to create (and grow) a job board using Webflow

How to create (and grow) a job board using Webflow

Development
By
Tomas Laurinavicius
,
,
Read article
3 tips for using custom code in Webflow
3 tips for using custom code in Webflow

3 tips for using custom code in Webflow

3 tips for using custom code in Webflow

Development
By
Timothy Ricks
,
,
Read article

Get started for free

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.

Get started — it’s free
Watch demo

Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.