March 26, 2014

How to Use the Official Pin It Hover Buttons on Blogger - Updated 2014

Pin It Buttons for Blogger

Pinterest's official hovering "Pin It" buttons have improved in 2014 — there are more button options, and they load faster than ever. And, in the year since I wrote my original tutorial, I've come up with a few new code snippets to help you control where the buttons appear on Blogger blogs. Since there's so much new stuff to tell you, it's time for a brand new tutorial. Let's get started!

What You'll Learn

This tutorial will show you how to add the official hovering Pin It buttons to your Blogger blog. The buttons will show up in the upper left corner of your post images when your readers hover over the images.

Compatibility

These buttons work on all Blogger templates except Dynamic Views, which doesn't accept customization. The buttons appear on images with a minimum width of 200px and a minimum height of 100px. Smaller images are skipped.

Get the Code

To get your own button code, go to the Pinterest Widget Builder (opens in a new window).

Make sure that the "Button Type" option is set to "Image Hover", then choose your favorite button style.

You get a choice of small or large rectangular buttons in gray, white, or red, or small or large round buttons in red. You can preview each button style to choose the right one for your blog.

Once you've chosen your button style, copy the code in the grey box below the preview image to your clipboard.

Back Up Your Template

From your Blogger dashboard, go to "Template" and click the "Backup/Restore" button in the top right corner. Save the .xml file somewhere safe.

Find the </body> Tag

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

When your template is open, hover your cursor over the code, click once, and press CTRL and F at the same time (PC) or Command and F (Mac). This will open a search box in your template.

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Add the Code

Immediately above the </body> tag, enter the code you got from Pinterest.

Before you save your template, remove the word "async" from the code. This is important, your template will not save unless you remove the word "async".

Press the orange "Save Template" button up top to save your template. Then, go look at your blog. You should see the Pin It buttons you chose in the upper left corner of your images when you hover your cursor over each image. Nice, right?

For most blogs, that's all you need to do. Enjoy your buttons!

Advanced Options: Removing Unwanted Buttons

If you have buttons showing up where you don't want them to be, don't worry; you have options!

Remove the Button From Specific Post Images

If you want to take the Pin It button off of an image or two in a post or on a static page, you can use the "nopin" attribute. To "nopin" an image, switch over to the HTML view of your post or page, and find the img src HTML markup for the image you'd like to "nopin". It will look something like this:

HTML view of an image in Blogger

Enter nopin="nopin" right before the closing slash and angle bracket of your image element, like this:

When you save your post, the Pin It button will disappear from that image.

Remove the Buttons from a Group of Post Images

Sometimes you'll want to remove the Pin It button from a large group of images in a post or static page. After an initial setup, this method will let you "nopin" larger groups of images quickly.

First, back up your template! Then, open your template code by going to Template > Edit HTML. Find the </body> tag again, and enter the following bit of JavaScript directly above the </body> tag.


<script type="text/javascript">
var nopinimg = document.querySelectorAll('.nopin img');
 for(var i = 0; i < nopinimg.length; i++) {
   nopinimg[i].setAttribute('nopin', 'nopin');
 }
</script>

Save your template. Nothing will change yet; this code is the foundation for the next bit of code you'll use.

Now, switch to the HTML editor of the post with the group of images, and find the code for the first photo in the group. It will look something like this:

Add this line immediately above that first image:


<div class="nopin">

Then, find the last image in the group. Its code will look very similar to the code for the first image. Immediately below the last image, enter this closing div tag:


</div>

Save your post, and the Pin It buttons will disappear from all of the images you wrapped in the div. The next time you want to "nopin" a bunch of images, just wrap them in the div; there's no need to re-install the JavaScript part of this code.

There's a shortcut if you want to remove the button from all of the images in a single post — just add the first div tag above the first line of your post, and the closing div tag below the last line of your post. All of the images inside that div will lose their buttons.

Remove the Pin It Button from the Header

If the Pin It button appears on your header and you'd like to remove it, you can do it with a little snippet of code!

First, back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the tag, after your Pin It button code:


<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Save your template, and the Pin It button will disappear form your header.

Remove the Pin It Button from Sidebar Images

The Pin It button may appear on your sidebar images, too. If you'd prefer that it didn't, you can add the "nopin" attribute! There are two ways to do that, and the how-to depends on how you added the images to your blog.

HTML/JavaScript Gadget Images

For images in an HTML/JavaScript gadget, open your gadget and find the <img> element(s) in your gadget. Add nopin="nopin" right before the closing slash and angle bracket of your image element(s), like this:

Image Gadget Images

If you added your images through the Image gadget, you can add the nopin attribute through the template editor. It's a little trickier than the other methods in this post — if you're not familiar with the template editor, I recommend reading How to Use the New Blogger Template Editor first to get comfortable with how it works.

Before you edit your template, be sure to make a backup.

To find your image in your template, you'll need the widget ID for your image. To get it, go to your blog and hover your cursor over the wrench icon at the bottom of your image gadget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL. The widget ID will say "widgetID=ImageX", where X is the image ID number.

Once you have your template backed up and know your widget ID number, go to Template > Edit HTML and select your image by its widget ID from the "Jump to Widget" menu.

