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 - There seems to be a significant amount of variation and change in Google, HTML5 and cross-browser components working with each other. Please keep coming back to this page for more info.

Option 1 - Embedding a Google Gadget in Blogger

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.

As you can see I've added the script for niftyPlayer - there are formatting options within the script parameters. You can set the background color, the border. To do that just set these values -

up_wmode=opaque
up_bgcolor=%23RRGGBB (where RRGGBB is your background color)
To turn off the border set border=%23ffffff%7C0px%2C0px+....

Once you've set the parameters, place this code in your post as HTML where you want it:

<div>
<script src="//www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/101762205312958577209/nplayer17_0.xml&up_file=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3?attredirects%3D0&up_wmode=transparent&up_bgcolor=%23ffffff&up_as=0&synd=open&w=365&h=37&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</div>

This seems to work in all browsers (IE, Firefox, Chrome). NOTE: this does not work on iOS devices such as iPhones and iPads due to not having Flash. I would suggest offering two players if you need iOS. Hopefully, your security settings should allow this to be visible here:

Option 2 - Using an IFrame of a Google Site Widget

With Google Sites users were allowed to create widgets for various functions. Fortunately, an industrious person developed this iframe plug-in. This is one of the few options that works better with browser security because the frame is a window within a window - find and insert the Dewplayer on your Sites page, then copy and past the code from your Google Sites page to your Blogger page (seems to work in all browsers that support Flash - again, no support for Apple devices with iOS):

<iframe title="Dewplayer Flash Reader Play a MP3 File. Simple version" width="230" height="30" scrolling="no" frameborder="0" id="958235194" name="958235194" allowtransparency="true" class="igm" src="//lebieajorgsoma1tjb9gqldu4ngb3234-a-sites-opensocial.googleusercontent.com/gadgets/ifr?url=https://googledrive.com/host/0B4yfJJJSNrfubzJEUkxIYm1PcHM/dewplayer.xml&container=enterprise&view=default&lang=en&country=ALL&sanitize=0&v=558cf4fc6b61d019&up_CCOL=%23d1dae3&up_START=No&up_MP3=http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3&up_LOOP=No&libs=core:flash&mid=141&parent=https://sites.google.com/a/bloggertipspro.com/media/home#st=e%3DAIHE3cAiWoy4d7IhHEfvRZwjlcKQV5pwEXh0KyP5rC%252FmQISxcVPCcsfmQs2BN%252BGECw0pVEqCkjNuqwBXovF%252FCL05RgFIvlIZM%252FW4%252FQdQQPI4%252BRLeXlK8p8GXCNJIZHfzrYVLv0XiOL8e%26c%3Denterprise&rpctoken=2892288207985648625"></iframe>

Option 3 - Wait for HTML5 Compatible Browsers (note: works in Blogspot domains but not in custom domains)

HTML5 was developed with multimedia in mind. All of the newer browsers have the new <audio> tag that will allow you to play media without a Flash player. However, this is still cross-domain scripting which will be blocked for custom domain names on some operating systems or devices (for example, I cannot get this player to work on the iPad for my custom domain bloggertipspro.com - but, in my test blog templatedebug.blogspot.com it works fine on everything.

Nevertheless, if you are using Blogger blogs with the standard [blogname].blogspot.com the HTML5 player works great on all devices including iPhones and iPads if you followed my instructions in Parts 1 and 2:

<audio controls="" src="http://sites.google.com/a/bloggertipspro.com/mediafiles/mp3/Future%20Gladiator.mp3">
Your browser does not support this audio
</audio>

Posted By my pwiki7:42 PM

0

Continue Reading

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:

Next, you'll see the standard warning to see if you wish to continue:

Go ahead and press the 'Proceed' button. The key for the next step is to search for this specific string:

<b:includable id='threaded_comment_js' var='post'>

This Blogger template includable is located just after the template code that has the standard buttons for social sharing you see at the bottom of each post. Here is the visual view of the searched line:

What you need to do is copy and paste the following code just before the search line and the </b:includeable> statement above:

This code fix/change was updated Dec 2012:

<br />
<div class='sharebutton'><a href='javascript:void((function(){var%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)})());'><img alt='Pin It!' height='21' src='http://assets.pinterest.com/images/PinExt.png' width='43'/> </a>
</div>

Here is a visual of what the pasted code looks like:

Be sure to do a 'Preview' first to make sure there were no copy-paste errors. I modified the sizings so it will appear right next to the standard buttons on the left side.  'Save' your template as usual.

That's it! Here is the result:

If you read this article earlier you probably saw that I had the Pinterest button aligned with the Blogger buttons. However, Internet Explorer was giving me fits so I moved it down underneath which works better for both browsers.

You can play with the size and position values or move the button by pasting the code before the standard buttons if you want or even at the top of the Post. Again, I expect Google to add this button in the near future but, for now, use this simple template code. Enjoy!!

Posted By my pwiki1:03 PM

0

Continue Reading

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."

Posted By my pwiki7:41 PM

0

Continue Reading