DebJJones.com

Twitter has debuted a "Follow" button for publisher sites that's akin to Facebook's distributed "Like" button. Announced on its blog, the move establishes another pathway for brands to build an audience on the service.

Configure your Twitter Follow Button at www.twitter.com/followbutton.>

Home | Business

 

Chipotle’s “Junk-Free Lunch” digital media program showed a link to Chipotle’s Facebook page, where viewers could learn they were getting a break from junk ads and junk food. Compass Point Media, part of Campbell Mithun, used the advertising strategy on dozens of websites last April.

 

Advertising goes social

Local agencies, big and small, are hopping on the social media train with lots of hires and increasing revenue.

There's a lot of misunderstanding about what social media marketing does for a business. It isn't as much a tool for generating new leads, for example, as much as it is one for building loyalty and retaining existing clients. Too many businesses who go the social media route have this "if you build it they will come" expectation and forego traditional advertising efforts. The result can be disasterous. Just creating a Twitter or Facebook account isn't going to give people a reason to do business with you...it doesn't even give them a reason to visit your Facebook page.

via startribune.com

digology was born out of the realization that digital is the world we live in right now. If your advertising agency wants to quickly get up to speed on integrating social media and other digital channels into your offering, drop us a line and let's chat about what we've been able to do for other agencies.

Easier Negative Keyword Management in AdWords

Duncan Parry | Mar 30, 2011 | 2 Comments
Columns  |  Contact Duncan  |  Subscribe to Newsletters  |  RSS Feeds  |  Biography-->

 

In January, Google introduced a useful addition to AdWords that potentially makes managing negative keywords across multiple campaigns a lot easier. Maybe it was because January is such a busy time of year, but it's a feature that seems to have passed by many advertisers. Here's a recap.

What Are Negative Keyword Lists?

Simply put, a central place to store master list(s) of negative keywords and apply them to multiple campaigns. This is an improvement on the old way of doing this in AdWords, when you had to laboriously copy and paste negatives between campaigns -- a process which can mean copying thousands of words for a mature campaign that's been built out over time.

Accessing Negative Keyword Lists

The lists are easy to access. In AdWords, simply click Control panel and library on the left of the screen, and select Negative keyword lists.

In the example above, you can see that I've already got a list in place of 127 keywords applied to four campaigns. You can create multiple lists and apply them to different combinations of campaigns.

This is useful if you want to apply a master list of negatives to all campaigns, and another, separate list to only a select few -- for example, if your product range is limited in some regions, but not everywhere.

Creating new lists is easy -- just click the New negative keyword list button, name the list, and paste in the keywords. You'll need to spend some time consolidating existing lists across campaigns -- more on that later -- and then you'll need to apply them to campaigns. That's where AdWords interface design provides something of an obstacle.

Applying Negative Lists to Campaigns

Using this feature, it feels like Google designed it without thinking through the workflow involved for existing campaigns (i.e., most of their customers).

Once you've created lists, there's no easy way to apply them to multiple campaigns. Instead, you have to go into every single campaign and then apply the lists(s) that are relevant to that campaign.

Here's the process:

1. Click All online campaigns on the menu on the left of your screen

    

2. Click the campaign to apply the list to

    

3. Click the Keywords tab

    

4. Scroll to the bottom of this screen

    

5. Click Negative Keywords

    

6. On the right of the inflated lists that appear, click Keyword Lists

    

7. Click Add

    

8. Click Add next to the negative keyword list you want to apply

    

9. Repeat across multiple lists

    

10. Click Save

 

Unfortunately, you need to repeat these steps for every campaign -- there's no way at the time of writing to select multiple campaigns and apply the same list(s) to them all at once -- which would have been a real time saver. There's no way to apply them to multiple accounts within the same My Client Center (MCC) either, something that would help with enterprise level accounts like national retailers.

Negative Keyword List Deployment Steps

Interface gripes aside, negative keyword lists are a worthwhile addition to any AdWords campaign. Here are some steps to follow to get the most out of them:

1. Download your account via AdWords Editor

    

2. Sort the columns in Excel and delete all of the rows and columns with anything other that negative keywords and the keyword type in them

    

3. Use these to plan the lists you need -- I'd suggest a Whole Account list of terms you'd never, ever want your ads to appear for, and then any more specific lists you need around those you have in AdGroups or only in some campaigns in the download

    

