The requirements:
- Keep box height and width the same
- Keep font size the same
- Incoming string lengths vary
- Add “ellipses” if strings are too long, cut off at readable point (between words)

This simple idea is actually quite trickier than we thought.

newPseudoImage()

This method is very handy. With the “caption” prefixing the string, ImageMagick renders the text as an image, problem is that the font size is determined by the best fit.

setBackgroundColor("transparent");
$words->setOption("fill","white");
$words->newPseudoImage($x,$y, "caption: ".$text); 

$im->compositeImage($words, Imagick::COMPOSITE_OVER,0,0);
$im->setImageFormat( "png") ;
header( "Content-Type: image/png" );
echo $im;
?>

AnnotateImage()

The old school way is to use ImageMagick’s AnnotateImage() method. This allows you to create a drawable object with static font size. Yay! But you have to provide it with a string that is already short enough, otherwise the words will scroll right off. Note use of “wordwrap()” method to create new lines at a certain character point. I hard-coded this as 15, based on trial and error. More on this later.

newImage($x,$y,new ImagickPixel("blue"));

$draw = new ImagickDraw();
$draw->setFillColor("white");
$draw->setFontSize("12");
$im->annotateImage($draw, 10,14,0,$text);

$im->setImageFormat( "png") ;
header( "Content-Type: image/png" );
echo $im;

?>

So, we’re almost there. To further leverage wordwrap(), we need to know the character length of the box. To cut the string properly, we need to know how many rows are in the box. Using those, we can snip it appropriately and add the ellipses. There’s still one more handy method in our arsenal. Introducing…

queryFontMetrics()

This method gives you pixel lengths based on a string and a font. With this information we can create either an average character length in pixels, or a ratio that we can apply to the long string, i.e. our string is 3x as big as required, cut it in thirds.

newImage($x,$y,new ImagickPixel("blue"));

$draw = new ImagickDraw();
$draw->setFillColor("white");
$draw->setFontSize(10);

$metrics = $im->queryFontMetrics($draw, $text);

/* how many rows in box? */
$rows = round($y/$metrics['textHeight'])-1; /* less 1 for vertical padding */

/* extend to one long row to compare with metrics */
$single_status_px = $rows * $x;

/* create shorter string by applying ratio */
$px_ratio = round($single_status_px / $metrics["textWidth"],2);
$status_length_char = strlen($text);
$cutoff_char_point = round($status_length_char * $px_ratio);
$short_string = substr($text,0,$cutoff_char_point);

/* cutoff last element, which could be a partial word, and add ellipses */
$words = explode(" ",$short_string);
array_pop($words);
$short_string_final = implode($words, " ");
$short_string_final .= "...";

/* make new lines and add to image */
$short_string_final = wordwrap($short_string_final, round(strlen($short_string_final)/$rows));

$y2= $metrics['textHeight'] + 3;
$im->annotateImage($draw,3,$y2,0,$short_string_final);

$im->setImageFormat( "png") ;
header( "Content-Type: image/png" );
echo $im;
?>

Review

So the solution is a series of steps. First, queryFontMetrics() to find pixel length with applied font, create ratio to dynamic string, use PHP’s wordwrap() function to gracefully find a cutting point, and then use annotateImage() to output the text to the image.

As you can see, it needs some improvement. Getting queryFontMetrics() on each line is CPU intensive (IM calls are) especially if it’s in a loop, adding characters to fill a slotted width. I also played with getting an average character width, but that resulted in uglier results than this.

More Reading

ImageMagick Test Functions
Mikko’s blog post on Typesetting
GD’s imagettfbbox() method is very similar to queryFontMetrics()

So the term app comes from “application”, and we all know you don’t really have any kind of fun in applications. You write term papers in one. Or, worse, it’s the software that pops up when I hook up my scanner.

Applications have:
- state (They keep track of the user and preferences, the last thing you did here.)
- navigation, the “back button”
- menu items (functions like edit, etc.)

I can’t think of one application that has gone viral on Facebook.

Most of us play games on Facebook. Games have:
- state (They keep track of the user and preferences, the last thing you did here.)
- levels, progression
- leaderboard

While games have very high and repeated usage, I wouldn’t say they’re viral. Collaborative gaming, though, with its repeated share opportunities, could be viral (but sometimes are just spammy).

Our version of apps are more about experience and engagement. We leverage the Social Graph to create an insight for the user and the brand. It’s an enhanced use of Facebook to explore commonality. The best terms, so far, are a double-word combinations: social project, branded engagement, or marketing engagement. I know, it’s not ideal. It’s like a marketing campaign, with social data, for a specific client.

The strength in not having, nor wanting, to serve users with menus and navigations, is that we can get across a simple idea faster, which results in more virality. We’ve learned that, because perhaps the minimal landscape and canvas, that you really need to limit the options for users. Basically one image, one button, one graphic. You’re nested in a highly complex interface already, so keep it simple.

