How To: Refresh Title, Image and Description of existing Bitly Link

While most of us use Bitly for casual URL shortening, some of those who have taken that extra step signed up accounts to take advantage of the more robust features Bitly offers have to deal with a rather annoying little issue where when adding in a URL that was previously submitted pulls in the title, description copy and thumbnail image from the previously used URL instance. Along with title, description and image come the click counts.

One example of this would be if you had a promotional landing page that maintained a single URL over time. If you made a change to the page or used different copy, but shortened that URL again, in the Bitly dashboard, you would have no context to this change or whether the new version performed better without having to deal with a bit of manual oversight and tracking yourself, what a pain.

Fortunately, there’s a super easy workaround to allow Bitly to treat the same URL as individual links in the Bitly dashboard. Simply add an unused query string to the URL and it will treat it as a separate URL, tracking it individually. So take the url http://www.example.com and turn it into http://www.example.com/?bitlybreaker=1 and it will reparse that page and create an explicit entry for this URL (bitlybreaker and the 1 are arbitrary, just use entries that aren’t already being used elsewhere as a hook, that could cause issues, lol).

If you’d like to A/B test verbiage being used to promote a link, you can use multiple query strings to split them up, http://www.example.com/?bitlybreaker=A for one link, http://www.example.com/?bitlybreaker=B for the next and so on. Each link will track the clicks explicitly and you will have a good understanding as to which copy used led to more traffic, and you can plan future campaign promotional copy using this information.

Wow, looks like bitly just got a whole lot more useful! If you have any questions or additional information regarding bitly links, please post them in the comments and let’s discuss!

How To: Enable the AddThis Pinterest 16×16 Icon

Scenario: You’re using AddThis as your site’s sharing tool with the 16×16 icons and you’d like to add Pinterest as one of your displayed sharing icons. You head to the site, click “Grab the Code” and make the selection to use the 16×16 layout.

“Hooray!”, you think, “I see the Pinterest Icon right there, they must support it now!”. Well, sorta. If you look up in the Preview pane, the Pinterest icon turns out to be the printer there.

Well, that’s not so bad to have but you’d really like to have the Pinterest icon, it’s there in the Style option but not in the Preview “preview” , what the heck?

The AddThis API documentation shows how to explicitly state which icon to use with the following code…

<div class="addthis_toolbox" addthis:url="http://example.com/blog/post/2009/05/01" addthis:title="Hooray!">
<a class="addthis_button_compact">Share</a>
<a class="addthis_button_email"></a>
<a class="addthis_button_facebook"></a>
<a class="addthis_button_buzz"></a>
</div>

It seems that adding the icon would be as simple as following the naming convention and include a link with the “addthis_button_pinterest” class and call it a day. While this does display a pinterest icon, it’s not the 16×16 version. It’s actually the Pinterest icon from the first Style option, an option that makes any front-end developer worth their salt cringe in disgust.

Luckily, there’s a workaround.

Workaround: Grab the code from AddThis and slap it where you want it. Only, to get the 16×16 icon, throw in this link and it will add in the 16×16 Pinterest icon. Make sure to include the title attribute, the script won’t update this link’s title properly so it’s a must, and might be a inkling as to why this isn’t fully supported by AddThis yet.

<a class="addthis_button_pinterest_share" title="Send to Pinterest"></a>

Below is a full example of the working code. So if you’re lazy, no need to hop over to AddThis to get going!

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_pinterest_share" title="Send to Pinterest"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4ff009402e9515ba"></script>
<!-- AddThis Button END -->

How To: Clean Up Chrome and Safari’s Webfont Rendering

We’re well into the era of CSS3 and front-end developers everywhere are now making use of a whole new set of tools to create truly uniquely branded web site designs. This often involves heading over to Google Webfonts and choosing a font that fits into your site’s style guidelines. After you load up the font, you check how it looks and you notice Firefox, Opera and Internet Explorer are all rendering clean, but then you fire up webkit-based browsers Safari and Chrome and your new font looks down right awful.

The fact of the matter is, the font is being displayed without any sort of anti-aliasing applied. Just about every instance of text on a screen has some degree of anti-aliasing being applied to it so seeing your text displayed like this can be quite jarring.

The degree to which the text renders poorly varies from font to font and the larger the font-size, the better it will render. You can mitigate the effect to some degree by considering size and face but when you need to conform to specific guidelines, you don’t have much room to work with. That’s where some simple hacks can work wonders.

The OSX-Only Fix

As you know, not all users are on the same operating system. To immediately fix the issue for users on Mac OSX,  you can instantiate the webkit specific anti-aliasing function available on OSX systems. To do this, add the following to the beginning of your site’s global stylesheet.

html {
-webkit-font-smoothing: antialiased;
}

For the rest of the world living on Windows and Linux, we will need to get a bit more creative as there is no equivalent function available for non-OSX machines. But fear not! There are a few hacks we can use to kick webkit into gear.

Note: -webkit-font-smoothing also supports sub-pixel anti-aliasing but this will break when employing the Win/Lin fixes so it’s best to just keep’r in “antialiased”.

The -Webkit-Text-Shadow Hack

