Customize Social Share Icons in Blogger

I've been spending a significant amount of time this year digging deep into the new Blogger responsive templates (Contempo, Soho, Emporio and Notable). There's quite a bit to be excited about yet there are some very frustrating components to the new responsive layouts that bother me. I will be posting more about them soon.

In the mean time I thought I would add a short post on how you can alter the social share icons in these four responsive templates (plus a similar change in the older V2 template icons at the end of this post). One of my frustrations with the new templates was that all of the social share buttons were set to the same color. You can alter their foreground and background colors as a group in the Template Theme designer which is good, but, they're all the same and don't match the standard colors of the social network logos. It seems that all four templates have used the same social sharing svg icon code.

SVG Icons

If you're not familiar with svg icons you can find more information here (SVG 101) and here (What is SVG?). When the new Blogger version 1.3 or V3 templates came out in early 2017, a significant amount of code was added dynamically as your blog renders for responsive images and SVG sprites. (If you want to find out your Blogger template version just look in the Template html - you'll see the version at the top. Most of us have been using version 2 for the last 10 years).

Altering the social share buttons is easy and only needs some custom CSS to make the modifications. In this example blog I have circled the share icon on the responsive Emporio template like so:

The other 3 responsive templates also have the same share and vary slightly in appearance--but the following change works for all four. When the share button is selected you see all svg share icons in a single theme color like this:

As you can see all of the icons are the same color. I can alter the group's foreground and background colors but not each individually.

Modifying Social Share Icons

The key to modifying each is to find within the final html output just where the svg code gets added to the rendering of the page. It's not in the template itself other than the template b:include snippet like this:

b:include cond="data:view.isSingleItem and data:widget.type == "Blog"" data="{ shareButtonClass: "post-share-buttons-top", overridden: true }" name="maybeAddShareButtons"

This does not get you to the actual svg icons directly. Good news is that once you've rendered your page you can hunt using the browser to find the div tag ids to get to them.

In all four templates, the CSS identifying tags are hinted at by the id .svg-icon-24, but, you need to get each individual one. Fortunately, after debugging the output page, the CSS ids are as follows:

.svg-icon-24.touch-icon.sharing-pinterest
.svg-icon-24.touch-icon.sharing-facebook
.svg-icon-24.touch-icon.sharing-twitter 
.svg-icon-24.touch-icon.sharing-email
.svg-icon-24.touch-icon.sharing-link

Now that we know what the document tags are we can modify them individually. I can now change their individual colors to the standard Facebook, Pinterest and Twitter official colors like so (as well and a custom color for email and link sharing):

.svg-icon-24.touch-icon.sharing-pinterest {
fill: #bd081c;
}
.svg-icon-24.touch-icon.sharing-facebook {
fill: #3b5998;
}
.svg-icon-24.touch-icon.sharing-twitter {
fill: #1da1f2;
}
.svg-icon-24.touch-icon.sharing-email {
fill: #d44638;
}
.svg-icon-24.touch-icon.sharing-link {
fill: #5d005d;
}

Simply copy the code above and add it to the Advanced/Add CSS section of the Blogger Theme Designer like this:

Simply press the Apply button in the upper right and viola, you now have customized social share icons in your V3 responsive templated blog:

This was only an example for altering the icon colors. You can now use the same technique to do unique changes to any svg icons you want in the new templates.

Altering the Old Blogger Template Icons

I focused mostly on the new responsive templates in this post. Actually, svg was nothing new back in V2 of the Blogger templates. However, in V2 they didn't use svg icons--rather, one image for all sharing icons and just moved the position around as you hovered over them.

You can alter the colors of the V2 share icons using the same technique. The CSS is hidden in the Blogger bundled CSS that you don't have direct access to. But, if you want the older template to show the proper social network colors without being grayed-out by default just follow the same steps above but with this CSS code pasted in the Advanced/Add CSS portion instead:

.sb-pinterest {
 background-position:-100px -20px !important
}
.sb-facebook {
 background-position:-60px -20px !important
}
.sb-twitter {
 background-position:-40px -20px !important
}
.sb-blog {
 background-position:-20px -20px !important
}
.sb-email {
 background-position: 0px -20px !important
}
a:hover.sb-pinterest {
 background-position:-100px -40px !important
}
a:hover.sb-facebook {
 background-position:-60px -40px !important
}
a:hover.sb-twitter {
 background-position:-40px -40px !important
}
a:hover.sb-blog {
 background-position:-20px -40px !important
}
a:hover.sb-email {
 background-position:0 -40px !important
}

It's a bit different than altering the responsive icons - but, does a similar job. You can see these in action on this blog.

Just interact with my share icons to see the change. Enjoy!