This style of modular design isn’t new, and is quite popular in mobile, too. As Facebook becomes increasingly mobile- at last glance 40% of our users for one client was on mobile- apps have to become more and more un-application-like.

Social media has turned this channel dynamic upside down. Brands who are successful on social have learned that it’s not about blasting out their message, but engaging and connecting with people on an individual and emotional level.  (You can find some basic resources on best practices for publishing on the social web at Buddy Media’s White Papers resource center)

One example of this comes from the Edelman Digital 8095 report, where Michael Penman, senior director of global marketing at Levis Strauss recognized this new genre of customer influence:

“We have to let go a lot. As a brand, I think we were a company, among others, who felt that tight control of the brand and saying what our voice is was crucial up until probably a couple of years ago. We’re essentially a brand now that is based on co-creation, self-expression, and originality”

Another way to look at co-creation, self-expression and originality is telling the brand story through the lens of the customers. This approach humanizes a brand by adding an authentic voice that individuals connect with. Paul Adams, a thought leader on the social web, inventor of google circles and a currently working with Brands on Facebook wrote a book called  “Grouped: How small groups of friends are the key to influence on the social web. ” He describes fundamentally how proliferation of content works on the social web.

“When we think about how information spreads, we need to understand that the only way it can pass between these independent groups of friends is through the unique individual who connects them. In other words, the only way information can spread through a large population is through many regular people just like you.”

Co-created, user generated or brand generated content from the lens of customers, bloggers, musicians, photographers, stylists and other participants foster the connection between the individual and a brand. Taking this sort of approach will produce naturally engaging content that will be will be well received by your audience as well as gain prominence via Facebook’s Edgeranker. Here are a few examples of content from Levi’s* that help tell the brand story through the lens of a customer.

*Disclaimer: Levi’s is a client

Where YOUR_URL is the canvas url – the real site of the app on your domain (not the path in Facebook).

More info: Apps on Facebook- Page Tabs.

I posted this because I’m always searching for this link, and thought I’d increase the chances of finding it simply and easily by blogging about it!

The biggest takeaway is the shift in focus from advertising to stories. Mike Hoefflinger, Director of Global Business marketing highlighted the difference between advertising and stories in his keynote.  He talked about how throughout history stories have always been fundamental to human interaction. But brands weren’t able to engage in storytelling at the necessary scale that modern business required. This bore the genesis of advertising. With Facebook’s growth to a network of 800 million people, they have fostered enough connections so that brands can evolve back to organic story telling. When you engage in story telling versus advertising, you allow your customers and advocates to tell the brand story through their unique personal lens.

You can see this vision of stories integrated into how their new advertising products work. All premium ads are built directly off of the stories published on the brand’s Timeline. These ads can appear on the desktop and mobile news feed as a natural part of the core Facebook user experience and not just a side bar. These are stories and not ads.

So how do you create compelling stories? A brand must think about the types of content that drive people to share with others. This concept was important enough to have another keynote on “what people share.”  At Momentus Media, we’ve dedicated the past couple years to understanding sharing and virality and as a result have built applications that have been installed over 100 million times.  From a brand perspective, the crux is understanding the intersection between what people share and your brand attributes.

If you have questions, comments, criticisms or want to learn more ping me at rob@momentusmedia.com

After months of discussion with Facebook and internally, we decided we wanted to join Facebook in some way. The opportunity of applying all of our learnings to a product of such scale was hard to pass up. Also important to us was being able to continue growing Momentus. The set-up we came to was that Carina, my co-founder, would lead the Momentus team in building awesome social apps, and I (Chris) would move to Facebook to help lead growth projects.

This means Momentus clients will still be able to release chart-topping social apps, and I will be able to apply everything I have learned at Momentus working at Facebook.

The science behind sharing is in its infancy. With this new opportunity, we push forward in our mission to help define how it all works.

RESULTS: 

• 60,000 users in under once month

- Android Marketplace - for Droid

- iPhone- in iTunes

Demo of Android app

Our data set is 8 different apps totalling 67,000 installs over a 30 day period.

Comparing CTR

CTR (click through rate) shows how often people click on stories they see in feeds, so the calcuation is CTR = Clicks/Impressions. We see an average click rate of 0.03% for Ticker and 2.94% for Newsfeed. Newsfeed has 98x higher CTR than Ticker.

Comparing Total Referral Traffic

We then analyzed how much traffic was sent from Newsfeed and Ticker. We totalled up all the Story Clicks for all apps. During the 30 day period, Ticker gave 562 clicks and Newsfeed gave 64,017. Newsfeed is sending 114x more traffic than Ticker.

Notes

The apps we analyzed are not Open Graph enabled, so the only ticker stories they create are “App Used” stories, like this:

Stories like “Chris read Lindsay Lohan arrested!” could receive higher click rates. Additionally, “App Used” stories will only appear in the “Apps Ticker” which is shown while users are in the App Canvas. Open Graph created stories would appear on Facebook.com. Once we have an app with significant Open Graph stories created, we’ll do an analysis on this too.