To get non-OSX machines to play nice, we need to invoke anti-aliasing indirectly by using CSS3 style treatments on our target text. The first fix is based on the text-shadow property. Simply add the following snippet to class where you call your webfont and it should work. It basically adds an imperceptibly faint flat shadow that forces the text to render using anti-aliasing. Using flat shadow with 0px horizontal and vertical, it essentially creates an even 1px “glow” around the text and essentially re-renders the original non-anti-aliased text through the instantiation of the “barely there” flat text-shadow.

-webkit-text-shadow: rgba(255,255,255,0.01) 0 0 1px;

For added imperceptibility, change the RGB of the RGBA-based color reference to the RGB of your background. Lastly, keep it with the -webkit- browser prefix attached so non-webkit-based browsers who already render text correctly don’t get the treatment and start acting funky.

If this doesn’t hack work for you, you can move on to the -webkit-text-stroke hack.

The -Webkit-Text-Stroke Hack

Between this and the -webkit-text-shadow hack above, I usually just reach for this guy when I need to render text correctly in Chrome and Safari on Windows and Linux Machines. It acts in the vary same manner as the hack above but seems to be standing the test of time a bit better and will work on more users’ systems as a result.

The -webkit-text-stroke hack will apply another “barely there glow”, only this time as a stroke instead of a flat shadow. Use the following snippet to instantiate the -webkit-text-stroke hack.

-webkit-text-stroke: rgba(255,255,255,0.01) 0.1px;

Again, keep the -webkit prefix to only have webkit users apply the extra snippet. Also, keep the stroke tight and try to match it with your background color’s RGB. You can also get the same result by ONLY defining the stroke width, avoiding the need to call in and match colors entirely.

-webkit-text-stroke-width: 0.1px;

With both of these, you can tweak and customize to your own situation as some font-faces may render better with different property settings.

Use Wisely

For these last two hacks, each character re-rendered will require extra resources so it’s best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use ‘serif’ or ‘sans-serif’ and let the browser decide.

How To: Always Keep Your Copyright Statement Up To Date

We’ve all seen them, copyright statements in the footer with a date that’s half a decade old. It makes you think, if this is so out of date, I wonder how they take care of the rest of their business. Even a copyright that’s just a few years old is enough to make me think about things, and any reason for a customer to jump-ship, however small, is lost business.

A quick way to make sure your copyright statement is current is to pull the information from the server’s clock. Unless your server’s date is off, which is highly unlikely, you can set up a simple bit of PHP to tap into that clock and make sure you’re always displaying the current year.

<?php echo date('Y'); ?>

Example Usage:

<div id="copyright-statement">Copyright <?php echo date('Y'); ?> ACME Widgets, All Rights Reserved.</div>

Just pop that into any PHP-based page or footer template, add the standard HTML-based copyright copy and you’re set, you can forget about it for another half-decade!

How To: Beat Facebook’s Shared Link Cache with TinyUrl

Facebook Caches Everything

You have a great post you’ve written and you’d like to share it on your facebook wall. You share the URL but notice that the image wasn’t coming in or the title or description copy wasn’t what you’d like. You head back over to your post, make the appropriate changes, and head back to repost, but you come to find that the old image/copy/title are all still there!

Facebook is a giant and to keep up with all of its demands on its resources, they have a ton of caching going on. Even the images you uploaded are immediately optimized (and made to look pretty crummy) in order to squeeze out every ounce of efficiency. The same goes for shared links. As soon as it enters the Facebook ecosystem, that URL has it’s goodies cached up and there’s no way to break it free and refresh the URL.

URL Shortening Provides Some Help

Because the cached data as tied to a URL as it’s a guaranteed unique identifier, the trick is to provide Facebook with another URL that will pull in the new data. URL shortening services can get you this code. Everyone’s used them before, Bitly, TinyUrl, etc. They provide shortened URLs that forward the user to the actual URL you’d like the user to be taken to. Add in you’re URL that’s been cached by Facebook, grab the new URL, post that one and you’re golden.

But hold the phone! You accidentally made ANOTHER mistake and need to re-refresh the page’s information on Facebook. You head back over to your favorite URL shortener and re-enter the URL only to find out that it kicks back the same shortened URL. Uh oh, this is a problem. Facebook has already cached that URL, so it looks like you’re up a creek. Or are you? A quick workaround, head on over to your second favorite URL shortener and get it again, and hopefully you made sure there wasn’t any issues and it’s going to work out this time.

But, again, you’ve made a mistake and need to get yet another version over to Facebook and you’ve exhausted all of the URL shorteners, what are you to do?

TinyUrl to the Rescue

TinyUrl (http://tinyurl.com) provides users with not only a standard means of shortening a URL with it providing a generated url string. TinyUrl also offers a custom URL feature that you can pick which string you’d like to add. This is the magic feature. You can literally re-enter a new custom string and it will kick back a URL you can pass to Facebook without fear of it being used and cached previously.

No longer will you need to worry about whether your post is perfect before sending it out to Facebook, and if you have a planned change to the page, you can use this method to ensure the campaign is executable.

Do you have another method of getting around that annoying Facebook cache? Or maybe you know of a URL shortener that will do this even better? Let us know by commenting below!