Category: HTML/CSS

Better Facebook statuses with links

Facebook / HTML/CSS / social media / techblog
18 Jan, 2012
2

Having links, photos or videos in your Facebook status updates is shown to increase engagement by your fans. When there is more than just a plain text status update you are more likely to capture your audience’s attention and stand out in their news feed if you have an interesting visual element.

Facebook auto-generates a thumbnail or small image preview when you include photos or videos in your status updates. If you are linking to a webpage in your update (which you can do by simply pasting the URL into your status), Facebook will create a preview of that link to include with the status by looking on that page for a suitable title, description and image to use as the thumbnail. The title and description of the preview typically come from the page title and the first bit of content on the page. The image is pulled from anywhere on the page that Facebook thinks is a suitable image. If there are no images found on the page you are left with just text, which is not as intriguing for your fans.

You can assure that there’s always an image to include by using one of two methods: adding an “image_src” link tag to the head of your HTML document, or by including an appropriate image on the page (this can either be included to supplement the content of the page or hidden from view with a bit of CSS styling).

The syntax for adding the image_src link is:

<link rel="image_src" href="http://site.com/image.jpg" />

By including this code in your HTML header you are telling Facebook to use this, and only this, image for your page. This is useful if you want to enforce consistency when folks link to your site by having the same logo or photo associated with your links. However, the side effect here is this will restrict a user from selecting any other image on your page (if there are any available) as the thumbnail for the link.

The second option is to have an image in the body of your page somewhere, either in the content or hidden from view on the page. This allows you to have both a “default” image to use if there isn’t one available on the page, and to allow selecting a more appropriate image from the content if it is available.

If you do not want to show the image you can hide it with:

style="display: none;"

added to your HTML image tag, this will hide the image from view in the browser, but allows Facebook to still see the image and include it for use as a link thumbnail.

Bonus Tip: You can trick Facebook into having two links in one status update by pasting the URL of the first link into your status update, adding a space at the end so Facebook recognizes it as a link and adds the preview, then you can delete that URL, compose the rest of your status update, and paste in a second supplementary URL.

More

A few custom Facebook tab creation tidbits

Facebook / HTML/CSS / Javascript / social media / techblog
9 Aug, 2011
0

In March Facebook decided to deprecate their Facebook Markup Language (FBML) which is used to create custom applications (tabs) for your Facebook Pages. In its place developers are to use standard HTML, CSS and Javascript (particularly the Facebook Javascript SDK) via an iFrame embedded in the Facebook tab (Goodbye Static FBML, Hello iFrame). Apps that were written using the old FBML will still work but from now on any new applications must use iFrames.

A few months back a university office wanted to have custom Facebook tabs on their page so I began delving into the land of “custom apps.” The first thing to remember is “tab” and “app” are pretty much synonymous. Even if you’re just creating a splash page it’s still considered an “app” and it will show up in your page’s sidebar under your profile picture.

Before you can get started creating your app you need to go to http://www.facebook.com/developers/ and register as a developer. Once you are registered, check out a tutorial or two. The best article I came across for creating an app is: iFrames for Facebook Part 1: How to Implement and then for tracking your results and analytics: iFrames for Facebook Part 2: How to Track

Sneaky Scrollbars

You are given a 500px by 800px area to embed your app in by default. One of the main things I wanted to avoid was having scrollbars show up on the iFramed page, as the idea was to have an app look as native as possible and scrollbars definitely detract from that. After a bit of Googling (by the way, if you have a Google account and go to google.com/history you can see all of your search history for any given day, useful, but also a bit creepy) I came upon a few pointers and these successfully hide the scrollbars in IE7+, Safari/Chrome, and Firefox:

You need to use Facebook’s Javascript SDK and call “setAutoResize” on your page so that Facebook can detect that it needs to change the size of the page, so put this bit of code right after the opening <body> tag:

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
    FB.init({appId: '165750806819048', status: true, cookie: true, xfbml: true});
    FB.Canvas.setAutoResize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
    FB.Canvas.setAutoResize();
}

(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
</script>

Set the width of the page to be embedded in the iFrame to be 500px wide to avoid any horizontal scrollbars (Facebook iFrame Apps – Getting Rid of Those Scrollbars)
Make sure to set “IFrame size” to “Auto-resize” when creating your app (also from Facebook iFrame Apps – Getting Rid of Those Scrollbars)
Be careful resorting to “overflow: hidden” on your embedded page, it works to hide your scrollbars in Safari/Chrome but not Firefox. The downside to not using the overflow property is you’ll get a flash of a vertical scrollbar before the Javascript finishes running, but otherwise you may get stuck with an unscrollable page so the tradeoff (I believe) is worth it.

Spreading the word

The client also wanted to have “Like” and “Share” buttons in their app and these are pretty straightforward. There is no longer an explicit “Share” button offered by Facebook, however they do offer code to generate a “Like” button. The main thing to remember here is to utilize the Facebook markup offered with the Open Graph protocol. Using their protocol you can control what Facebook uses for the thumbnail, title, website, description, etc. when a user shares/likes your content.

To simulate the “Share” button you can use Facebook’s Feed Dialog, which does not require the user to accept any extended permissions as it does not automatically post to their profile’s Facebook feed (in general, I personally avoid any apps that require you to authorize them to have access to your account when there isn’t any reason for them to have it). To use the Feed Dialog you create a link with a series of URL-encoded parameters to customize exactly what will show up on a user’s wall when they post a link to your site. Once the link is there you can mimic the styling of a Facebook button with the following CSS:

#fb_share_button {
    color: #3B5998;
    border: 1px solid #CAD4E7;
    background-color: #ECEEF5;
    padding: 2px 5px;
    text-decoration: none;
    display: block;
    width: 37px;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    float: left;
    margin-right: 15px;
    height: 14px;
    line-height: 14px;
}

#fb_share_button:hover {
    background-color:#ebedf4;
    border-color:#9dacce;
}

So there you have it, a pretty simple way, with a bit of HTML/CSS know-how, to create a custom Facebook tab.

More

Image placeholders for your website mockups

HTML/CSS / techblog
11 Apr, 2011
0

This is a nice way to ease into the week (courtesy of an afternoon article in NetTuts+). Rather than using boring solid-color boxes as placeholders in your website mockups here are two (cute!) alternatives: placekitten (my personal preference) and PlaceDog. For either one you just put your image dimensions (width & height in pixels) after their URL and you’ll get a placeholder image (so something like: http://placekitten.com/200/160)

PlaceKitten Sample (200x160)

PlaceDog Sample (200x160)

Or for a slightly more serious version, you can pull themed images (based on tags) from Flickr with flickholdr.com

FlickHoldr Sample (200x160, ocean)

More