Facebook landing page css,e marketing strategy template charity,marketing for beginners uk - Downloads 2016

Christina Sanchez from Le Modern Trinket was so happy with her site build, she asked us to crank out another project for her!
Christina supplied us with pictures from a recent photo shoot, links to all of her social media and text to use and we ran with the rest.
Steph Calvert is the published illustrator and award winning designer behind Hearts and Laserbeams. Jonathan Goldford is a partner at Wired Impact, a web design company that builds websites for nonprofits.
Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. While there are an enormous number of articles that talk vaguely about how to create a custom landing page, very few discuss the nuances of actually designing and programming one. Design for Any Height — We can make our Facebook Page any height, but we have to remember that most people interact above the fold and at the time of writing this, our Facebook landing page will start 135px from the top if the person viewing is logged in. Account for the Width of the Company’s Name — Since we’re interested in creating a call to action for our Like button, we must take into account our company’s name. To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Now that we have a design we’ll walk through how to program our landing page to use on Facebook. There are a number of reasons why we should start programming our Facebook landing page outside of Facebook.
Facebook Offers No Coding Support — Facebook provides only a small box for you to code in, and provides no syntax coloring or syntax checking. Facebook Caches External Files — Facebook caches every external file causing changes to external CSS, images, Flash, or other external files to not show up without changing the version query string on the end of each file. You’ll Publish Untested Code — Once you save changes, those changes will be live on your Facebook Page.
Since we aren’t going to be using Facebook to start programming, we can’t use Facebook’s Markup Language (FBML).
Use Plain Old HTML and CSS — Program your Facebook Page like you would any page using HTML and CSS.
Load CSS Externally — CSS should be loaded using an external style sheet file instead of using an internal style sheet. Host Files on Another Server — Every image, CSS file, Flash video, or other external file needs to be hosted elsewhere. Remove Firefox’s 1 Pixel Gap — Mozilla Firefox creates a 1-pixel space between images on Facebook landing pages. The page looks exactly as we expected it to, but right now if someone already Likes our page, they will still see the call to action for them to Like at the top. In case you want to add something else besides a call to action for your Like button, below are some examples of other commonly used FBML items.
Fb:share-button will display a share button that allows users to share a link on their own profiles. While adding a form is not FBML, people are often curious to learn how to place them on their Facebook landing pages.
Adding target="_blank" will open a new window when the form is submitted so the user isn’t taken away from Facebook. If you want to add a newsletter signup form to Facebook, both MailChimp and CampaignMonitor have tutorials that explain the process.
After adding all of our FBML, we’re ready to add those final touches and publish our finished Facebook landing page. Once we’re done adding all the necessary FBML we need to move all the CSS, images, videos, and other external files to a server.
Once all of our files are located on a public server, we need to adjust our HTML to make all of our paths absolute and add a version query string. One of the biggest disadvantages of Facebook landing pages is that Facebook provides no place for you to test your code.
Copy and paste your HTML into the JavaScript Test Console and click “Run Code.” You’ll get to see your code in action.
Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page. Now that you’ve put in all of this time programming your custom landing page, you probably want to make it your default landing page. Beside “Default Landing Tab,” use the drop-down menu to select the title of your new landing page. Note that as an admin you will always see the content that you only want shown to those who haven’t Liked your page. Since there is no one correct way to program a landing page, we would love to hear what you think. Facebook has great ambitions, it doesn't want to be just another site, it wants to be another web. The music and movie part it's already got covered, with the launch of the extended Open Graph. The success of companies like Zynga is enough to prove that Facebook's platform is a powerful asset.
But if that falls through, which it still might, Facebook is prepared to go at it alone, and launch the platform at its own event on Monday. Whatever happens, Facebook is very determined to enable developers to create apps, with standard web technologies, that run on mobile devices and desktops alike. Facebook has been working on this for months and it's been working with developers for this long as well. If you’re not already using Facebook advertising, you probably know you should be – it’s cost-effective, the reach is huge, and the targeting capabilities are phenomenal. In this post, we’ll be looking at everything you need to know about Facebook landing pages, from how to ensure continuity of your messaging from ad to landing page, to what elements you need to consider when designing the landing pages themselves. Before we go any further, it’s important that we clarify what we’re actually talking about when we mention Facebook landing pages. Not so long ago, Facebook landing pages were pages that advertisers could create using third-party platforms to prompt users to complete a desired action. This is a great example of what is known as a “Like gate,” a pop-up or page designed to prompt the user to Like a page before allowing them to access the content they’re interested in.
However, this also means more work for advertisers – or, at least, more things to think about. Here is an ad, captured from my Facebook feed, for a winter coat sold by Duluth Trading Co. Obviously, this landing page features the exact product that was advertised in my Facebook feed (a solid plus in terms of relevance), but it doesn’t provide me with any incentive to click around if, for whatever reason, I decide I’m not in the market for a new winter coat, or this coat in particular.
If I perform a search with high commercial intent on Google for desktop, I’m probably much more focused on elements such as functionality, features, and pricing, and more likely receptive to a landing page like this. Remember how we said that one of the greatest strengths of Facebook ads are they’re visually rich?
This ad makes excellent use of text despite Facebook’s 20% rule, and even manages to sneak in some additional branding with the inclusion of the logo.
See how closely the ad and the landing page are aligned in terms of aesthetics and overall design? Almost half of Facebook’s 1.49 billion monthly active users only access Facebook from a mobile device. With this kind of data, failing to optimize your Facebook landing pages for mobile could quite literally doom your campaigns to failure. I cannot stress the importance of mobile-friendly landing pages enough when it comes to Facebook advertising. Unlike Google, Facebook does not offer advertisers much in the way of best practices to follow with their landing pages.
While there are many similarities between search and social landing pages, the most crucial distinction between the two is that with Facebook, you’re searching for users – they aren’t searching for you.
For example, one of our most successful Facebook advertising campaigns was for a content download. The copy is punchy and focuses on the benefits of reading the guide (and leverages the mystery about AdWords’ Quality Score to create additional interest), and the image proved immensely popular with our audience.


