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.
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.
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.
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.
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:
Then replace the text “Twitter” with the Font Awesome shortcode for a Twitter icon:
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"
Note: combo classes are separated by a space.
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;”
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.
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.
And here’s how it works.
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!