4. Rearrange the negatives in the download to populate these lists and save them

    

5. Add any additional terms that spring to mind, or you can find via search query reports or keyword tools

    

6. Save the master list(s) and then start adding them via the procedure above

    

7. Update your campaign build out process to include applying these lists to any new campaigns in future

Negative keyword lists will no doubt become a standard of AdWords campaign management -- hopefully Google will improve the interface over time and add support via AdWords Editor and the API, too

We at digology love negative keywords. We know that they are a great way to keep from spending your ad dollars on irrelevant traffic. But with a complex campaign, it is easy to have your negative keywords blocking traffic from your important keywords, so anything that makes negative keywords easier to manage is awesome in our book.

If you have questions about negative keywords or need help with your Google Adwords, Bing/Yahoo, Facebook, or LinkedIn pay-per-click campaign, feel free to contact beth@digologymarketing.com or deb@digologymarketing.com.

Brands and businesses are looking for ways to leverage Facebook’s recently unveiled Questions tool in ways that differ from what they’re already doing on Q&A sites such as Quora, Yahoo Answers and LocalMind.

The feature, which Facebook rolled out to all users March 24, functions as a recommendation engine. It also presents a major opportunity for businesses to conduct market research and crowdsource in a far more elegant way than was previously possible, according to Ben Grossman, communication strategist for marketing agency Oxford Communications.

“We know from Nielsen that recommendations from friends and family and the opinions of online strangers are the top two most trusted forms of advertising,” Grossman told Mashable. “Facebook Questions offers the perfect opportunity for brands to tap into exactly that.”

Businesses, groups and organizations can use Questions in several ways. For example, Grossman said:

• Ice cream parlors can find out what the flavor of the week should be.
• A gym can find out what time is best for its new hip-hop yoga class.
• Radio stations can determine the hottest concerts for the summer.
• Manufacturers can do a pulse check on fans’ holiday shopping plans.

“The best part about this is that it’s in a trusting, social and real-time setting,” he said. “The opportunity to gain instant feedback from a brand’s biggest fans is amazing.”

Fittingly, we had some more questions about Questions. Below, Grossman weighs in on the feature to help brands better understand the tool.

Mashable: How is Facebook Questions different than the Q&A tools already online?

Grossman: Though Questions certainly falls into a similar category as Yahoo Answers and Quora, there is are two very major differences:

• Answers to questions are not free-form; users are limited to multiple-choice responses.
• Questions (and their answers) are not catalogued by search engines at this time. Public Q&A sites like Yahoo Answers and Quora will still remain important for public-facing customer support and inquiries.

Mashable: How will Facebook Questions change the way users of Facebook Pages interact with their fans? Why is this important?

Grossman: Though third-party Facebook application development companies such as Involver and Wildfire have developed turn-key “poll” applications, many users were likely to get hung up on that pesky “Applications Permissions” box that demands access to users personal information.

Questions changes that. No permissions are required, and the Questions platform lets you answer and talk about questions with all your friends no matter if they’ve engaged with a third-party application before or not.

The other great thing about Questions is it comes with a setting that allows users to add more answers to the multiple-choice answers. This bit of flexibility will really and truly allow businesses to learn from their consumers — they just have to know the right questions to ask.

Questions also demands a higher level of fidelity to opinion statistics for brands. If brands bind themselves to the Questions platform to pose questions and they relate to the brand’s business, it’s going to be a lot clearer to all the fans what public opinion is. If the brand doesn’t follow through by acting on that opinion, Questions has a nice comment area that gives fans the perfect place to call a brand out on it.

Mashable: How have you or Oxford used Facebook Questions so far? How do you plan to use the feature in the future?

Grossman: Oxford Communications decided to test out the functionality and float this question out to our fans:

Within 15 hours, we had engaged 13% of our fanbase and had not only gained votes on answers we had given to the question; we also had fans suggesting (and voting for) new answers, including local couponing sites, LiveTVChat and more. For us, it was an opportunity to enjoy a high level of engagement with our followers, emerge as a thought leader and learn a little all at the same time.

The next frontier, after some additional testing, will be to activate Questions on behalf of our clients. Next month, we are planning on extending Legends Outlets Kansas City’s “Charity Check-In” program through use of Facebook Questions. On Legends Outlets Facbeook Page, Legends Outlets is currently encouraging its consumers to check-in with Facebook Places in order to trigger the brand to donate $1 to a pre-determined, local Kansas City charity.

