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