Basic Usage: MP3 Players

Basic Usage: MP3 Players

In this tutorial, we'll show you exactly how to get a basic implementation of the BB Website Plugins code on your page and load your own custom flash mp3 player! Don't worry, it's easy!

Note: The BB Website Plugins core module is a plugin for jquery, which means that you'll first need to make sure that you have the jquery script loaded into your page first. You can do that by placing the following script tag in the head section of your page. (Between the <head></head> tags.)

Load JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>

Next, you'll need to load some core BB Website Plugins scripts. Put the following script tags in your header as well, (after the jquery script tag above.)

Load BB Website Plugins Core:

<script src="http://www.bbkz.co/bbapi/jquery.appflow.js" type="text/javascript"></script>
<script src="http://www.bbkz.co/bbapi/jquery.bb.core.js" type="text/javascript"></script>
<script src="http://www.bbkz.co/bbapi/swfobject.js" type="text/javascript"></script>

The API can be configured to track usage stats back to your Beat Brokerz account by calling the $.bbmp3() function with settings from the example below.

Set Configuration Options:

<script type="text/javascript">
    $.bbmp3({
      accountID: 0, // Your Beat Brokerz account ID
      channel: 'Website Plugins',  // The channel to track your stats to
      default_player: 'bbmp3-7933', // The default player to load
      addons: {
        companion: true, // Load the licensing slide out
        fancybox: true // Checkout through an on page popup
      }
    });
</script>

After you have added all script code mentioned above, your html document might look similar to this:

<html>
  <head>
    <title>BB Website Plugin Example</title>
    <!-- start copying script here -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://www.bbkz.co/bbapi/jquery.appflow.js" type="text/javascript"></script>
    <script src="http://www.bbkz.co/bbapi/jquery.bb.core.js" type="text/javascript"></script>
    <script src="http://www.bbkz.co/bbapi/swfobject.js" type="text/javascript"></script>
    <script type="text/javascript">
      $.bbmp3({
        accountID: 0, // Your Beat Brokerz account ID
        channel: 'Website Plugins',  // The channel to track your stats to
        default_player: 'bbmp3-7933', // The default player to load
        addons: {
          companion: true, // Load the licensing slide out
          fancybox: true // Checkout through an on page popup
        }
      });
    </script>
    <!-- stop copying here -->
  </head>
  <body>

    <!-- webpage content here -->

  </body>
 </html>

Now, for the actual magic to happen inside your webpage when it loads, all you need to do is apply a simple css class to any element that you want to be "re-born" as an mp3 player.

Here is a simple html "anchor" (link) tag.
<a href="http://www.beatbrokerz.com">Instrumentals</a>

Now, to turn it into an mp3 player, add the "bbmp3-player" class to it.

Point and Shoot:
<a href="http://www.beatbrokerz.com" class="bbmp3-player">Instrumentals</a>

That's It. The "bbmp3-player" classification tells the BB Website Plugins module to zap that link and turn it into a bonified Beat Brokerz mp3 player! But that's not all. Here are a few more customizations you can make to your player just by tweaking the attributes of your html "anchor" (link) tag.

You can load any playlist from Beat Brokerz into your player by simply linking to the page that has the beats that you want to play. (It needs to be a charts page, store page, or affiliate store page.)

Load Any Playlist:
<a href="http://www.beatbrokerz.com/charts/top10/hip-hop" class="bbmp3-player">Instrumentals</a>

The above code will load the top 10 hip hop beats from the charts into your player. If you wanted to load the beats from your seller store, you would just link to your seller store (http://www.beatbrokerz.com/stores/{sellerid})

You can also use a theme and settings from one of your custom players that you've set up in your Beat Brokerz account! (My Account > Affiliate Center > MP3 Players). Just set the 'id' attribute of your link to the custom player id (shown when you preview/load your player in the affiliate center).

Use Custom Theme/Settings:
<a id="bbmp3-7933" href="http://www.beatbrokerz.com" class="bbmp3-player">Instrumentals</a>

In the code above, your player will use the custom settings from the mp3-player on Beat Brokerz with an id of "bbmp3-7933". By setting up a custom player to use on Beat Brokerz, you can change colors, buttons, actions, and default settings for the player!

You can customize the title of the playlist displayed in your mp3 player also. Just set the 'title' attribute of your link to the text you want displayed as the title.

Change Player Title:
<a title="My Custom Player Title" href="http://www.beatbrokerz.com" class="bbmp3-player">Instrumentals</a>

In the code above, the title of your player will read "My Custom Player Title".

You can also change the size of your player to fit whatever dimensions that you want. (Must be at least 275px wide X 95px high.) Just set the width and height properties of your link using a stylesheet, or inline css.

Change Player Size:
<a style="width:400px; height:400px;" href="http://www.beatbrokerz.com" class="bbmp3-player">Instrumentals</a>

In the code above, your player will be created 400px wide by 400px high.