Next month, the brand will be doing the same, but we will also be employing Facebook Questions to ask the fans what charities they would like to see appear as part of the ongoing Charity Check-In program. We’re excited to help Legends Outlets partner with the charities that mean the most to its fans, while raising their friends’ awareness of ways they can give back to the community.

Mashable: What was your initial reaction to the new Facebook Questions tool?

Grossman: Any time Facebook adds a new standard application to all user and business profiles, I get excited. When Facebook adds major new functionality like Questions, it stands to shift the social dynamic of over 500 million people, creating richer, more diverse and increasingly dynamic conversations.

Beyond the impact it will have on users, the widespread release of Facebook Questions is also emblematic of the continuing trend we’ve seen from Facebook: As soon as a new trend in social media begins to rise up, Facebook acts quickly and decisively. For those long-time Facebook users out there, Questions will hearken back to the days when Polls were far more common on Facebook. But this round of Q&A-based functionality released by Facebook is likely more of a direct response to the increasing popularity of up-and-coming sites like Quora and LocalMind.

What I love about Questions is how true it is to Facebook’s zeal for transparency and trust.

Will You Be Using Questions For Your Business or Brand?

How do you plan to use Facebook Questions for your brand, business, group or organization? Let us know in the comments.

Q&A sites are all the rage, so of course, internet marketers ask the logical question: how can we monetize this? Yahoo! and LinkedIn forged this new territory, which is now getting crowded with the likes of Quora and Facebook.

Has your company considered using Q&A sites in its social media strategy? How might this trend be leveraged for commercial gain without turning it into low-quality, spammy content?

Consumer attitudes differ across mobile devices.

Research to date on tablet advertising has typically found that placements that take advantage of the full features of the device—like video, 360-degree views, striking photos and interactivity—appeal most to users. An Adobe-sponsored study found flashy iPad ads were more engaging and effective than their static print counterparts, and earlier research from UM and Time Inc. indicated that videos were the most desired feature of iPad ads.

On smartphones, by contrast, users seem to prefer to keep it simple. A Pontiflex survey conducted by Harris Interactive found that very few smartphone users preferred ads that were like commercials or that featured video. Just 15% of all adults liked such ads on their phone, vs. 63% who preferred more basic coupons, deals or newsletters.

The Nielsen Company found in August 2010 that 40% of iPhone users were more likely to look at ads with an interesting video, significantly higher than the 15% in the Pontiflex survey. But Nielsen also found iPad owners were 9 percentage points more likely to say the same, and about 20 percentage points more likely to enjoy ads with interactive features or click on ads with multimedia events.

Smartphone users also like ads to keep things simple by leaving them within the app where the ad appeared. Pontiflex found 71% of all adult app users preferred this behavior, vs. ads that pulled them out to a web browser.

The Nielsen study found an identical 71% of iPhone owners had the same preference. iPad owners were somewhat more easygoing; 60% would rather ads did not take them outside an app.

These preferences suggest that while smartphones and tablets are both mobile devices, usage habits and preferences do not fully overlap. Smartphone owners are more likely to be on the go and task-oriented, compared with a more casual entertainment-based focus on tablets.

This great article by Jonathan Goldford, published on Mashable, takes you step-by-step through building your own Facebook page. Even if you don't have the tech skills to do it yourself, you can always give the article to your favorite designer. Bon courage!

Jonathan Goldford is a partner at JG Visual, an Internet strategy company that works with organizations to develop and implement their online presence. You can connect with Jonathan on the JG Visual Facebook Page.

Right now Facebook Pages and custom landing pages are bigger than bottled water was on December 31, 1999. Michael Jackson, Lady Gaga, Starbucks, and the TV show House each have more than fifteen million “Likes” and are growing rapidly.

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. Here we will discuss the subtleties of designing a Facebook landing page and FBML programming. To make this discussion more concrete, we’ll use the creation of our own JG Visual landing page as an example.

Designing Your Company’s Facebook Page

Actually designing a Facebook Page is very similar to designing any website, except for a few considerations:

• Design for a 520px Width — Facebook Pages must fit within a width of 520px. 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.
• 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. 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.
• 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. The Like button appears just right of the company name at the top of the landing page. If we’re going to point to the Like button, we need to figure out the pixel width from the left of our landing page to the start of our Facebook Like button.

 

 

