Create Your Own Branded Favicon

What are Favicons?

Ever notice that some websites have neat little custom icons next to them in your browser tabs when you load them up?



These icons add an element of unique branding to websites, giving them a professional appearance. 

They're known as favicons.



Favicons are literally "favorite icons" - short for when bookmarks for websites were called "favorites".  They are very small (usually 16 x 16 pixels). In addition to appearing in the address bar, favicons also appear in browser tabs, bookmarks, and the links bar.

How do you Create Favicons?

Traditional favicons are saved in the ICO graphic file format (used for old school Windows icons). Photoshop used to be able to save to this format, but no longer does. Not to worry - just create a 16x16 pixel GIF or PNG and use the icon utility ConvertIcon.



There are even online tools like favicon.cc or the favicon generator to help you create and save them.  



A newer type of icon is the Site Icon, used by WordPress. The Site Icon can be a PNG or GIF up to 512 x 512 pixels. Once uploaded, WordPress automatically creates a favicon, along with many other icon sizes in between for various mobile devices.

Once you have your custom 16x16 favicon in the ICO format (or 512x512 Site Icon), here are some instructions on how to get them working on your site or blog:

Favicons on websites

Favicons can be hand coded into any HTML file with a single line of code in the HEAD section:



However, doing this for every page in a site is tedious and prone to inevitable error. An easy workaround is that most browsers will automatically look for a file called favicon.ico at the root level of your site. If you simply copy your favicon file to your root level, you should be good to go.

Favicons on Blogger blogs

Easy. Go to the Blogger admin page and click on Layout. You'll see on the top left of your layout an area called Favicon where you can upload your ICO file by clicking on "Edit".

Site Icons on Wordpress blogs

Wordpress users have it a little easier - they can use PNG or GIF files that are 512 x 512 pixels. Wordpress will resize as needed. Just go into Appearance / Customize in your Wordpress admin page. Most themes will allow you to customize your "Site Identity" which includes a custom site icon. Just click on "Select Image" and upload your 512 x 512 PNG or GIF image. Wordpress takes care of the rest.



Now that you know what favicons are and how to create them - why don't you make one for your blog?

Embedding Social Content into Your Blog Posts (Part 1 - Tweets)

One of the powerful aspects of social content is that it is portable - that is, it can be easily shared and republished in a variety of ways.  Whether it is an Instagram photo or a Tweet, this content is designed to be shared as a social object.

This series of posts will take a look at commonly shared social objects (Tweets, FB posts, YouTube videos, etc) and how they can be embedded in blogs or websites in their native format. Let's start with Tweets.

Embedding Tweets on Websites and Blogs

Twitter content is perfect for sharing.  Tweets are usually concise thoughts that are short and to the point.  They can quickly summarize a person's point of view, opinion, or outlook without getting too detailed.

You can easily screen-capture a tweet and include it in your blog as an image, but if you want to give readers an easy way to favorite, retweet, or reply to the tweet right from your blog page, you'll want to embed it.

Every tweet has a "More" menu accessible by clicking on the button with the three dots that appears at the end of the tweet.  Go to this menu and select "Embed Tweet".

This will give you a snippet of custom code that can be added to a website or blog.  To get this code, simply copy it from the "Embed this Tweet" dialog box and close it.

