Add MP3 Files to Blogger - Part 3 - Embedding Audio Players

Brandon Zierer (Creative Commons)

In Part 1 and Part 2 of Adding MP3 Files to Blogger we walked through creating a free storage location for the MP3 files and uploading them to be visible publicly. The next step is finding the right embedded player to best work with Blogger.

One thing you need to be concerned with is cross-domain scripting security with this configuration. Since Blogger is attempting to call the MP3 files on a Google Sites domain you'll find that many companies or browser defaults will not allow this configuration. For example, this domain is bloggertipspro.com and the MP3 sample is located at sites.google.com (or google.com). Many security configurations don't like this since external domains can be untrusted from the original domain.

Until Google allows files uploaded directly to Blogger you'll have to live with this limitation. In these examples you may or may not see or hear the audio samples depending on where you are accessing this web page.

NOTE: Dec 2014 and Nov 2018 - There seems to be a significant amount of variation and change in Google, HTML5 and cross-browser components working with each other. Please use only Options 3 or 4 now -- it is the only viable way using HTML5.

Option 1 - Embedding a Google Gadget in Blogger - Deprecated

I did some searching online and found the following Google gadget player called niftyPlayer. The key to using niftyPlayer is to link to the gadget site and then to your same Google Sites MP3 gmodules page as you did with your files in Part 2.

Add Pinterest Button to Blogger Posts

Nov/Dec - 2012: The Pinterest button is acting up again. If you have trouble there is a code fix now within this post - you might find some issues since the Pinterest code doesn't work well.
As you probably know, Pinterest is sweeping the world right now as yet another social networking site. It's novel approach allowing users to share interests by 'pinning' images onto grouped boards seems to have captured people's attention.

You may have noticed that I've added the Pinterest button to my posts. For this site, Pinterest probably doesn't apply very well since it is focused on 'how to' content rather than more design, or image-centric activities (feel free to Pin-it anyway, if you'd like!). But, if your site is focused on hobbies, travel, photography, design, etc., then Pinterest is the social site you should be connecting to.

Adding a Pinterest button to your Blogger posts is relatively simple - however, it is a direct template customization that could cause you some issues. As always be sure to backup your template before making these changes (check out my post if you don't remember how - How to Backup Your Blogger Template).

Oddly, the Pinterest Goodies section that allows you to create buttons is very static for sites. They have you enter your site and image URLs directly to make a button. This might be fine for a static page or site, but as bloggers we want each post to be linkable to Pinterest.

Fortunately, some creative souls out there were able to modify the Pinterest scripts in a way that allows the buttons to be connected to each post. In this example I wanted the button to fit with the standard, out-of-the-box Blogger social media buttons at the bottom of each post. (My guess is that Google will add a Pinterest button within a year or two so this tutorial will just be a bridge for now.)

Adding the Pinterest Pin it Button to Your Posts

The first step is to jump to the Blogger Main Menu for your blog and choose the 'Template' and 'Edit HTML' option:

Blogger Static Home Page - Google Search Results

I thought I would add a quick update on how Google indexed my Blogger static home page. One of my main concerns was that Google might not like the Blogger page redirect in the search results. Frankly, it was difficult to tell just what kind of redirect Google was using.

First, take a look at the search results. This static home page blog is already indexed by Google and looks to have been successfully indexed:

Note that the URL does not show the final redirected URL of http://statichomepage.blogspot.com/p/home-page.html - which is a good thing.

Now, taking a look at the actual page HTTP response you can see that Google does a 302 temporary page redirect for the static home page:

From what I could see on the Google help pages and forums, this looks good for Blogger static home pages. Take a look at this response from a Google representative on 302 redirect behavior.

To quote the representative from Google, "Generally speaking, with a 302 redirect we'd try to take the content of the redirect target (in your case PAGE-B) and index it under the redirecting URL (in your case PAGE-A). If the target has a noindex meta tag, then it's likely that we'd apply that to the redirecting URL as well."