To take into account the 520px width and the distance for your Like button, you may want to take a screenshot. Once you take a screenshot of your Facebook Page, pull it into a design program like Photoshop and design over it. Here is a look at a piece of our final Facebook Page design.

 

 

Programming Your Company’s Facebook Page

Now that we have a design we’ll walk through how to program our landing page to use on Facebook.

Begin Programming Outside of 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.

 

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/website-design.jpg?v=1.0" class="nospace" />

view raw gistfile1.txt This Gist brought to you by GitHub.

You’ll Publish Untested Code — Once you save changes, those changes will be live on your Facebook Page. You probably don’t want users seeing an unfinished or broken landing page.

Program the Page Without FBML

Since we aren’t going to be using Facebook to start programming, we can’t use Facebook’s Markup Language (FBML). In order to account for how Facebook will handle our code, we will adjust our code to follow these rules as we build our page.

• Use Plain Old HTML and CSS — Program your Facebook Page like you would any page using HTML and CSS. 90% of the code will act exactly the same way. The rest you can adjust when you move the code onto Facebook.
• Load CSS Externally — CSS should be loaded using an external style sheet file instead of using an internal style sheet. Internet Explorer 6, 7, and 8 can’t read internal style sheets on Facebook Pages.
• Host Files on Another Server — Every image, CSS file, Flash video, or other external file needs to be hosted elsewhere. Facebook will not host any files for you.
• Make All Paths Absolute — All paths to external files must be absolute. Write an image link like
  
  . Don’t write images/pictures.jpg.
• Remove Firefox’s 1 Pixel Gap — Mozilla Firefox creates a 1-pixel space between images on Facebook landing pages. Use a class with the style display:block to remove the space. In our code, we use the class “nospace” to implement this style.

To start, create one HTML and one CSS file. The HTML file will hold the HTML and eventually the FBML. The CSS file will hold all of your styles. We’ll call them facebook.html and facebook-styles.css.

Start by linking to the CSS file and creating a div with an ID of container. Give the container a width of 520px in the CSS. Also, if you want to brand your landing page a little better, you can choose a font. To override Facebook’s default paragraph style, we added a font-family style for #container p. Finally, Facebook uses a default font size of 11px and a font color of #333. 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.

facebook.html

<link href="facebook-styles.css" rel="stylesheet" type="text/css" />

<div id="container">

</div>

 

view raw gistfile1.txt This Gist brought to you by GitHub.

facebook-styles.css

@charset "utf-8";

#container {

width: 520px;

font: 11px Arial, Helvetica, sans-serif;

color: #000;

}

#container p { font-family: Arial, Helvetica, sans-serif; }

view raw gistfile1.txt This Gist brought to you by GitHub.

Create the remaining HTML and CSS for your Facebook landing page. Here is the code we have after finishing our page. At this point our landing page should look exactly how we presented it in the design instructions before.

facebook.html

 

<link href="facebook-styles.css" rel="stylesheet" type="text/css" />

 

<div id="container">

<img src="images/like-text.gif" class="nospace" />

 

  <div id="service-areas">

    <p>

    Web Design &#8226; Web Development &#8226; Photography &#8226; Video Production &#8226; Copywriting &#8226; Social Media &#8226; Search Engine Optimization &#8226; Search Engine Marketing

    </p>

    </div>

 

  <div id="service-area-links">

     <div class="service-area"><p>web design</p><a href="http://www.jgvisual.com/web-design/">

<img src="images/website-design.jpg" class="nospace" /></a></div>

        <div class="service-area"><p>portraits</p><a href="http://www.jgvisual.com/st-louis-portrait-photographers/">

<img src="images/portraits.jpg" class="nospace" /></a></div>

        <div class="service-area"><p>locations</p><a href="http://www.jgvisual.com/st-louis-location-photographers/">

<img src="images/locations.jpg" class="nospace" /></a></div>

        <div class="service-area"><p>events</p><a href="http://www.jgvisual.com/st-louis-event-photographers/">

