Blogger users is the lack of storage available for
file types other than images and videos when
attempting to expand your blog. I don't know how
many times I've seen users asking for upload
storage for PowerPoint slides, PDF files, databases,
etc. Probably the single most popular request is
"how can I upload a MP3 file to Blogger and
embed it in a flash player?" without some odd
widget or custom call-out. The reason why the
MP3 request is called out so often is mainly due to
the desire to have either music or podcasts
directly embedded in your posts.
What many Blogger users don't realize is that by
registering as a Google user, you have many of
their tools at your disposal including the not so
obvious ability to utilize free Google storage (which
translates directly to the ability to upload MP3 files
Now, uploading a MP3 file to Blogger is not a
direct upload through the Blogger interface but is
very easy with just a few steps to get you there
quickly. So, let's get started!!
So, just what is a Google Site? Sites is a
free website building tool that Google
picked up as an acquisition some years
back. It is not overly popular but does
have some interesting capabilities. You
can use it as a standalone tools to build
full, mostly static websites without any
hosting fees. In our case we're only using
it as a background placeholder.
The first thing you're going to want to
look for is the Google Sites menu item. It
is a bit hidden under the More menu
selection as shown here:
Simply go ahead and choose ' Sites' to get
started. You're really not going to use the
site builder to build a full website at this
point (though you could if wanted), just
utilizing some of the storage functionality
that Google provides with this tool.
Select the menu button ' CREATE' to make
a background site for your Blogger blog:
This will lead you to the next page that
will allow you to name your site and
associated themes if you want. The key at
this point is to just use the default ' Blank
Template' that is preselected. I like to use
the name ' media ' or ' mediafiles' if my goal
is to have Blogger use MP3 music or
podcasts:
Go ahead and press ' CREATE ' to have Sites
kick off the website build. In a second or
two you should see something like this
which is the left pane of the newly
created website:
You now have the website shell ready to
land your MP3 files. But, the default pages
are only static ones at this point without
any ability to upload or store files. For the
last phase of this Part 1 you need to
create a certain type of webpage called a
' File Cabinet'.
The next step is adding a web page to
your site. Go up to the far right menu
item in Sites and select the ' New page (c) '
icon button:
You'll be prompted with a page setup
dialog that will need to ' Name your page: '
and set the page type like so - be sure to
use the numbered order to setup the page
correctly. I prefer to create a File Cabinet
page called mp3 to set the file types. You
can call it whatever makes sense to you:
Go ahead and press ' CREATE ' to build the
new webpage. Your site should return
looking something like this:
You've now created the needed shell to
get your MP3 files to some free storage
from Blogger. Before you start working
with this site, however, you need to
follow one last step - setting the visibility
of the webpages to be Public.
In this upper right menu choose the
'More' dropdown button to select the
'Sharing and Permissions' option:
Once you've selected it, you'll be in
the Manage Site section. You'll want to
select the visibility permission to allow
these pages to be fully ' Public on the web '
like so:
Done!! You're now ready to start using
Google Sites for your Blogger MP3 files!
If you've left your Google Site since the
last tutorial, go back and log into Sites
again. You should see the default Sites
screen with the new 'mediafiles' site
ready from Part 1:
Go ahead the click on the 'mediafiles' site
to get to the pages within--you will open
a new window defaulting to the Home
page like so:
Your custom file uploading page (called
mp3 here) is ready for your files. Go
ahead and select the mp3 page title in the
left menu above to get the to files page
where you can start the uploads. The
small ' Add files ' button is located near the
middle of the page as circled below. This
is where you can select the files you want
to upload:
When you select the files you should see
the upload dialog box:
Continue repeating this step to upload all
of the files you need. Take care, however.
Google does have a storage limit on Sites
of only 100MB per site andonly 20MB per
file. So, if you're uploading music, that
limits you to about 25 songs. For podcasts
take care to reduce your audio bit rate to
get more efficiency in storage. I'm sure
you could create more sites to raise that
limit but I haven't tried it personally.
Here's what your mp3 site page should
look like now:
The mp3 file I added was from a Royalty
Free music website. However, in order to
use the file I have to give the artist create
like this:
Future Gladiator Kevin MacLeod
(incompetech.com) Licensed under Creative
Commons "Attribution 3.0" http://
creativecommons.org/licenses/by/3.0/
Since the Google Sites page is public, you
might want to consider what type of
license is needed for the mp3 files you are
uploading. Be sure to give the artist or
podcast credit both on your Blogger site as
well as your Google site if required by the
license. I added the very same credit in
the comments of the Google site too.
The final step in this entire process is to
find an audio player that you can utilize
to actually stream the MP3 data to your
users. Typically this is done using an
Adobe Flash/Shockwave player. The
player just needs to be embedded as code
in an HTML widget or directly in a
Blogger blog post.
Fixed as of Sept 2012 - At one time Google
provided a Flash audio player directly
from their Google Reader site. As of June
2012 - this was removed much to the
dismay of many bloggers. They may or
may not add this back. I'm going to leave
this section within this post for now in case
Google decides to add their player back.
The best guess out there right now is that
Google is migrating much of their Reader
functionality to Google Play - their new
multi-media site.
Luck has it that Google has just the code
you need! As part of the Google Reader
application, there is a player widget you
can reference directly from other Google
tools. Important note, however: I haven't
found any specific wording that Google
sanctions this from Blogger. But, many
people do it and I doubt that Google
would pull the plug on the widget for its
use in Reader.
Given that, here is the widget code you
need to copy and paste:
<embed
flashvars="audioUrl= your-google-sites-
link-here "
height="27"
pluginspage="http://www.macromedia.com/
go/getflashplayer"
quality="best"
src="http://www.google.com/reader/
ui/3523697345-audio-player.swf"
type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>
Note that the part that says ' your-google-
sites-link-here ' needs to be the full URL of
your Google Site MP3 file. The easiest way
to get to this is to right-click on the small,
down-arrow located next to the file on
the far bottom right of your file page:
Once you right-click on it, you should see
a menu item that says ' Copy Link Location '.
Go ahead and choose that to paste into
your copied code above like so:
<embed
flashvars="audioUrl= http://
sites.google.com/a/bloggertipspro.com/
mediafiles/mp3/Future%20Gladiator.mp3 "
height="27"
pluginspage="http://www.macromedia.com/
go/getflashplayer"
quality="best"
src="http://www.google.com/reader/
ui/3523697345-audio-player.swf"
type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>
If you take a close look at my URL you'll
see that I removed the 's' from the https in
the link. Google Sites uses a secure http
connection by default. However, since we
made the page public you can alter the
' https ' to ' http '. I also removed the
extended attributes on the link '?
attredirects=0&d=1' although this doesn't
really matter--it play either way.
And finally, here is the actual example
embedded into this post! The file is fairly
large so you might get a few second delay
before it plays. Enjoy!!!
Thank you for stopping by.
Google Reader has been discontinued. We
want to thank all our loyal fans. We
understand you may not agree with this
decision, but we hope you'll come to love
these alternatives as much as you loved
Reader.
Creating a Google Site for MP3 Storage
Creating the Blogger MP3 File Cabinet
Uploading MP3 Files to Google Sites
Embedding an Audio Player in 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.
I did some searching online and found the
following downloadable player calledDewPlayer.
The key to using DewPlayer is to download the
dewplayer Flash file and upload it to your same
Google Sites MP3 page as you did with your files
in Part 2. Follow the same instructions to upload
the file ' dewplayer.swf ' to the MP3 folder like this:
As you can see I've uploaded both the
'dewplayer.swf ' and ' dewplayer-rect.swf ' files. Each
looks a bit different. Once you've uploaded the file,
place this code in your post as HTML where you
want it:
<div>
<object type="application/x-shockwave-
flash" data="http://sites.google.com/a/
bloggertipspro.com/mediafiles/mp3/
dewplayer.swf" width="240" height="20"
id="dewplayer" name="dewplayer">
<param name="movie"
value="dewplayer.swf" />
<param name="flashvars"
value="mp3= http://sites.google.com/a/
bloggertipspro.com/mediafiles/mp3/Future
%20Gladiator.mp3 " />
<param name="wmode"
value="transparent" />
</object>
</div>
Hopefully, your security settings should allow this
to be visible here:
Another option is to use the javascript media
player provided by Yahoo. This works pretty well,
however, I don't like the player on the left side of
the window. Just paste this code with your mp3
file where you want the player:
<a href=" http://sites.google.com/a/
bloggertipspro.com/mediafiles/mp3/Future
%20Gladiator.mp3 ">Play Song</a>
<script type="text/javascript"
src="http://mediaplayer.yahoo.com/js">
</script>
Play Song
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 - copy and past this code
if you like it:
<iframe title="Embed Music" width="300"
height="45" scrolling="no"
frameborder="0" id="1321430542"
name="1321430542"
allowtransparency="true" class="igm"
src="//urlaacjrode9jse93p741t2n1ibbufaq-
a-sites-opensocial.googleusercontent.com/
gadgets/ifr?url=http://
hosting.gmodules.com/ig/gadgets/
file/105629041657992777031/embed-
music.xml&container=enterprise&view=default&lang=en&
country=ALL&sanitize=0&v=6ced7fd38a9bccd&up_hide&up_loop=
false&up_auto=false&up_bg&up_mime=audio/
mpeg&up_url= http://sites.google.com/
a/bloggertipspro.com/mediafiles/mp3/
Future
%20Gladiator.mp3 &libs=core:dynamic-
height:idi&mid=144&parent=https://
sites.google.com/site/mori79/html-
gadgets/media-players#st=e
%3DAIHE3cCkXTmVvxP0ZRAHEXp17OlOvBFg6Xw008LDGZSE
%252F1fBKexUW%252BeMXTo%252FSYAabcN
%252FtKDMOM8MqiEQfTIjSiO6W77yTW9QlA%252F
%252Bz7Yl0dVKwOWuo5uu7TPbl
%252FtDNjfh5HX0J%252FceG%252Fjn%26c
%3Denterprise&rpctoken=1639199637196496882"></
iframe>
HTML5 was developed with multimedia in mind.
Some of the newer browsers have the
new <audio> tag that will, in the future, allow you
to play media without a Flash player. However, this
is still cross-domain scripting which may be
blocked:
<audio controls="controls">
<source src=" http://sites.google.com/
a/bloggertipspro.com/mediafiles/mp3/
Future%20Gladiator.mp3 " type="audio/
mpeg" />
Your browser does not support this audio
</audio>
file types other than images and videos when
attempting to expand your blog. I don't know how
many times I've seen users asking for upload
storage for PowerPoint slides, PDF files, databases,
etc. Probably the single most popular request is
"how can I upload a MP3 file to Blogger and
embed it in a flash player?" without some odd
widget or custom call-out. The reason why the
MP3 request is called out so often is mainly due to
the desire to have either music or podcasts
directly embedded in your posts.
What many Blogger users don't realize is that by
registering as a Google user, you have many of
their tools at your disposal including the not so
obvious ability to utilize free Google storage (which
translates directly to the ability to upload MP3 files
Now, uploading a MP3 file to Blogger is not a
direct upload through the Blogger interface but is
very easy with just a few steps to get you there
quickly. So, let's get started!!
So, just what is a Google Site? Sites is a
free website building tool that Google
picked up as an acquisition some years
back. It is not overly popular but does
have some interesting capabilities. You
can use it as a standalone tools to build
full, mostly static websites without any
hosting fees. In our case we're only using
it as a background placeholder.
The first thing you're going to want to
look for is the Google Sites menu item. It
is a bit hidden under the More menu
selection as shown here:
Simply go ahead and choose ' Sites' to get
started. You're really not going to use the
site builder to build a full website at this
point (though you could if wanted), just
utilizing some of the storage functionality
that Google provides with this tool.
Select the menu button ' CREATE' to make
a background site for your Blogger blog:
This will lead you to the next page that
will allow you to name your site and
associated themes if you want. The key at
this point is to just use the default ' Blank
Template' that is preselected. I like to use
the name ' media ' or ' mediafiles' if my goal
is to have Blogger use MP3 music or
podcasts:
Go ahead and press ' CREATE ' to have Sites
kick off the website build. In a second or
two you should see something like this
which is the left pane of the newly
created website:
You now have the website shell ready to
land your MP3 files. But, the default pages
are only static ones at this point without
any ability to upload or store files. For the
last phase of this Part 1 you need to
create a certain type of webpage called a
' File Cabinet'.
The next step is adding a web page to
your site. Go up to the far right menu
item in Sites and select the ' New page (c) '
icon button:
You'll be prompted with a page setup
dialog that will need to ' Name your page: '
and set the page type like so - be sure to
use the numbered order to setup the page
correctly. I prefer to create a File Cabinet
page called mp3 to set the file types. You
can call it whatever makes sense to you:
Go ahead and press ' CREATE ' to build the
new webpage. Your site should return
looking something like this:
You've now created the needed shell to
get your MP3 files to some free storage
from Blogger. Before you start working
with this site, however, you need to
follow one last step - setting the visibility
of the webpages to be Public.
In this upper right menu choose the
'More' dropdown button to select the
'Sharing and Permissions' option:
Once you've selected it, you'll be in
the Manage Site section. You'll want to
select the visibility permission to allow
these pages to be fully ' Public on the web '
like so:
Done!! You're now ready to start using
Google Sites for your Blogger MP3 files!
If you've left your Google Site since the
last tutorial, go back and log into Sites
again. You should see the default Sites
screen with the new 'mediafiles' site
ready from Part 1:
Go ahead the click on the 'mediafiles' site
to get to the pages within--you will open
a new window defaulting to the Home
page like so:
Your custom file uploading page (called
mp3 here) is ready for your files. Go
ahead and select the mp3 page title in the
left menu above to get the to files page
where you can start the uploads. The
small ' Add files ' button is located near the
middle of the page as circled below. This
is where you can select the files you want
to upload:
When you select the files you should see
the upload dialog box:
Continue repeating this step to upload all
of the files you need. Take care, however.
Google does have a storage limit on Sites
of only 100MB per site andonly 20MB per
file. So, if you're uploading music, that
limits you to about 25 songs. For podcasts
take care to reduce your audio bit rate to
get more efficiency in storage. I'm sure
you could create more sites to raise that
limit but I haven't tried it personally.
Here's what your mp3 site page should
look like now:
The mp3 file I added was from a Royalty
Free music website. However, in order to
use the file I have to give the artist create
like this:
Future Gladiator Kevin MacLeod
(incompetech.com) Licensed under Creative
Commons "Attribution 3.0" http://
creativecommons.org/licenses/by/3.0/
Since the Google Sites page is public, you
might want to consider what type of
license is needed for the mp3 files you are
uploading. Be sure to give the artist or
podcast credit both on your Blogger site as
well as your Google site if required by the
license. I added the very same credit in
the comments of the Google site too.
The final step in this entire process is to
find an audio player that you can utilize
to actually stream the MP3 data to your
users. Typically this is done using an
Adobe Flash/Shockwave player. The
player just needs to be embedded as code
in an HTML widget or directly in a
Blogger blog post.
Fixed as of Sept 2012 - At one time Google
provided a Flash audio player directly
from their Google Reader site. As of June
2012 - this was removed much to the
dismay of many bloggers. They may or
may not add this back. I'm going to leave
this section within this post for now in case
Google decides to add their player back.
The best guess out there right now is that
Google is migrating much of their Reader
functionality to Google Play - their new
multi-media site.
Luck has it that Google has just the code
you need! As part of the Google Reader
application, there is a player widget you
can reference directly from other Google
tools. Important note, however: I haven't
found any specific wording that Google
sanctions this from Blogger. But, many
people do it and I doubt that Google
would pull the plug on the widget for its
use in Reader.
Given that, here is the widget code you
need to copy and paste:
<embed
flashvars="audioUrl= your-google-sites-
link-here "
height="27"
pluginspage="http://www.macromedia.com/
go/getflashplayer"
quality="best"
src="http://www.google.com/reader/
ui/3523697345-audio-player.swf"
type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>
Note that the part that says ' your-google-
sites-link-here ' needs to be the full URL of
your Google Site MP3 file. The easiest way
to get to this is to right-click on the small,
down-arrow located next to the file on
the far bottom right of your file page:
Once you right-click on it, you should see
a menu item that says ' Copy Link Location '.
Go ahead and choose that to paste into
your copied code above like so:
<embed
flashvars="audioUrl= http://
sites.google.com/a/bloggertipspro.com/
mediafiles/mp3/Future%20Gladiator.mp3 "
height="27"
pluginspage="http://www.macromedia.com/
go/getflashplayer"
quality="best"
src="http://www.google.com/reader/
ui/3523697345-audio-player.swf"
type="application/x-shockwave-flash"
width="400"
wmode="transparent">
</embed>
If you take a close look at my URL you'll
see that I removed the 's' from the https in
the link. Google Sites uses a secure http
connection by default. However, since we
made the page public you can alter the
' https ' to ' http '. I also removed the
extended attributes on the link '?
attredirects=0&d=1' although this doesn't
really matter--it play either way.
And finally, here is the actual example
embedded into this post! The file is fairly
large so you might get a few second delay
before it plays. Enjoy!!!
Thank you for stopping by.
Google Reader has been discontinued. We
want to thank all our loyal fans. We
understand you may not agree with this
decision, but we hope you'll come to love
these alternatives as much as you loved
Reader.
Creating a Google Site for MP3 Storage
Creating the Blogger MP3 File Cabinet
Uploading MP3 Files to Google Sites
Embedding an Audio Player in 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.
I did some searching online and found the
following downloadable player calledDewPlayer.
The key to using DewPlayer is to download the
dewplayer Flash file and upload it to your same
Google Sites MP3 page as you did with your files
in Part 2. Follow the same instructions to upload
the file ' dewplayer.swf ' to the MP3 folder like this:
As you can see I've uploaded both the
'dewplayer.swf ' and ' dewplayer-rect.swf ' files. Each
looks a bit different. Once you've uploaded the file,
place this code in your post as HTML where you
want it:
<div>
<object type="application/x-shockwave-
flash" data="http://sites.google.com/a/
bloggertipspro.com/mediafiles/mp3/
dewplayer.swf" width="240" height="20"
id="dewplayer" name="dewplayer">
<param name="movie"
value="dewplayer.swf" />
<param name="flashvars"
value="mp3= http://sites.google.com/a/
bloggertipspro.com/mediafiles/mp3/Future
%20Gladiator.mp3 " />
<param name="wmode"
value="transparent" />
</object>
</div>
Hopefully, your security settings should allow this
to be visible here:
Another option is to use the javascript media
player provided by Yahoo. This works pretty well,
however, I don't like the player on the left side of
the window. Just paste this code with your mp3
file where you want the player:
<a href=" http://sites.google.com/a/
bloggertipspro.com/mediafiles/mp3/Future
%20Gladiator.mp3 ">Play Song</a>
<script type="text/javascript"
src="http://mediaplayer.yahoo.com/js">
</script>
Play Song
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 - copy and past this code
if you like it:
<iframe title="Embed Music" width="300"
height="45" scrolling="no"
frameborder="0" id="1321430542"
name="1321430542"
allowtransparency="true" class="igm"
src="//urlaacjrode9jse93p741t2n1ibbufaq-
a-sites-opensocial.googleusercontent.com/
gadgets/ifr?url=http://
hosting.gmodules.com/ig/gadgets/
file/105629041657992777031/embed-
music.xml&container=enterprise&view=default&lang=en&
country=ALL&sanitize=0&v=6ced7fd38a9bccd&up_hide&up_loop=
false&up_auto=false&up_bg&up_mime=audio/
mpeg&up_url= http://sites.google.com/
a/bloggertipspro.com/mediafiles/mp3/
Future
%20Gladiator.mp3 &libs=core:dynamic-
height:idi&mid=144&parent=https://
sites.google.com/site/mori79/html-
gadgets/media-players#st=e
%3DAIHE3cCkXTmVvxP0ZRAHEXp17OlOvBFg6Xw008LDGZSE
%252F1fBKexUW%252BeMXTo%252FSYAabcN
%252FtKDMOM8MqiEQfTIjSiO6W77yTW9QlA%252F
%252Bz7Yl0dVKwOWuo5uu7TPbl
%252FtDNjfh5HX0J%252FceG%252Fjn%26c
%3Denterprise&rpctoken=1639199637196496882"></
iframe>
HTML5 was developed with multimedia in mind.
Some of the newer browsers have the
new <audio> tag that will, in the future, allow you
to play media without a Flash player. However, this
is still cross-domain scripting which may be
blocked:
<audio controls="controls">
<source src=" http://sites.google.com/
a/bloggertipspro.com/mediafiles/mp3/
Future%20Gladiator.mp3 " type="audio/
mpeg" />
Your browser does not support this audio
</audio>
Comments
Post a Comment