Blog Home

Connect with us

Social Networking Web Design

June 02 2010

How to style the Facebook Like Box using CSS.

Tagged Under : , , , , , , , ,

Now that Facebook has crossed the 500,000,000 user mark (that just looks like too many zeroes, doesn’t it?) its even more important to get out there and brand your organization properly.  This means using the “Like” box on your blog, your website, or basically anywhere you publish content online.  Today, I’ll show you how to style the “Like” box using common CSS tags and the Facebook Like Box Form.

You’ll need:

CSS Edit
Facebook Like Box Form

and fill out the info you want.

Click Get Code:

Copy the URL that the iFrame option gives out and load it up in css edit

Select an element and open up it’s respective stylesheet.

Style the elements that you want and paste them into a new stylesheet.
Save this style sheet on a remote server.

In order to reference your new stylesheet you are going to have to use a little FBML. Go back to the “Get Code” dialog box and copy the XBML snippet.

Replace ‘like-box’ with ‘fan’

Add your css url to it and voila!

Example:

<fb:fan profile_id=”1855986685″ stream=”1″ connections=”3″ width=”190″ height=”480″ css=”http://www.yoursite.com/style.css?2“></fb:fan>

Be sure to add “?” and a number at the end of the URL. Facebook caches the stylesheet. Adding the ? and number allows to see your changes.

Finale.

Follow the directions on how to enable XFBML on your site and paste in your short-code for the like-box and you’re done!

Note: So far i haven’t figured out how to do this using the frame method.

February 10 2010

5 Easy Tips to Customize and Navigate the NEW Facebook Layout.

Tagged Under : , , , , , ,

Facebook has been working diligently, usually behind the scenes with quick glimpses of new features, to renovate and refine the experience of how you find information in the world’s largest social network at 400 MILLION users. The company celebrated its 6th birthday this week with a newly updated home page designed to give you quick access to the most important information across the top and in the left sidebar.  The bottom navigation is almost gone entirely, bringing all controls “above the fold,” and clearly visible regardless of your monitor size.

Let’s take a look at Facebook with five quick and easy tidbits of information that could make your transition to the new Facebook layout a little smoother.

1.  Stay UPDATED from the Top Menu

Quoting directly from Facebook’s blog: “In the top menu, you will find your newest Notifications, Requests and Messages. For example, when you receive a Facebook notification about someone writing on your Wall or tagging you in a photo, you’ll see a red bubble appear in the left-hand corner near the search bar. When you click on the icon, you’ll see a drop-down menu with your most recent notifications.”

Your Home and Profile links are always top-right and easy to bounce back to if you get sidetracked.  Privacy settings are easily accessed top-right in the Account tab, far right.  Now’s probably as good a time as ever to review your privacy settings and account settings (like updates via email, etc).

2.  EXPLORE in the Left-Hand Menu

Your friends’ content has become easier to explore using Facebook’s new left menu, furthering the “Peeping Tom” affection that rabid Facebook users have got going on anyway.  Facebook has been working tireless to make it easier for you to communicate with and discover content from your friends, including a new focus on Chat. You can now access your messages and other core features all in one place, to the left of your News Feed.

You can browse recent photos of your friends with the Photos dashboard. The Events dashboard lists all your friends’ upcoming events as well as your events in one convenient place. The Friends dashboard will help you see which of your friends have recently updated their profiles, find new friends, search the web using Bing’s built-in top-center search bar, and filter your News Feed by Friend Lists you’ve made to sort out the madness.

3.  Applications, Games, Ads and Pages….front and center!

Adding to the “easier to find” category, Facebook has granted prime time status to Applications, Games (new!), Ads and Pages, bringing them up from the bottom navigation to inhabit the side navigation just below Photos and Friends.  By bringing this navigation more front-and-center Facebook is consolidating even more of how we explore Facebook into the limelight and inviting each of us to use these features more.  While it was always frustrating to reach Pages you created (I keep about 40 Pages active at all times for clients and personal interests), I have to believe this is to engage more people to place and run Facebook advertising campaigns.

Discover friends activity, find new applications, see what your friends are using and how often, and let Facebook show you your most-used apps all in one place.  Click the More link to see your other important apps.  To quote the Facebook blog:

We think sharing information about the applications you use enriches the shared experience between you and your friends. At the same time, we feel strongly that control is an important element of any information sharing on Facebook. That’s why these features are launching with an entirely new privacy setting.

If you would rather not have your recent application activity visible in the dashboards to your friends, you can change this through your Privacy settings . We’re also working on a more granular set of controls for specific applications, so that you can turn off activity for certain applications while leaving it on for others. We’ll have more information to share on this soon.

