SoundCloud Shortcode For Blogger!

Add SoundCloud Shortcode in Blogger

SoundCloud shortcode lets you embed Soundcloud Music Players in your Blogger blogs. Using Blogger shortcode plugin, you can now embed Audio Tracks and playlists hosted at soundcloud anywhere on your blog, you can insert MP3 tracks inside your Blogspot comments, Posts, Pages and HTML/Javascript Widgets. The shortcode is a code in Textual format which can be pasted on any visual editor or composer. You can now add Top-of-the notch Sound Technology in your blogs with just a simple line of code! Our Shortcode Plugin is much more user friendly when compared to Wordpress SoundCloud Shortcode because it supports attributes instead of parameters to keep the shortcode clean and tidy. It is now time to add a new life to your blog and let your visitors hear music when they browse your site!

You can play the following files using the shortcode AIFF, WAVE (WAV), FLAC, ALAC, OGG, MP2, MP3, AAC, AMR, and WMA files. You can now upload sound files as big as 5GB in size to your SoundCloud account and then embed them anywhere on your blog using this unique Plugin.

What Can You Do with SoundCloud Shortcode?

The shortcode for Soundcloud can be nested inside other shortcodes such Accordion or Tabs to make it work just perfectly

nested soundcloud player inside accordion

You can create tracks or even playlists of your favorite singers, musicians or Nasheed reciters. Add the playlist inside your Post composer, Sidebar widgets or even inside your threaded comment form!

soundcloud embedded in Comments

You can create both classic Player (shown below) or the new Visual Player as shown above.

Soundcloud Classic Player

Lets now learn how to add it in blogger by following these three basic steps!

1. Install Blogger Shortcode Plugin

This shortcode will not work unless you have installed the Shortcode Plugin. Follow these 7 easy steps shared on the tutorial link below

After you have installed the plugin, you can then follow the steps discussed below to start embedding Audio Tracks on your blog.

2. Grab Your Track ID or Playlist ID

In order to embed soundcloud player or playlist inside your website you need the track ID and Playlist ID respectively.

Finding the Track ID

Go to SoundCloud and find a track you like. Click the 'Share' button below the waveform and an overlay will appear.

click the share button

Click the embed tab and copy and paste the code inside a notepad or any editor you may have.

Click embed tab

The code inside "Code & Preview" will have the track ID inside it which looks like the one shown below.

api.soundcloud.com/tracks/106634299

In the example case above the Track ID is 106634299. You only need this track ID to make the shortcode work.

Finding the Playlist ID

Now Lets learn how to find the Playlist ID. Visit the profile of your favorite artist or singer. Click the 'Share' Button on the sidebar.

SoundCloud user profile

Click the embed tab and copy the code from "Code & Preview" . Paste the code inside notepad and you will find the Playlist ID inside it as shown below

api.soundcloud.com/users/7518543

In our example the playlist ID is 7518543

3. Adding The SoundCloud Shortcode

After you have installed the plugin and learnt how to grab the track and Playlist IDs, you can then easily embed the player in your blog using the shortcode below.

 [soundcloud src="106634299"/]

Replace the Track ID with yours inside the src attribute

Output:

SoundCloud track

To create a Playlist use this shortcode

[soundcloud height="350" playlist="1" src="7518543"/]

Replace the Playlist ID with yours inside the src attribute.

Note: For creating playlists it is important that you use the height and playlist attributes.

Output:

SoundCloud Playlist

Customize the SoundCloud Player

Following is the complete list of attributes supported by our Shortcode

Attribute Definition
src Insert Track ID or Playlist ID here
color Changes background color of the Player Button in Classic View only.
playlist By default player is displayed for playing a single Track but if you wish to display a Playlist or multiple tracks then you need to insert this attribute with value set to "1" and insert the Playlist ID inside src attribute
auto Setting this attribute to "true" will auto play the track. Setting it to "false" will turn off the auto play mode.
width Changes width of the Player iFrame. Can also be assigned in percentage for responsiveness.
height Changes height of the Player
visual Setting it to "true" will display the "Visual" Player with wide background image. Setting this option to "false" will display the old HTML5 Classic Player.
comments Setting it to "true" will display user comments on the player. Setting it to "false" will turn off displaying user comments
user Setting it to "true" will display the uploader name. Setting it to "false" will hide the uploader name.

Use the attributes in following format

[soundcloud auto="true" user="false" visual="true" comments="true" width="550" height="400" src="106634299"/]

The above shortcode will create a player which will auto play, has Visual look, hides Uploader name, shows comments, and has custom width and height dimensions.

Output:

Custom SoundCloud Track

Need Help?

I hope I have covered every single detail but still If I forget to clarify any point, feel free to post your question below. Do share your precious views and let us know your useful feedback. Shine up your blogs and stay tuned for more such awesome shortcodes because we have promised to take blogger to the next level!

Peace and blessings buddies! =>

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

1 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Thanks Mustafa brother for these plugins. These codes saves my time to a large extent not even mine but of all guys.. Thanks

    ReplyDelete