<img src="images/events.jpg" class="nospace" /></a></div>

    </div>

 

 

    <div id="testimonials">

    <h2>Testimonials:</h2>

 

    <p>"JG Visual delivered exactly what they promised, a website that was appealing, user friendly and informative. Coincidentally those were our goals when we began looking for a website designer. <strong>JG Visual was very easy to work with and they kept us on schedule with little bloodshed.</strong> I would recommend this team whole-heartedly."

    <em>- Tim Brown, Vice President/General Manager, Zip Mail Services, Inc.</em>

    </p>

 

    <p>"JG visual made the process of editing and launching a website easy and seamless. <strong>In addition to delivering everything on time and on budget, they found innovative ways to improve the site we hadn't found ourselves.</strong> We hope to have the occasion to work with the JG Visual team again soon."

    <em>- Max Slavkin, Partner, Big New Ideas</em>

    </p>

 

    <p>"I hired JG Visual to develop my website and they far exceeded my expectations. <strong>After an exhaustive search for the right web designer, I found JG Visual to be a breath of fresh air.</strong> They were organized, professional and very personable as we jointly developed my website. There were often times throughout the process that they made recommendations that positively impacted the overall design. Quite simply, they "get it"! I would definitely hire JG Visual again and plan to continue growing my online presence with the firm."

    <em>- Lorie Burkemper, Founder, iSymplify</em>

    </p>

 

    <p>"From our first meeting, the staff at JG Visual was professional, organized, and prepared to work with us as a team. Hearing our own vision, they helped us achieve it in a timely, efficient manner. <strong>Their warmth and approachability resulted in excellent customer service skills, and I would strongly encourage colleagues and also friends to use their services.</strong> JG Visual made the process of building a website actually fun and enjoyable."

    <em>- Christan Perona, Director of Admissions, Central Christian School</em>

    </p>

 

    </div><!-- testimonials -->

 

    <div id="awards">

    <h2>Awarded:</h2>

 

    

 

  </div>

</div>

 

view raw gistfile1.txt This Gist brought to you by GitHub.

facebook-styles.css

 

@charset "utf-8";

#container {

width: 520px;

font: 11px Arial, Helvetica, sans-serif;

color: #000;

}

#container p { font-family: Arial, Helvetica, sans-serif; }

a img { border: none; }

.nospace { display: block; }

.image { margin: 0 auto; }

h2 {

font-size: 1.6em;

font-weight: bold;

color: #ff9200;

font-family: Georgia, Arial, Helvetica, san-serif;

}

strong {

color: #ff9200;

font-weight: bold;

}

em { font-style: italic; }

#service-areas {

background-color: #000000;

padding: 20px 57px 97px 17px;

}

#service-area-links {

margin: -102px 0 0 0;

height: 1%;

}

.service-area {

float: left;

margin: 0 7px;

display: inline;

}

.service-area p { font-size: 1.25em; }

.service-area p a {

color: #ff9200;

text-decoration: underline;

}

.service-area p a:hover { text-decoration: underline; }

#service-areas p { color: #ffffff; font-size: 1.5em; }

#testimonials p, #awards p { font-size: 1.2em; }

#testimonials em {display: block; }

view raw gistfile1.txt This Gist brought to you by GitHub.

Test the landing page in all the browsers at this point to make sure it appears correctly. You really should test the page throughout building, but this serves as a good reminder.

Add in the Necessary FBML

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. 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. This way, once someone Likes the page, they won’t be prompted to do so again.

Regular HTML

<img src="images/like-text.gif" class="nospace" />

view raw gistfile1.txt This Gist brought to you by GitHub.

HTML with the FBML Conditional Statement

<fb:visible-to-connection>

  <fb:else>

<img src=”images/like-text.gif” class=”nospace” />

  </fb:else>

</fb:visible-to-connection>

view raw gistfile1.txt This Gist brought to you by GitHub.

Let me explain the code:

• fb:visible-connection — This code checks to see if the user has Liked the page before. If the user has Liked the page then the content inside will appear.
• fb:else — In this case fb:else will display only to users who haven’t Liked the page. That is why we put the call to action inside the else statement. Also, unlike typical else statements, fb:else is placed inside the other conditional.

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.

Adding the User’s Name — fb:name

Fb:name will display the full name of the logged in user. For example, if a user named John Smith comes to your page the code below will display “John Smith”. This can be used to greet a user by name when they come to your landing page.

 

<fb:name uid="loggedinuser" useyou="false" />

view raw gistfile1.txt This Gist brought to you by GitHub.

Adding the User’s Profile Picture — fb:profile-pic