All of these improvements will help users engage with their friends and follow their applications of choice in an easier-to-share location.

In an interesting move yesterday, Facebook granted developers the ability to dictate which applications and games the people in your friend list have been using.  Application developers can now choose whether their app or game will appear in a user’s friends dashboards or not.  This doesn’t give the USER the ability to decide what to share, but its a first step to giving more security options to Apps and Games.

4.  Wanna CHAT?  Now easier to reach, but the lone survivor in the footer.

Facebook has announced a new focus on Chat, moving your most frequent chatters and current online users in the left navigation, below News and Apps/Ads/Pages.

By keeping the important content together and to the left, this means less scrolling and quicker access to those you know.  The interaction online will keep users more engaged, almost guaranteeing that Facebook users remain on the site for longer periods of time (thus driving online ad sales because of the number of frequent AND captive users).  Facebook shows you people that you’ve chatted with the most, then those you interact with the most on the site, either through messages, writing on their wall, commenting, etc.

The Chat application is also notably the ONLY Facebook resource still grounded in the bottom of the browser window.  You can start chats from the left menu, but your active chats are still grounded at the bottom of the window.

In my opinion this is smart in terms of the user interface and keeping most of the content “above the fold.”  It was probably the only choice Facebook had to keep the rest of the window clean and accessible while participating in an active (or many active) chats.

5.  Open up that Most Recent News Feed!

The first thing I noticed in the new design was that my News Feed looked a little….weak.  In fact, my Most Recent News Feed was almost non-existent.  I have 800 friends or so, and I saw very little information initially.  So I thought I should investigate and found out that Facebook has initiated a new default number of people to include in the Most Recent News Feed.

What I found was that Facebook initiated a “ground floor” for Number of Friends to show in the News Feed, starting at 250 people.  I bumped this up to 600, but you could conceivably increase this to 5,000, the maximum number of Friends allowed.  Go to the bottom of your News Feed and look for “Edit Options” and bump up the total to 500 or 600 to see how much info that shows you.  You may also blacklist people, like those annoying relatives who just discovered social media and haven’t discovered the whole “add value to the conversation” principle.

Other Interesting Developments

Facebook also made it easier to manage ad campaigns, showing number of credits in the Accounts list, providing valuable feedback to those of us running Facebook ad campaigns – quick access to available credits and analytics.  In addition, the BIG rumor is something called “Project Titan,” which people have referred to as the GMAIL killer.  This functionality would most likely include support for standard POP/IMAP email accounts, allowing users to use other email clients like Outlook or Apple’s Mail to check their Facebook mail.  You might also see vanity emails like “scottdickens@facebook.com.”  Big things are afoot at Facebook, as they are at Google.  Strangely missing from the conversation is Microsoft, who seem content to reap the profits from their OS/Office business.  

In summary, I find the new layout refreshing and easy.  It was smart to consolidate the features the way people THINK of the site (profile/user info separate from the explore/community side).  While there’s always a furor over “new” interface designs at Facebook, along with the inevitable “1 Million People who HATE the New FB Layout” groups, I think the general public will embrace this update as a logical progression in the evolution of Facebook once they have a chance to digest the new layout.

Another puff of information exhaust from The Rocket Ride… Thanks again for reading!

- Scott

January 17 2010

The New Typography

Tagged Under : , , , , , ,

new-typography

Okay, so I was searching around this morning through some of my regular websites and came across a very interesting article that got me really thinking about typography on the web. A common problem I have is writing CSS and designing the type as I’d like it to be presented on the screen to the viewer. So you can imagine how insane of a task it might be for type designer who is actually crafting the fonts. There is a big difference between designing typefaces for print and the web; pixels behave differently than blobs of ink on paper. Typefaces for the Web need different qualities. “The bigger problem is all of the technology that delivers the font to the viewer. The website is delivered by one cluster of hardware to another, often with a different operating system, different browser and, in some cases, different pieces of software. That’s a very long chain. The number of variations is almost bottomless, and the results are unreliable at best.”

Imagine that you are a super-successful movie director, who’s been given hundreds of millions of dollars and lots of whiz-bang technology to make a cinematic epic. Sounds good? Not once you are told that people will have to watch it on fuzzy old black and white television sets.

The new publishing world of pixels presents striking complications to displaying fonts on the Web, according to a recent New York Times article. Browsers grow; eyes get strained; fonts become unclear and unappealing. As the Web world has evolved, typographers have worked to develop new tricks to fashion fonts for computer screens while preserving the craft’s rich history and nuance. For instance, if typographers “make enclosed spaces, like those in an ‘a’ and ‘e,’ bigger than they need to be in print.”

Props
Reference: All Top
Article: New York Times
Photo Credit: Fotolia