The template will jump to your image widget. Expand your widget's code by clicking the small black arrows at the left of the template editor, until the code is completely expanded.

Find this segment of the code:


<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>

Add nopin='nopin' immediately after 'data:width' in both places it appears in the code. When you're finished, the code should look like this:


<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
      </b:if>

Preview your template to make sure everything still looks the same before saving. If you get an error message or anything looks weird, press the "Revert Changes" button and start over. If everything looks good, press "Save" to apply your changes. When you go back to your published page, the sidebar pin it button will be gone!

Show Off Your Buttons!

Once you're done with this tutorial, I'd love to see your buttons! Leave a comment with a link to your blog, Tweet at me on Twitter, or comment on this tutorial's post on Google+.

February 24, 2014

Make Your Blog More Mobile-Friendly Without Redesigning

The mobile web is huge, and it's going to get bigger as people all over the world fall in love with smartphones. Now that so many people are browsing on small screens with data plans, a mobile-friendly blog helps you welcome a larger audience.

Lots of blogs are switching over to responsive or adaptive designs that scale and rearrange themselves depending on the size or type of the screen. But, redesign can be costly and time consuming. And, if you have fixed-placement arrangements with advertisers, you may feel like you're trapped in your current layout.

That doesn't mean there's nothing you can do to make your mobile readers happier!

If a full redesign isn't in the cards for you right now, there are adjustments you can make — ranging from tiny tweaks to more ambitious changes — that let you show your mobile readers some love without starting over from scratch. Today I'll give you some suggestions.

Reduce the Per-Page Post Count

This is by far the easiest tweak I'm going to cover today — it might only take you a few seconds!

Showing fewer posts per page reduces the load time & size of your home page and the index pages (the ones your readers reach using older & newer post links).

If you're on Blogger, you can adjust your posts-per-page under Settings > Posts and Comments > Posts > "Show at most".

On Wordpress, the setting is under Settings > Reading > "Blog pages show at most".

Say No to Popups

Real talk: people hate popup windows and popup overlays, and they hate them even more on mobile devices. Popups block the content, they're hard to dismiss on small screens, and they can slow down the load time. And I mean, come on — they're popups. They're annoying by design.

Please, think of your dear mobile reader: so excited to read your post, getting blocked from your content by a popup... and sadly closing the tab. With that reader in mind, go get rid of your popups.

Drop the Dropdowns

Or at the very least, test your dropdown menu(s) on mobile devices to see if they actually work. Unless your dropdown navigation was designed with mobile users in mind, it most likely relies on hover/mouseover events to create dropdown link lists. Those effects don't work the same on touchscreens as they do with a mouse.

Many dropdown menu styles that work smoothly on a computer frustrate touchscreen users with awkwardly-timed hover states and disappearing, unclickable links.

If your dropdown menu isn't compatible with mobile devices, consider streamlining your navigation to reduce or eliminate the need for dropdowns. A simple navigation layout is great for readers on any device, not just mobile users.

And, as an added side-benefit, simplified navigation can make it easier for search engines to crawl your blog. Give it some thought!

Limit Widgets & Gadgets

Widgets and gadgets, especially social media embeds and ads, can seriously bloat your blog and make it harder to load on mobile browsers. While you're getting mobile-friendly, take some time to reevaluate your widgets. Are they all earning their place on your blog?

Don't be afraid to experiment with removing widgets — you can always add them back! If you need help figuring out which widgets should get the boot, try out Pingdom's Website Speed Test. You can arrange the Pingdom results to show you which elements are taking the longest to load or have the largest filesize.

Enable an Alternate Mobile Template

You can "fake" a responsive design with an alternate template that only shows itself to readers on handheld devices. These templates let you leave your blog "as is" for computer screens, while radically optimizing the experience for mobile users. Mobile-only templates strip your blog down to its essence, hiding sidebars and most of the design elements. That means some or all of your sidebar ads will be hidden from mobile users.

Blogger has a built-in mobile template, and there are lots of plugin options for Wordpress — I'll show you my favorite!

Blogger's Mobile Template

Blogger's mobile template automatically sets mobile posts-per-page to 4. It also truncates all of your posts to the title, a thumbnail of the first image, and the first few sentences of your posts. If you use AdSense on your blog, up to two AdSense ads will appear — one at the top of your page and one at the bottom. Any other ads that show up in your regular design will not.

Blogger's mobile template is turned on by default, but if you've turned it off, it's easy to turn it back on. Go to Template and click the gear icon below the Mobile template. Set the radio button to "Yes. Show mobile template on mobile devices", then press the orange Save button.

Wordpress Mobile Plugins

For Wordpress users, I recommend WPTouch, a very slick mobile plugin with lots of customization options and features. And, like the Blogger mobile template, it supports AdSense! There's also a premium version with lots of sweet features. Complete installation instructions are available on the plugin page.

If WPTouch doesn't strike your fancy, there are plenty of other options available. WPMU has a great rundown of 8 excellent mobile plugin options.

Let's Talk!

Have any questions or suggestions on getting mobile-friendly? Leave a comment, get in touch on Twitter, or say hi on Google+!