Pages

Customize Social Share Icons in Blogger

Standard set of social sharing icons for popular social web sites
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 location of the blogger social share button on Emporio
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:
How to alter the color of social share icons in Blogger
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.

Updated V2 template social sharing buttons
Just interact with my share icons to see the change. Enjoy!

8 comments:

  1. Hi Don,
    Thanks for your blog. Changing the icons is one thing, but adding another icon and share link is something entirely different, as I am currently finding out. Could you possibly share a blog on that? I am using the Notable theme.
    Thanks in advance!
    Best regards, Cor

    ReplyDelete
  2. Nice, thank you very much.but how to add the svg icon to another wiget like a footer? I'm dizzy, can you give me an example of the html code?

    ReplyDelete
  3. hello. just want to ask. why my share button cannot fuction? it show but cannot click. I can't share my post on social media. any solusion? thanks anyway sir. :)

    ReplyDelete
    Replies
    1. I can't tell you unless you share the link to your page. Sorry!

      Delete
    2. One thought - are your cookies blocked? Try another browser to see.

      Delete
    3. Hi same problem here. It shows but won't work.
      My website is at www.doveranalyst.com

      Google plus is redundant. So, how can we add other icons there instead?

      Delete
  4. Thank you for this post! It's quite useful. Is there a way to get rid of the responsive "Share" icon and get the social media icons to display directly on your posts?

    ReplyDelete

NOTE: If you are logged into a Google account and you cannot see your Google profile image and name next to the 'Comment as:' in the comment editor, your 3rd party cookies are blocked and the comment won't post. If blocked, please comment preferably by Name/URL.