The complexity of your landing pages will depend greatly on the desired action you want prospects to take, and their content will depend on the nature of whatever you’re offering. As with any marketing initiative, Facebook advertising campaigns should be designed around the intent of the user. Reminds me of the car dealer who quickly asks "What would it take for you to drive out with this car todat?" instead of taking the time to first show it's benefits. There's a need today for many online marketers to have a Facebook landing page and other social media forms to socially communicate with their prospected market. A landing page in Facebook is generally utilized to help businesses gain fans and give users a branded experience.
In non-technical terms, it means you have the ability to design a page which lives inside your fan page and create incentives to get Facebook users to like your page. Once a Facebook user becomes a fan of this page, they are no longer presented with the landing page. Update: Facebook made changes to the way pages work and because of this, this type of page is no longer available.
In 2009 I was introduced to the concept of having a dedicated landing page for each PPC ad. Just three years later, here we are, living in a world where almost all of the major companies like Dell, General Mills and DHL understand the necessity of using dedicated landing pages. This understanding is trickling down into small businesses as well, where smart marketers are using software, like Unbounce, to create and test dedicated landing pages. Unfortunately, it seems that many organizations think this necessity begins and ends with Google AdWords. When it comes to creating dedicated landing pages we know there are a couple of best practices that set the standard for lifting conversion rates, whether it’s a PPC campaign or a Facebook advertisement. Message match creates relevancy for your visitor and lets them know they are the right place. Just like with headline and offer matches, image match tells the user that he’s in the right place. I recently clicked through four Facebook ads that piqued my interest and was disappointed by the pages I landed on. In the first three examples, the landing pages are actually custom tabs that keep the visitor within Facebook. I really like the design of this landing page a lot – it’s focused and has a big call-to-action. I would highly suggest to Walden that they create custom landing pages for each degree level to better cater to the needs of students at those levels.
Additionally the ad mentions an “online degree program” but nowhere on the landing page do I see the word “online degree” or “online classes.” If the mention of an online program is what got me to click, that is a feature I need to see highlighted right away. The goal of this Facebook ad and corresponding landing page is to generate more “likes” for the page.
When I click the ad headline I am taken to a page that says, “Be a Sustainable Traveler!” The ad had mentioned being “eco-friendly” but the landing page headline says “sustainable.” Yes, these two words can be interchangeable, but why not create cohesion by using the same word in both? Additionally, the call-to-action “Like us to explore exciting destinations…” doesn’t really stand out from the rest of the landing page. I love this ad for a lot of reasons: really compelling headline, great visual, and clear call to action in the body copy. The ad headline reads, “WIN a Trip to BORA BORA” while the landing page says, “BORA BORA TRIP OF A LIFETIME SWEEPSTAKES.” A simple change here so that the ad and landing page headlines are the same could improve conversions.
Additionally, if this is a lead generation campaign for DreamPlanGo, I would remove the “like” barrier to entry. First of all, the ad headline reads, “Master’s in Communication” but the headline on this landing page doesn’t match.
The body copy of the ad highlights that you can graduate in as few as 18 months, but on the landing page it’s mentioned all the way near the bottom.
Having successfully completed Facebook ad campaigns for a different state university, I can say first-hand that headline and image match are very important when dealing with college-aged young adults who are bombarded with ads from different universities. This friendly little guy surfs the web for the latest tricks of the trade and hottest gossip in the world of social media marketing. As a stylist at Gods and Heros salon in Costa Mesa, Christina was looking for a clickable landing page for her business’ Facebook page.
Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. Since we can’t use a body tag in our Facebook Page, we’re going build our entire page in a container div set to a width of 520px. If they aren’t logged in to Facebook, that increases to roughly 250px from the top of the page to allow space to log in or sign up. Let’s put in a conditional statement using FBML that only shows the action image when you aren’t logged in or haven’t Liked the page.
For example, if a user named John Smith comes to your page the code below will display “John Smith”.
For example, the code below will display the current user’s profile picture at 64px by 64px. For example, the code below will display the thumbnail used for The Social Network movie trailer. For example, the code below will display a play button that you click to play the FLV video.
If you don’t use one of those services, you can usually drop in the code from your e-mail marketing company to make this work.
As of right now, you should remember that JavaScript will not be activated on your landing page until the user has taken action. Powered by its own proprietary technology, Mashable is the go-to source for tech, digital culture and entertainment content for its dedicated and influential audience around the globe. It wants people spending all of their time inside Facebook, whether it's listening to music, watching movies, or playing games and everything else. But, so far, it's been limited to the desktop, mobile devices, where apps are at home, were off limits. There have been plenty of rumors about Project Spartan, Facebook's HTML5-based app platform for mobile devices.
It's been ready for a while, but, as has been the case several times, Facebook has been holding off on releasing it until it can come to terms with Apple. So, when the platform finally launches, there should be a solid selection of apps to choose from.
Our experience Facebook experts and professional graphic designers have constructed hundreds of custom Facebook business pages to help our client create brand awareness and build upon their loyal repeat customer base. By the end of this post, you’ll be equipped to make your own ass-kicking Facebook landing pages, so let’s get started. This could be something as simple as “Liking” a page, or a more involved action like completing a web form.
There are many variations of this type of “landing page,” such as competitions, special offers, limited-time downloads, and online tie-ins to real-world promotions, such as code redemption offers for digital goods etc.
Facebook landing pages are pages that a visitor is taken to after clicking on a Facebook ad. Given that Facebook restricts advertisers to using just 20% of an ad’s virtual real estate for text, Facebook ads often look great, which makes them easier on the eye and significantly more clickable.
With text ads, you can send visitors to pretty much whatever page you like (as long as it’s relevant to the ad), but with Facebook ads, you have to consider the user experience once they’ve clicked on your ad.
The ad features some compelling copy that emphasizes the product’s benefits, such as “100% free forever” and “Unlimited users and contacts.” It also makes use of the “Sign Up” call-to-action button that lets visitors convert directly from the ad. I clicked on that ad expecting to learn more about HubSpot’s CRM, not to sign up for anything.
Sure, it’s not asking for a lot of information – just an email address and a company URL – but it’s still more information than I’m prepared to hand over at this stage, which is precisely none. If I click an ad from Facebook on mobile, I’m almost definitely not going to be interested in an even slightly harder sell like this, particularly for this kind of product.
Well, this provides both opportunities and challenges for advertisers, as visual continuity between your ads and your landing pages becomes even more important, especially on mobile. It’s the perfect progression from ad to landing page, and gives me exactly what I expect when I click on that ad.


