Posts

Showing posts from May, 2017

Add Whatsapp sharing to the new templates

Blogger's sharing options include Facebook, Twitter, and Pinterest - some of the more popular platforms - but Whatsapp is missing from the list.

This article describes how you can customize the markup of your Blog gadget, to include Whatsapp in the sharing buttons list to include Whatsapp.

Note: Though the concepts in this article are re-usable elsewhere, it is written assuming that you are using one of the new Themes - Contempo, Soho, Emporio or Notable. For Dynamic views, visit the Dynamic views whatsapp instructions.

Head to Theme => Edit HTML, and use the Jump to gadget helper to jump to Blog1.
Update the sharingButtonsMenu includable The sharing buttons for a post are defined in the sharingButtonsMenu includable, which is called as part of the stack from the postShareButtons includable, which can be toggled on and off in the Blog Posts settings (under the 'Share Buttons' byline).

To add Whatsapp in the mix, we want an extra line item (<li>) underneath the <…

Add Facebook comments to my blog

Blogger does not support Facebook comments natively, but they can be installed by adding the required HTML to your blog.

To install a Facebook page plugin, it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog.

Facebook comments rely on the Facebook JS SDK (JavaScript Software Development Kit).

<div id='fb-root'></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
Then, they need fb-comments markup.
Note that, in this gadget, this is done in custom HTML, since we need the canonical URL of the current page. In addition, we want to omit …

Add copy content links to my code snippets

Many blogs are like this one, where they contain a few code snippets that readers might want to copy to their clipboard to re-use somewhere else.

This article describes a custom HTML gadget that will automatically add the material design icon as a copy-to-clipboard link, for any <code> tags in the content.

Note: This gadget assumes that all the code tags have a relatively-positioned container. In this blog, all the <code> tags are nested in <pre> tags, which are relatively positioned.
Material Design font While Blogger's new templates feature a range of the material design icons, they don't offer all of them - the Material icons guide notes that you can massively reduce the size of the SVG by only using the ones you need.
The web-font does weigh in at ~56KB, but you user will benefit from it being cached by any other website they have visited that also uses the font.
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='…

Add a Facebook page plugin to my blog

For many Bloggers, their Blog is a complement to a more extensive online presense, which often includes a facebook page.

To install a Facebook page plugin, it's best to use an HTML gadget, rather than customizing your template. This article provides a simple one-click button for installing the required HTML gadget on your blog.

There are two options for how to install the page plugin below - an iframe, or using the JS SDK (JavaScript Software Development Kit).

To install the gadget:
Click the Add the Facebook page plugin to my blog! buttonSelect the blog to add the plugin toExpand the Edit Template regionReplace [Put your Facebook page url here] with your Facebook page urlHit Add widget
JS SDK First, the Facebook SDK is needed. <div id='fb-root'></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = '//connect.facebook.net/en_US/sdk.js#x…

Offset the HTML anchor to adjust for the sticky header

In the new Blogger templates, they heavily feature a sticky header, or a fixed header, which follows you down the page once you're past the title page.

This header can get in the way when linking to anchors (fragments) in your pages, since the browser will use the anchor's position in the page when it jumps down to the content.

To counter this issue, we can add a little negative-margin, positive padding CSS hack to the :target anchor.
Example header If you click the get link icon (the icon) above, you'll see how it jumps a little above the header.
*:target:before { display: block; content: " "; height: 65px; margin-top: -65px; visibility: hidden; }

To apply this style to your blog, head to:
blogger.com => (Your blog) => Theme => Customize => Advanced => Add CSS
and add it to the text area, and save.


Happy anchoring!

Add custom Google Analytics event tracking

Image
In an earlier post, I covered the correct way of adding Google Analytics to your blog without ending up with a 'custom' template.

With some blogs, there might be user interactions that you want to track. For example, in so-how-do-i.blogspot.com, some articles like parallax for Contempo or AddThis sharing icons have a custom HTML gadget that users can one-click install on their blogs. So, I wanted to track how often that is happening.
Note: Blogger uses 'blogger' as the namespace for their analytics - ensure that you use 'blogger.send', rather than the default 'send' when logging. Custom events in Universal Analytics Blogger's Google Analytics snippet uses the analytics.js Universal Analytics snippet. Their event tracking documentation does a great job of covering the basics for tracking an event on the client.
ga('blogger.send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
The ga function is ava…