Fb:profile-pic will display a user’s profile picture if they come to your landing page. For example, the code below will display the current user’s profile picture at 64px by 64px.

 

<fb:profile-pic uid="loggedinuser" width="64" height="64" />

view raw gistfile1.txt This Gist brought to you by GitHub.

Adding a Share Button — fb:share-button

Fb:share-button will display a share button that allows users to share a link on their own profiles. For example, the code below will display a basic share button for Mashable.

 

<fb:share-button href="http://www.mashable.com" />

view raw gistfile1.txt This Gist brought to you by GitHub.

Adding a YouTube Video or SWF File — fb:swf

Fb:swf will display an image that when clicked will show a video. For example, the code below will display the thumbnail used for The Social Network movie trailer. When that image is clicked, the trailer’s YouTube video will automatically play.

Unfortunately, Facebook requires that the image be clicked before the video will play. You can create your own image to show through the imgsrc parameter. 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.

If you want to add your own YouTube video, replace the text in the parameters swfsrc and imgsrc where it says “1B95KLmpLR4” with the ID of the YouTube video you want. You can find the ID in the URL of any YouTube video after the text .

 

<div class=”video”>

<fb:swf

  swfbgcolor="000000"

  imgstyle="border-width:3px; border-color:white;"

  swfsrc='http://www.youtube.com/v/lB95KLmpLR4?autoplay=1'

  imgsrc='http://img.youtube.com/vi/lB95KLmpLR4/2.jpg'

  width='340' height='270' />

</div>

view raw gistfile1.txt This Gist brought to you by GitHub.

Adding an FLV file — fb:flv

Fb:flv will display a video player for FLV files. For example, the code below will display a play button that you click to play the FLV video. fb:flv provides the player and all the controls. All you need is the FLV file.

 

<fb:flv src='http://www.mediacollege.com/video-gallery/testclips/barsandtone.flv' width='400' height='300' title='my movie' color='#FFBB00' salign='r' img='http://www.example.com/test.jpg' scale='showall'/>

view raw gistfile1.txt This Gist brought to you by GitHub.

Adding an MP3 File — fb:mp3

Fb:mp3 will display and play an MP3 music file. For example, the code below will display a music player that users can click to play. The player will then rotate through a display of the song title, song artist, and the album name.

 

<fb:mp3 src="http://www.jgvisual.com/music/file.mp3" title="Song Name" artist="Song Artist" album="Album Name"/>

view raw gistfile1.txt This Gist brought to you by GitHub.

Adding a Form

While adding a form is not FBML, people are often curious to learn how to place them on their Facebook landing pages. To do this, copy and paste your form code into the FBML submission box. Make sure you use the following code to start your form:

 

<form method=”post” action=”http://www.url.com” target=”_blank”>

view raw gistfile1.txt This Gist brought to you by GitHub.

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

Adding JavaScript

Adding JavaScript is outside the scope of this article, but you can learn more about Facebook JavaScript at developers.facebook.com/docs/fbjs. As of right now, you should remember that JavaScript will not be activated on your landing page until the user has taken action.

If you haven’t found the FBML you’re looking for, visit Facebook’s Official FBML page.

Publishing Your Company’s New Facebook Page

After adding all of our FBML, we’re ready to add those final touches and publish our finished Facebook landing page.

Uploading External Content, Adjusting Links, and Adding a Version Query String

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. To host your files, we recommend using your website’s server if possible.

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. Previously I mentioned that Facebook caches all of your external files. This means that once you publish your Facebook Page, any changes you make to external files will not show on your landing page. This happens because Facebook doesn’t know the file has changed and is loading its older saved version. 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. Facebook then thinks we’re using a different file and loads it up.

Old Relative Path with No Version Query String

 

<img src="images/website-design.jpg" class="nospace" />

view raw gistfile1.txt This Gist brought to you by GitHub.

New Absolute Path with the Version Query String

 

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/website-design.jpg?v=1.0"

class="nospace" />

view raw gistfile1.txt This Gist brought to you by GitHub.

Test Your Page Using the JavaScript Test Console

One of the biggest disadvantages of Facebook landing pages is that Facebook provides no place for you to test your code. We have to use the Facebook JavaScript Test Console.

Copy and paste your HTML into the JavaScript Test Console and click “Run Code.” You’ll get to see your code in action. If everything looks good, you’re ready to publish your finished Facebook landing page. If not, make sure to check the links to your external content. 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.