To embed this tweet in a Blogger post, simply create a new post (or edit one you've already started), select "HTML" editing mode, and paste the code from Twitter.

You can similarly embed a tweet in another content publishing tool (WordPress, a website, etc) by pasting it into your HTML code.

Here's an embedded tweet to show you how this content appears in a Blogger post:

Is Google Analytics correctly connected to your blog? Are you sure? Three quick ways to check: http://t.co/FkFteF8KlF #unidigadv
— Matthew Wilson (@cecilkleakins) January 28, 2015

Notice how you can reply, favorite, or retweet the content right from this page?  Any links or hashtags are also clickable.  MUCH more functional than a screenshot.

Embedding Tweets in Facebook Posts
This method will NOT work as a way to embed tweets in other social media content.  Here is what happened when I tried to use this embed code in a Facebook post:

Facebook does not allow HTML markup tags within status updates, so the code appeared exactly as it is.  

For more info on embedding Tweets, see this Twitter Help Center article.

Stay tuned for part 2 of my series, where I'll discuss embedding Facebook content in blog posts!

Adding Open Graph Protocol (OGP) tags to your Blogger Blog

The Open Graph Protocol is a relatively new way to turn any web page into a sharable social object by adding tags to identify key attributes for that page when shared on a social network like Facebook.  Before we look at these OGP tags and how to integrate them into your Blogger blog, let's take a look at how website links are shared on social networks.

Sharing Links on Facebook
When you share a URL while creating a Facebook status update, Facebook scans that webpage and automatically generates a preview of that content which includes some useful information in addition to the URL you typed:

• A TITLE for the web page you are sharing
• A brief DESCRIPTION of the content on that page
• An IMAGE from the page

Once you publish your status, these extra bits of information become very important, as they will likely influence whether one of your friends will click on the link.  If the image looks intriguing, or if the copy seems interesting, your shared URL will likely be clicked on.

However, sometimes when you share a link, Facebook's automatically generated image, title, and description are either missing entirely or not very compelling. In the post below, notice that there is no associated image or description - just a title and url.

As digital content publishers who want to make our content as sharable and clickable as possible, this can be a real issue.  Fortunately, Facebook provides a number of sharing best practices that can help.

First Step: Learn about the Open Graph Protocol
Facebook describes several open graph tags that it recommends integrating into your site to help Facebook generate previews.  The main tags which Facebook uses when generating previews are:

• og:title - the title of the page you are sharing
• og:description - a detailed description of the content on the page
• og:url - the URL of the web page
• og:image - the URL of the image you want shown
• og:site_name - the name of the website you are sharing
• og:type - the type of content you are sharing (blog, website, article, etc)

The syntax for an open graph tag is similar to other meta tags used in HTML.  For example, the og:title tag can be written as:

<meta property="og:title" content="Title of your Page">

Open graph tags are placed in the <head> section of your HTML file. For a complete description of each tag, visit the Open Graph Protocol website.

How Facebook "Sees" your Page
To understand how Facebook ingests a webpage to generate a preview, use Facebook's Open Graph Debugger.  This helpful tool will allow you to enter any URL and get a "scrape" of what Facebook finds when it scans the page.  It will alert you when there are issues that need to be addressed. 

 It will also generate a preview to show you how your page will appear if a Facebook user shares it on their timeline.

Time to Fix your Blogger Blog, OG style
In a previous post, I discussed the use of Title and Meta Description tags, which are very important for your blog's SEO.  I also described a method of optimizing how Blogger generates title tags to improve your blog's SEO.  Read these posts before you go any further!

Because Blogger dynamically generates the pages in our blog based on templates, we thankfully do not need to manually add OG tags to every blog page/post.  That would be a major headache!  Fortunately for us, we can update a few lines of HTML code in our blog's template that will automatically update all our pages and posts - including any new pages and posts we create in the future.

What we'll be doing is telling Blogger exactly how to handle the TITLE, META DESCRIPTION, and OG tags on 1. your blog's home page and 2. your blog's various posts and pages.  We will do this by using IF statements. 

Here is the code you will insert into the <HEAD> section of your Blogger template:

<!--START CUSTOM CODE-->

<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:site_name' expr:content='data:blog.title'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<meta property='og:type' content='article'/>

<b:else/>
<title><data:blog.pageTitle/> - PUT ANY ADDITIONAL TITLE COPY HERE</title>
<meta property='og:image' content='PUT YOUR IMAGE URL HERE'/>
<meta property='og:type' content='blog'/>
</b:if>

<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>


<!--END CUSTOM CODE-->

Select this code and COPY it.  Then read on.

Important note: before you start editing your blog's HTML code, you'll want to make sure that you are happy with the template you are using.  Because we're going to customize the code associated with a specific instance of a template, it is important to realize that if you ever change your template for any reason, you will lose the work you're about to do!

Time to Get Geeky: Come Edit Your Template's HTML with Me
Ready? Let's do this. Go to Blogger and click on your blog.  Click on the "Template" button on the left hand menu. 

Click on the "Edit HTML" button and be prepared to feel a surge of geeky neuronic energy course throughout the synapses of your brain.

Take a deep breath.  Repeat to yourself: "It's just a text file.  It's just a text file.  I can handle this!"

Now very carefully find the <title> tag that exists in the code.  Select the title tag code and everything inside it.

Delete it.  Then replace it with the code I gave you earlier in this post.  

Be sure to carefully EDIT the parts of the code marked "PUT ANY ADDITIONAL TITLE COPY HERE" and "PUT YOUR IMAGE URL HERE".

This code creates og:url, og:title, and og:site_name tags that are dynamically generated from Blogger's page url, Blogger's page title, and your blog's title. It then creates og:image and og:type tags (IF the page is a normal post or page).  Otherwise, it creates og:image and og:type tags for your home page which are different.  Finally, it creates an og:description tag that is populated from the meta descriptions that you create for your pages.

Once you are done, click "Preview template".  If you have made any errors or broken any of the code - it should give you an error message and tell you what the issue is.  If your preview looks good, then click "Save Template".

You're Not Done Until You Test Your Pages!
To test your pages, go back to Facebook's Open Graph Debugger and try your pages out. It will give you a preview of how each page will look when shared.

Yeah! That's what I'm talkin' about!

Acknowledgements
I'd like to acknowledge the help of the following two blog posts which helped me greatly in patching together the above code that both improves SEO and adds OG tags to Blogger posts and pages:

Adjust Blogger Title Tags to Improve SEO by Muhammad Faisal
and
How to Add Open Graph Protocol in Blogger Blogs by Muntasir Minhaz

Thanks guys!

Are Blog Posts Read via RSS Feed Readers Tracked by Google Analytics?

A great question came up in class today: If someone reads your blog post through an RSS reader, will their activity be tracked by Google Analytics?

Photo by Robert Scoble

First of all, let's be sure you understand what an RSS feed is and how it is "read" by RSS readers.

This is the icon for an RSS Feed
(design by Stephen Horlander).

An RSS feed is an XML document that contains the raw data contained in your blog posts in a structured format that can be easily read and displayed in other applications.  The default setting on Blogger blog is to allow RSS feeds, so there is nothing special you need to set up.  

You can view the RSS file for the class blog at: http://unidigadv.blogspot.com/feeds/posts/default?alt=rss

Note that this text file contains tags to describe the blog:

<title> The title of the blog
<description> The blog description
<link> The blog URL
<managingEditor> The editor of the blog's content

It also includes each blog post that has been published on your blog enclosed in <item> tags. 

<title> The title of your post
<description> The body text of your post (including HTML tags and links)
<link> The URL of your blog post
<author> The author of the blog's content 

This allows other applications (like Feedly) to download the RSS file and "re-publish" the posts.  But does Google Analytics track the user activity of viewers who are viewing the site via a Feed Reader?  The answer, according to Google, is unfortunately no.

Google's Analytics support page states:

Tracking visits from RSS feeds
In order for Google Analytics to track data, it is necessary that the Google Analytics tracking code gets executed. Since most RSS/atom readers cannot execute JavaScript, Analytics will not count pageviews that are loaded through an RSS reader. Analytics requires that the visitor execute a JavaScript file on Google's servers in order to track that pageview.

Since an RSS feed reader only downloads and displays the contents of the RSS file, and not the actual HTML and JavaScript code of the blog itself, Google Analytics cannot track pageviews of blog posts read in RSS feed readers.

Add a Spotify Playlist to your Blog

I've noticed a lot of students are writing about music this semester. One of the challenges with music writing in the past has been trying to give the reader an idea of what the music sounds like without actually playing the music.

Today, however, you have other options - some of you have been embedding YouTube videos in your blog posts. That works - but can also be distracting.

Here is one way to just share songs and playlists with your blog readers using Spotify.

You can share songs on Spotify (like this awesome Thelonius Monk tune):




Or you can share entire Spotify playlists (Like this playlist of highly recommended jazz tunage):



How do you do it? Follow these steps:

1. Download and Install Spotify. Create an account (the basic account is free - supported by ads which may interrupt your music listening).
2. Search for music that you like and create a playlist that you want to share.
3. Right click [PC] or control click [Mac] on the name of your playlist and select "Publish" if it is not already checked.
4. Right click [PC] or control click [Mac] on the name of your playlist and select "Copy Embed Code".
5. Go to Blogger and create a new post. Go into "HTML" mode and paste the embed code.
6. Preview your blog post. Look OK? Great - Click "Publish"!

CAVEAT: Your reader must have Spotify installed to listen to your playlist.

Easy, huh?  This works for almost any website or blog platform, not just Blogger.  So what are you waiting for? Go try it on your own blog! And for those about to rock, I salute you! 

Setting up Google Analytics to track your Blogger blog

Today I saw a few Tweets by some #unidigadv students who were having trouble with their social media setup.

Trying to finish up my project setup, fun but confusing #unidigadv
— Aaron Willis (@MMA_Marketer) January 29, 2013

#unidigadv Help! Trying to set up google analytics and I have no clue what I am doing.
— Caitlin Hanken (@CaitlinHanken) January 29, 2013

To make life a little easier for you, I just bought an awesome screen recording tool called iShowU, which will allow me to give you a quick tutorial on how to create a Google Analytics account and set it up to start tracking your Blogger blog. 

Hope this helps - I recommend watching in fullscreen mode so you can read the text. Good luck and enjoy!

 

Google Plus Integrates with Blogger

Google has been integrating a lot of its web services (like its photo sharing tool Picasa) into its social network, Google Plus.  Recently it added some Google Plus integration with Blogger.

The catch is that to get it, you have to connect your Blogger blog with your Google Plus profile.  Once you do that, here's what you can do to better integrate Blogger and Google Plus:

1. You can "tag" Google Plus friends in blog posts. 
Easily tag your Google Plus friends in a Blogger post by typing a "+" symbol and then typing their name out.  For example, to tag my UNI colleague +Michael Prophet in this post, I just typed the "+" symbol and start typing his first name:

I then selected his name at the top and a link was created to his Google Plus profile.  Notice as I was typed the word "Michael" it also showed me other Michaels in my circles, as well as Michaels on Google Plus that are not in my circles (so I can link to profiles of those not in my Google Plus circles).

2. Use the Google Plus Followers Gadget

The old school "Google Friend Connect" has been retired by Google (though it still works for the time being).  A better tool for listing followers of your blog is now the Google Plus Followers Gadget.  You'll notice this gadget installed on the right hand side of this page.

3. Notify Google Plus friends when you publish a new blog post

When you publish new blog posts, you now have the option of notifying your Google Plus friends - Blogger automatically adds any Google Plus friends you may have mentioned in your post.

Notice that it also put the name of my blog post and "search description" text in the status update.

4. Blog visitors can "+1" content

This is not a new feature, but there is also a gadget available that allows readers to "+1" a blog or blog post.  This is akin to "liking" a page on Facebook.  You'll see a +1 button also on the right hand side nav bar on this page.

For this class, I've considered using a tool such as WordPress for blogs, but with the great integration with Google Analytics and AdWords, I've stuck with Blogger for the time being.  And though I don't use Google Plus a whole lot, perhaps this will be a reason to start.

Adding Visuals to your Blog

Looking through the class blogs, I've noticed that a lot of posts are text only.

If you want to give your blog some visual spice, you're going to want to add some images.  With the ubiquity of digital cameras, the best approach is to take your own photos.  If you have some design skills, you can use Illustrator or Photoshop to create your own unique graphics.

If you are not able to take your own photos - you may want to add some good looking professional images.  However, it is important to make sure that any image published on your blog is legal.

TentBlogger John Saddington has a very informative blog post called "The Complete Guide to Using Images in your Blog Posts" that you should read in its entirety.  It covers legal issues, royalty-free images, stock photography, finding "free" images, creative commons, and recommendations on image attribution and citation.  

Like this photo taken by Marie-Lan Nguyen, which I got from the Wikimedia Commons: