Promote Your Content On A Custom Facebook HTML Page [MUSIC HELP]

Having a page on Facebook today has become a very important source for independent artists to connect with the majority of their fans on the internet. With only a few musician based apps on Facebook, such as Reverbnation’s “Band Page” and Root Music’s “BandPages” App, it’s hard to project your content in the creative and original manner you wish to. The Static HTML application for Facebook is the only legitimate way to achieve that overall customization you need to stand out.

To get started you must first download the Static HTML App to your Facebook Page. Once you’ve downloaded go to the NEW tab titled “Welcome” on the left side-bar of your page. This is the edit page where the code can be input. You will also notice a second text field located below the initial one. This allows you to place similar content via code for Fans only, forcing non-fans to “Like” your page in order to view your exclusive content.

Static HTML Edit Screen

Static HTML Edit Screen

Here at Music Without Labels we have been searching for a few coding options to help bring a number of different content types to the Facebook Landing Page for all viewers to experience, current and new. The Static HTML application allows you to use a number of different codes such as CSS, Javascript, and of course HTML, giving you all the possibilities available with most custom websites. This walk-through will show you the steps taken along with the code used to obtain the page you currently see below. We hope this article will give you the insight you need to go off and customize your own page.

Music Without Labels Static HTML Page

Music Without Labels Static HTML Page

Taking a look at the image header located at the top of our Music Without Labels Facebook page titled “The Beat-Play Experiment”, you will notice it is linked to our blog at http://musicwithoutlabels.com. Here is the code for this linked header image.

Static HTML Source Code [HEADER]To personalize this code with your own image simply upload your image to a preferred online network (Facebook will work great for this), then replace the link in RED with your specified URL. To change the hyperlink in the image swap the GREEN text with your own link. The BLUEtext represents the title of your image which appears in the meta data.

Now all you have right now is a header image. I know, nothing really too big, yet. Looking at the main show located below the header image, you’ll notice a background image (with curtains), a soundcloud player in the middle, and 3 image links (social media buttons). Once again I’m going to begin by giving you the overall code we used then guide you through some of the steps to customize everything yourself.

Static HTML Source Code [BODY]In order to harness the remote background image we used a table which you can see starts the code. This leaves the GREEN text that follows to be the image URL and the dimensions. (NOTE: Facebook pages have a maximum width of 520 pixels.) Proceeding the background part of the code comes the content within the table, which displays on top of the background image. The BLUE text code represents the centered soundcloud player you see on the MWL Facebook Photo above. You can embed all sorts of online content from a number of different services including Youtube, Vimeo, Mixcloud, Soundcloud, and more. Simply copy the embed code from the media you want to post and paste it directly where the BLUEtext is in the code.

Just like the header link image at the top of the page, we used a similar code and added 3 linked images, in RED, within the table. To choose a specified area on the page we used ‘absolute positioning’ which allows you to alter the pixels to a specified location. (This takes a bit of saving and checking your work, so be patient.) The first URL in the code presented in YELLOW refers to the linked URL. Following this URL are the parameters for image positioning and size from TOP, LEFT, WIDTH, to HEIGHT. The second URL in YELLOW refers to the specified image URL (Must upload image to online server to obtain URL).

With so many different variables in this layout there are multiple areas for customization. Creating personalized images and using the codes to strategically position links and images will open a whole new wave of promotion throughout your Facebook Page. Now you are able to deliver content to your Facebook fans in your own way. So we encourage you to get out there and test this code for yourself and don’t be afraid to try different content types and layouts. Please comment with any of your own examples and be sure to contact me with any questions concerning the process. Also, to ensure that your new HTML page is the ‘Default Landing Tab’ go to your “Edit Page” and select “Manage Permissions” on the left then select the new tab in the specified drop-down field.

Written By: Mark G. Valente | Online Marketing Director | @MarkwithMWL | Music Without Labels & Beat-Play, LLC

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s