Publish Your Finished Facebook Landing Page

Finally, you are ready to publish your HTML file to the Edit FBML screen. Follow these steps:

• Click “Edit Page” on your Facebook Page.
• Click “Apps” on the left side of the page.
• Under the FBML section click “Go to App.” If you don’t see this, please add the “Static FBML” application to your Facebook Page.
• Copy and paste your HTML code into the FBML box.
• Title your FBML. This will show up in the tab at the top of the landing page. While you may want to use “Welcome,” remember that those who Like you will not land on this tab. Instead they will land on your wall and will see another tab that says “Welcome” at the top. We used “Who We Are.” Hopefully you can think of something more creative.
• Click “Save Changes.”
• Go view your Facebook landing page.

Make Your New Landing Page the Default Landing Tab

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. This way, when someone that has not Liked your page comes to it, they will be taken to your custom landing page instead of your wall. Here’s how to do it:

• Click “Edit Page” on your Facebook Page.
• Click “Manage Permissions” on the left side of the page.
• Beside “Default Landing Tab,” use the drop-down menu to select the title of your new landing page.
• Click “Save Changes.”

Note that as an admin you will always see the content that you only want shown to those who haven’t Liked your page. Check with someone who has Liked your page and is not an admin to make sure they only see the content that’s meant for them.

Congrats, You’re Finished!

Nice work. You’re done. In case you need it, here are the final HTML, FBML, and CSS we used for our Facebook landing page.

HTML and FBML

 

<link href="http://www.jgvisual.com/wp-content/uploads/facebook/facebook-styles.css?v=1.00" rel="stylesheet" type="text/css" />

<div id="container">

<fb:visible-to-connection>

<fb:else>

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/like-text.gif?v=1.0" class="nospace" />

      </fb:else>

</fb:visible-to-connection>

    <div id="service-areas">

    <p>

    Web Design &#8226; Web Development &#8226; Photography &#8226; Video Production &#8226; Copywriting &#8226; Social Media &#8226; Search Engine Optimization &#8226; Search Engine Marketing

    </p>

    </div><!-- service-areas -->

    <div id="service-area-links">

     <div class="service-area"><p>web design</p><a href="http://www.jgvisual.com/web-design/">

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/website-design.jpg?v=1.0" class="nospace" /></a></div>

        <div class="service-area"><p>portraits</p><a href="http://www.jgvisual.com/st-louis-portrait-photographers/">

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/portraits.jpg?v=1.0" class="nospace" /></a></div>

        <div class="service-area"><p>locations</p><a href="http://www.jgvisual.com/st-louis-location-photographers/">

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/locations.jpg?v=1.0" class="nospace" /></a></div>

        <div class="service-area"><p>events</p><a href="http://www.jgvisual.com/st-louis-event-photographers/">

<img src="http://www.jgvisual.com/wp-content/uploads/facebook/images/events.jpg?v=1.0" class="nospace" /></a></div>

    </div><!-- service-area-links -->

    <div id="testimonials">

    <h2>Testimonials:</h2>

    <p>"JG Visual delivered exactly what they promised, a website that was appealing, user friendly and informative. Coincidentally those were our goals when we began looking for a website designer. <strong>JG Visual was very easy to work with and they kept us on schedule with little bloodshed.</strong> I would recommend this team whole-heartedly."

    <em>- Tim Brown, Vice President/General Manager, Zip Mail Services, Inc.</em>

    </p>

    <p>"JG visual made the process of editing and launching a website easy and seamless. <strong>In addition to delivering everything on time and on budget, they found innovative ways to improve the site we hadn't found ourselves.</strong> We hope to have the occasion to work with the JG Visual team again soon."

    <em>- Max Slavkin, Partner, Big New Ideas</em>

    </p>

    <p>"I hired JG Visual to develop my website and they far exceeded my expectations. <strong>After an exhaustive search for the right web designer, I found JG Visual to be a breath of fresh air.</strong> They were organized, professional and very personable as we jointly developed my website. There were often times throughout the process that they made recommendations that positively impacted the overall design. Quite simply, they "get it"! I would definitely hire JG Visual again and plan to continue growing my online presence with the firm."

    <em>- Lorie Burkemper, Founder, iSymplify</em>

    </p>

    <p>"From our first meeting, the staff at JG Visual was professional, organized, and prepared to work with us as a team. Hearing our own vision, they helped us achieve it in a timely, efficient manner. <strong>Their warmth and approachability resulted in excellent customer service skills, and I would strongly encourage colleagues and also friends to use their services.</strong> JG Visual made the process of building a website actually fun and enjoyable."

    <em>- Christan Perona, Director of Admissions, Central Christian School</em>

    </p>

    </div><!-- testimonials -->

    <div id="awards">

    <h2>Awarded:</h2>

    

    </div><!-- awards -->

