iWeb Tip #18 – Facebook and Twitter

Facebook and Twitter in iWeb

So you have an iWebsite, you have a FaceBook account, and you have a Twitter account.  You want people to visit your website, but you also want them to visit your facebook, but you also want them to follow your tweets.  What is the solution?  Well, bring them all into iWeb of course (big cheesy grin here).

Adding these to your website is quite simple.  It’s simply a matter of getting code from facebook and/or twitter (that they provide) and putting them in an HTML snippet.  Here’s how:

View Facebook Demo »

View Twitter in iWeb Demo »

Adding Facebook to iWeb

First off there are a few different ways to get Facebook on iWeb.  Either put a Badge (a customizable way to share your Facebook information), Fan Box (a social widget that allows Facebook Page owners to attract and gain Facebook fans) or a Live Stream Box (which allows others to connect to their facebook account on your webpage and update their status about something on your site on their facebook within your site).

Facebook Badge:

Simply go to www.facebook.com/badges.php, it will then ask you to log in (if you don’t have an account, where have you been, get one here). Then you will see a button that says “Create a New Badge”.   You will then see many options to customize your badge between two categories, Layout and Items.  All these option depend on your preference for your site.  As far as orrientation you can choose if you want a vertical, horizontal, or 2-columns badge.  Then you can choose what items you’d like to be on your badge by simply checking on the ones that you want.  Hit save, then you will be given some code to copy.  At that point jump into iWeb, grab an HTML snippet, paste code into snippet and hit apply.  All done.

Facebook Fan Box:

To have a Fan Box you must create or have created a page for a band, business, etc.  You can’t do this for your personal profile page (that’s what the badge is for).  You can create a page from facebooks homepage.  Below the sign up form, there is a button that says “Create a Page”.

For this one go to www.facebook.com/developers/wizard.php, choose Fan Box button on the left, then choose which page you’d like to make the fan box for under the drop down menu.  You have 2 checkboxes of option you can add; 1) Include Stream (status updates) 2) Include Fans.  It gives you the code right away for you to paste into an HTML snippet.

The Javascript code that the wizard generates looks similar  to this:

You can change the items in red even after you’ve pasted it into an html snippet. Here’s a little explination of the customization options:

• profile_id: The ID of the Page associated with the Fan Box. Specify either the profile_id or the name, but not both.
• name: The Page’s name (the name after the final backslash) or username (if one was specified). Specify either the profile_id or the name, but not both.
• stream: Set to 1 to display stream stories in the Fan Box or 0 to hide stream stories. (Default value is 1)
• connections: The number of fans to display in the Fan Box. Specifying 0 hides the list of fans in the Fan Box. You cannot display more than 100 fans. (Default value is 10 connections.)
• width: The width of the Fan Box in pixels. The Fan Box must be at least 200 pixels wide at minimum. (Default value is 300 pixels.)
• height: The height of the Fan Box in pixels. The height defaults based on the elements you include in the Fan Box. For a Fan Box that contains only the Become a Fan button, but no stream or friends, the height is 64 pixels. If you include all the features, the Fan Box is 554 pixels high. If you change the number of connections shown, you may need to edit the height to ensure they are all visible.
• css: The URL to your own style sheet. See fb:fan for policies on using your own CSS.

The rest are pretty self explanitory. Now there are a few known issues with this in iWeb.  First off when you hit apply the widget automatically resizes the height to 10,009px (which is way to super long for any website), so this is easy to fix, just click on your snippet and go into the metric inspector (that’s the one with the ruler) and adjust the height to about 90px if your using the simple one without the stream and fans and at least 554 if you are.  The other issue (at least that I’ve found) is that it seems that it is not compatable with the iWeb browser so you won’t see it show up in iWeb (which makes is hard for layout purposes), but when you publish it it will be there and you’ll see it.  Yay!

There is another option if you want to make sure you see it in iWeb.  You can do a Facebook Fan Box in an iFrame instead.  They incourage you to use the javascript one that is the default, but you can also use this iFrame code below:

<iframe scrolling="no" frameborder="0" src="https://www.facebook.com/connect/connect.php?id=YOUR_PAGE_ID&connections=10&stream=1" allowtransparency="true" style="border: none; width: 300px; height: 550px;"></iframe>
<div style="font-size:8px; padding-left:10px"><a href="URL_TO_YOUR_PAGE">PAGE_NAME</a> on Facebook</div>

Here’s some things you’ll need to do to make sure this works:

• You need to specify your Page ID in the iframe src attribute (You’ll find your page ID at the end of your page’s URL, only the numbers).
• You also must specify the URL to your Page in the anchor tag in the div.  You can choose to hide the stream from the Fan Box by changing 1 to 0 in the stream URL parameter.
• You can modify the number of fans to display by changing the setting for the connections URL parameter. Setting connections to 0 hides your fans. You cannot specify more than 100 fans.