This Facebook landing page could have emphasized the discount offer featured in the ad much more strongly – it’s obvious that this page was not created specifically to accompany that Facebook ad, which is why Four Five Club opted for the temporary banner beneath the page’s navigation bar.
You won’t see any major brands making this mistake, but if you’re a small brand or new to Facebook advertising, the risk of overlooking mobile-friendly landing pages is much higher. The design and messaging match the ad, the copy is brief but compelling, it makes the benefits of the service abundantly clear, and the call to action is bold, easily clickable, and well phrased.
Not only are millions of people only accessing Facebook from a mobile device, but this is the kind of user experience that today’s Internet users have come to expect.
This means you can effectively think of Facebook ads as a component of your landing pages, or the first action in a longer process.
A landing page for a whitepaper download, for example, might include some brief details of what the guide contains, whereas a landing page for a more costly service or product, such as a school or training course, might include more comprehensive information about the school and its programs. However, following the guidelines above, and landing page best practices in general, will help you increase conversion rates and provide a better experience for users interacting with your brand on Facebook. I like the HubSpot example where they are trying to immediately close the deal while the customer is obviously still seeking information.
Social media like Facebook is a big help in your business especially in engaging with with targeted customers. The page is still there and can be found usually in the left hand navigation (circled in red below), but once a person becomes a fan, they will then see the business’s wall by default on their next visit. Facebook Landing pages can be very simple like the one above or more complex to showcase products & services, a contest, lead capture forms – you name it!
This is a mistake because the homepage does not have a single, clear call-to-action, so my leads were becoming distracted - reading the blog for example - rather than doing what I wanted them to do. I saw first hand how conversion rates soar when this simple process is put into place and knew I would be an advocate for rest the rest of my professional life.
The first ever Conversion Conference was held in 2010 and I was there (on behalf of my employer at the time).
There seems to be a notion that Facebook ads are somehow different and dedicated landing pages aren’t necessary. When it comes to Facebook ads, banner ads or any other medium that allows images, the landing page should contain the same image used in the ad.
I also love how the custom tab on Walden’s Facebook page is designed to look exactly like a regular landing page. I would probably add a directional cue (such as an arrow) that points towards the “like” button up top and also experiment with making the CTA a different color so that it stands out better.
If the goal is to get as many people to fill out the entry form behind the fan gate, so remove the fan gate altogether. I see important facts being pointed out in a bulleted list, the call-to-action is above the fold and stands out, I see social proof and there’s no leaky navigation. Additionally, the image used in the ad isn’t close to any of the images used on the landing page.
This means you should be just as serious about getting a return on your investment as any other advertising channel. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example. We wrapped the FBML in a container div to allow us to style it and added ?autoplay=1 to the end of swfsrc so the user won’t have to click twice to play the video.
The player will then rotate through a display of the song title, song artist, and the album name.
This means that once you publish your Facebook Page, any changes you make to external files will not show on your landing page.
Although creating compelling visual ads for your Facebook campaigns is crucial, it’s only half the battle – your accompanying landing pages need to be just as strong (if not more so) to ensure your visitors go the distance and convert. You might think there’d be nothing much to distinguish Facebook landing pages from their paid search counterparts, but there are several elements you should consider before launching your campaigns. They also blend in much more effectively with organic content in users’ news feeds, resulting in a much better experience for the user.
Sure, this page tells me that HubSpot’s CRM “is the flexible, intuitive solution for managing your prospects and sales pipeline,” but this copy doesn’t tell me anything substantial. Remember – I came to this page from a Facebook ad, which means I’m most likely not in a commitment frame of mind. The landing page also follows a number of other best practices, such as reinforcing the benefits of the service, including compelling language with minimal copy, and featuring the coupon code to get the 50% discount promised by the ad.
Still, it’s a great example of how matching visual continuity from ad to landing page can be very effective for Facebook advertisers.
That means that 655 million people – more than twice the entire population of the United States – NEVER access Facebook from a desktop. Despite being pretty image-heavy, this mobile landing page also loaded very quickly, even on an older Android device.
If you try forcing them to scroll around a page to fill out a web form on a page that isn’t optimized for mobile, you can forget about ever converting them – and you’ll probably damage your brand while you’re at it. Some campaigns may be able to offer users a simple, direct path to conversion directly from Facebook, but other campaigns may necessitate a longer, more indirect conversion path in which a Facebook ad is just the first step. But you need to know how to use Facebook marketing the right and most effective way to be successful at it.
Now most businesses are wising up to the fact that you need an effective, relevant landing page or squeeze page to convert leads from ad campaigns. Additionally the offer from the ad and the one being made on the landing page must match up. You aren’t so much interested in financial aid options as you are in research concentrations and noteworthy professors you might get to work with. To override Facebook’s default paragraph style, we added a font-family style for #container p.
This happens because Facebook doesn’t know the file has changed and is loading its older saved version.
Also, I noticed that the Facebook JavaScript Test Console has trouble loading videos, so you may be forced to test that code directly on your landing page. Yes, HubSpot’s CRM is “100% free forever” as the ad informed me, but that still doesn’t mean I’m ready to sign up for anything. Instead it references “a degree” which could be anything – a bachelor’s degree, a master’s degree or even an associate’s degree!
I also really like their use a directional cue that guides the eye to the “like” button at the top.
However, if the goal of this campaign is simply to generate more “likes” than the fan gate makes sense. To trick Facebook, we use a query string at the end of our filenames and increase the number whenever we make a change to that external file.
Many business have not updated their Facebook Timeline Cover picture yet and if your one of them, it’s time to make that change. Now, for all I know, this landing page has a crazy-high conversion rate, but it’s definitely not what I expected. To best imitate Facebook while testing, we included the 11px font size and also set the container text color to black to match our company colors. The Facebook Timeline Business Pages easy to use and we are happy to show you how to get started. Here are a few example of Business Facebook Timeline pages we have designed and or managed.
Below are a few older examples that were created before the timeline change.Social Media ConsistencyIntegrating Facebook and other social media platforms within your campaign is very beneficial.
Creating a brand image that spans multiple social media platforms will help new and repeat customers recognize you.
Having a custom Facebook landing page and fan page allow you the ability to retain traffic through building a loyal repeat customer base.



Digital marketing job offers
Audio video editor free download


Comments to «Facebook landing page css»

  1. 13.05.2014 at 12:41:58

    EFIR_QAQASH writes:
    Video capture possibilities, which incorporate may possibly be interested in too adequately replace other publishers' revenue.
  2. 13.05.2014 at 14:53:11

    Elik_555 writes:
    More advantageous than its parts functionality alone has me anxiously like much more data on any.
  3. 13.05.2014 at 20:41:53

    2OO8 writes:
    Smaller sized videos or upgrade your pc with limited to 140.
  4. 13.05.2014 at 19:27:13

    100 writes:
    Just a bit about the history of editing videotape.
  5. 13.05.2014 at 13:43:19

    Jizn_S_Devockami writes:
    More data that illustrates the.