</div><!-- container -->

view raw gistfile1.txt This Gist brought to you by GitHub.

CSS

 

@charset "utf-8";

#container {

width: 520px;

font: 11px Arial, Helvetica, sans-serif;

color: #000;

}

#container p { font-family: Arial, Helvetica, sans-serif; }

a img { border: none; }

.nospace { display: block; }

.image { margin: 0 auto; }

h2 {

font-size: 1.6em;

font-weight: bold;

color: #ff9200;

font-family: Georgia, Arial, Helvetica, san-serif;

}

strong {

color: #ff9200;

font-weight: bold;

}

em { font-style: italic; }

#service-areas {

background-color: #000000;

padding: 20px 57px 97px 17px;

}

#service-area-links {

margin: -102px 0 0 0;

height: 1%;

}

.service-area {

float: left;

margin: 0 7px;

display: inline;

}

.service-area p { font-size: 1.25em; }

.service-area p a {

color: #ff9200;

text-decoration: underline;

}

.service-area p a:hover { text-decoration: underline; }

#service-areas p { color: #ffffff; font-size: 1.5em; }

#testimonials p, #awards p { font-size: 1.2em; }

#testimonials em {display: block; }

 

view raw gistfile1.txt This Gist brought to you by GitHub.

Since there is no one correct way to program a landing page, we would love to hear what you think. Have you ever designed or programmed a Facebook landing page? How did it go? Did you run into any issues? Do you have any additional tips we didn’t cover here? Let us know in the comments.

smemon87

 

Tom Friedman talks about how, for green energy alternatives to work, they have to make economic and financial sense in the short term. Is he too idealistic to think that the U.S. could actually be a leader in alternative energy and environmentalism? (About 6 minutes long.)

What digology is thinking about now: how principled business can be more profitable. Tom Friedman and Dove Seidman talk about how bringing values of sustainability to our decision-making impacts both our financial markets and Mother Nature.

What does this have to do with small business? Sustainable values are about focusing on how to be, not how big to be. In this new world, a focus on creating value for all stakeholders instead of just for shareholders can actually create a stronger business model.

Foursquare Launches New Business Pages

Today, Foursquare revamped its Foursquare For Business page, complete with tools for merchants, venues and brands. The new pages include guided walkthroughs of how to set up a business using Foursquare, as opposed to the metrics that they provided before.

Foursquare’s tools are meant to help businesses owners attract new customers and maintain loyalty.

Specials create extra enticement to get customers to stop by – think 20% off a meal, a free dessert, or even a reserved parking spot for your most loyal customers. Specials can be tailored to fit your needs, whether it’s a unique discount for first-time customers or rewards for the 10th visit. -Foursquare

For brands, Foursquare offers engagement tools such as badges, and a way to get messages out to followers through tips and promos. Brands such as Starbucks, Sports Authority, the Museum of Modern Art, Bravo TV, Louis Vuitton, The New York Times, Havaianas, Microsoft Windows Live, the History Channel, Syracuse University, Red Bull and NASA have all partnered with Foursquare.

Whether you’re a restaurant, a yoga studio or a “moving target” coffee truck, Foursquare is one of the most trendy ways to boost your business right now.

Thanks to @ChadCat!

Sources: Panoramico

About the Author

Courtney Boyd Myers is the East Coast editor of TNW, based in NYC. She began her career writing about robots @ Forbes and has also written for PCMag, PSFK, IEEE Spectrum, the Huffington Post + Pocket-Lint. She loves magnets + reading on her Kindle. You can follow her on Twitter or e-mail her at Courtney@TheNextWeb.com.

Story Toolbox

Know more about this story? Email us!
Short URL + Title:

Another chapter in the increasingly-thrilling "Local Internet Marketing" saga! Stayed tuned...