And that’s it! Few!

Facebook Live Streambox:

This option pretty much works exactly like the Fan Box, but it has a different purpose. The Live Stream Box is a social widget that lets users visiting your site or application share activity and comments in real time. The Live Stream Box works best when you are running a real-time event, like live streaming video for concerts, speeches, or webcasts, live Web chats, webinars, mass-multiplayer games, and more.

The Live Stream Box lets users:

• Log in to your site using their Facebook accounts with Facebook Connect.
• Communicate and share with each other and their friends in real time at large scale (supporting millions of simultaneous users).
• View what their friends are saying as well as the general audience viewing the live stream.
• Comment on and “like” their friends’ posts.
• Share their updates directly on their Facebook profile and in their friends home page Streams. Each story on Facebook includes a link back to your site (through a URL you specify).

Implementing it into your site works the same way as the Fan Box.

Adding Twitter to iWeb

There are a few ways to add Twitter to iWeb as well.  You can create a Twitter Profile Widget (Color & Size customizable profile widget), Flash Widget (Flash 9 Required), or a HTML Widget (simple text with your updates).

Twitter Profile and Search Widgets:

To get this Twitter Widget go to www.Twitter.com/goodies/widget_profile, it will then ask you to sign in.  You’ll then be presented with 3 options; for your website, for facebook, or for myspace.  Obviously we want to choose the option “My Website”.  Then it gives you an option to choose a Profile Widget or a Search Widget.  The profile widget is a listing of your your Tweets (updates).  The Search Widget is a customizable widget that allows you to show when people are talking about a certain topic or event.  We’ll start with the Profile Widget.

When you choose Profile Widget you get three options to customize; settings, appearance, and dimensions.  Go through each section and adjust it as you see fit to match the colors and size of your site, when finished click the button that says “Finish and Grab Code”.  At that point simply copy the code, grab and HTML snippet and paste in your code and your set!

When you choose a Search Widget you get the same three options of settings, appearance, and dimensions.  The difference is in the settings you can set what search criteria is loaded in.  So for example you might put in “iWebUnlimited.com” for the search.  That way you can see what people are saying about that topic on the whole planet of Twitter.  Kindof a cool way to bring all the topics of a certain subject to one place.  Again once you’ve adjusted all your settings and such, hit the “Finish and Grab Code” button, paste the code into an HTML snippet in iWeb and your set.  You have successfully implemented Twitter into iWeb, give your self a pat on the back.

Twitter Flash Widget

To get the flash widget go to www.Twitter.com/widgets/which_flash, it will first ask you to sign in (if you don’t have an account, get one here), then you will be presented with 2 options, for either an Interactive Flash Widget or a Display-only Widget.  It’s all preference here on what you’d rather have on your site.  Choose which ever you’d like, then hit continue.

If you chose the Interactive Flash Widget you’ll be presented with 3 styles; smooth (dark glossy look), velvetica (white stylish look), and revo (a red sunburst style).  Then you can choose if you want it to be narrow, wide, or full.  Of course both of these options depends on how you want it to look in your iWeb site.  So choose which ever fits best and you will see the code before you.  Simply copy and paste it into an HTML snippet and your set.

If you chose the Display-only Flash Widget then you are taken to a page where you can change the color and that’s it.  Then just copy and paste the code into an HTML snippet and your set.

Twitter HTML Widget:

To get the HTML widget go to www.Twitter.com/widgets/html_widget, this is a simple but customizable way to get your tweets on your iWebsite without requiring people to have flash player (this means it will show up in Safari on the iPhone).  You have a few options here at start, to show how many Tweets you’d like to have up at a time, and if you’d like a title.  Copy and past the code into an HTML snippet on your page.  Hit apply and you have successfully added the HTML snippet to your page.

Now to style it a bit.  At this point it’s a pretty plain bit of text. But the nice thing is that we can really style this however we want.  First of all you can adjust the size of the snippet to whatever you want, and to change the font and colors use this block of code below and paste it at the top of your code.

<body text="#4C4C4C" link="#4167BE" vlink="#000000" alink="#4167BE">

<font face="Verdana, Arial, Helvetica, Geneva"><font color="4C4C4C"><font size=2.5>

If your not sure how to get the hex color values use this handy little color picker from Google Gadgets.  Style as you choose, maybe even put a cool background behind it, whatever you’d like, and you’ll have a nice little widget that’s more compatable, and more styled to your liking than any of the other Twitter widgets.

That’s all for this tip.  Hope you enjoyed getting your social network on iWeb and if you have any questions on this at all feel free to leave a comment below.  And if you found this tip helpful, please consider donating to the iWebUnlimited cause.  Thanks again.

—iJason