iWeb Tip #18 – Facebook and Twitter

44
3221
Twitter and Facebook in iWeb


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:

Facebook Badge in iWebSimply 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:

Fanbox in iWebTo 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:

<script src="https://www.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>

<script type="text/javascript">FB.init("API_KEY", "");</script>

<fb:fan profile_id="YOUR_PAGE_ID" stream="1" connections="10" width="300"></fb:fan>

<div style="font-size:8px; padding-left:10px"><a href="VANITY_URL">PAGE_NAME</a> on Facebook</div>


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:

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

Twitter in iWebAdding 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 WidgetTwitter 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

Twitter Widget (Flash)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:

Twitter HTML Widget in iWebTo 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

44 comments

  1. Ron 18 February, 2010 at 06:03 Reply

    Facebook
    I would like to but become a fan button on a few of my sites.
    1. do you have a video tutorial for facebook?
    2. is their a alternative to video for facebook.

    thanks for the help.

  2. AdamCMiller 4 March, 2010 at 02:22 Reply

    Great! Nice info found here :) Facebook is being discussed everywhere now a days. But, today Facebook is being used massively by the webmasters too for getting traffic. I would like to tell you that I have developed a new method with the help of which you can make 5000 friends in 7 days only and can make 50000 fans in 30 days. This method makes me $500 EVERYDAY for making money. Hope you will like it! Only 9 copies has left. It is 100% FREE. I would like to subscribe to your blog, can you please send me its url at my email ID? Thanks!

  3. Scott 24 March, 2010 at 08:36 Reply

    Quick question I am hoping someone can answer…

    What if I want to use iWeb to publish updates to multiple Facebook accounts?

    For example, both my wife and I have facebook pages. We have different groups of “friends”, and would like update notifications to appear on both of our “walls”. Is that something that can be done, or will one of us have to manually post a link on our Facebook wall?

    Thanks!

  4. Carmine Longo 30 March, 2010 at 16:14 Reply

    Go Daddy coupon code list. Several of the recurring Godaddy.com coupon codes are not valid. Here are the latest coupons that are just put out. These promo codes will save you money thru 2011. $7.49 .com Domains and Manual renewals – Use Go Daddy coupons GOO3, OK9, or ZINE10. 25% discount on orders of $100+ – Use Godaddy coupon code OK25. 30% Discount when you buy any com domain – Use Go Daddy coupon code OK30. $12.99 SSL Certificates – Use Godaddy.com promo codes GOOSSL, OKSSL, or ZINESSL. Host Plan Promo Code – 20% Hosting Discount – Use Godaddy coupons OK20H, ZINE20H1 or GOO20H. 10% off any size order – Use Go Daddy coupon codes OK7, GOO1 or ZINE8. $5 Off $30 or More – Use Go Daddy coupons GOO2 or ZINE9. 20% Off Any order of $50 or more – Use Go Daddy coupon code OK8.

  5. Louisart 13 April, 2010 at 03:45 Reply

    Hello I’m trying to find a way of going back to the “top of the page” because some some of my pages are very long. Also does the new version of iweb (09) allow publication of multiple domains names – I have two websites and masses of space on my mobileme account but apparently I can only use one domain name on the site. Would very much appreciate help and advice. Loved the video tutorial on creating multiple sites and used it at once. Thank you in advance.

  6. kyle 24 May, 2010 at 02:10 Reply

    i was tryng to use the facebook comment plug in but the xfbml was a very confusing part for me. help?

  7. Charo 27 December, 2010 at 20:40 Reply

    Google need to ahve purchased bebo once they had the probability. Rather they slept on it otherwise we would currently have a very spam-free and quick facebook.com

  8. glass display cases 3 March, 2011 at 09:33 Reply

    Your website is like pie, they are sweet and cute. I’ve just walking from every page to page until I met hot topic in this page. From first impression, I underestimate your topic ideas, but it is my fault, sorry for thinking this (I told you what I thought in my mind). This is my bad behavior, sorry to hear that. Although it was my bad sign for future, but I realize that my mind can be used for other experimental research with you. Please notice that I write this comment based on true story, and you are the chosen one to make this decision. I want you to become my partner in desired subject, we can research together with our skills, and you get the advantage by getting new experience with me. Sorry for giving my invitation on this comment page, but if you don’t mind, you can give me your opinion about my comment, I’m interested in developing your website as big site, so you can use it as your passive income.

  9. katalog stron 19 March, 2011 at 06:01 Reply

    Hi, Neat post. There’s a problem with your website in internet explorer, would check this… IE still is the market leader and a big portion of people will miss your excellent writing due to this problem.

  10. Mary 22 May, 2011 at 15:06 Reply

    Anyone else having issues with the Facebook “Like” button not showing up in IE 7-8, Google Chrome or Firefox, but shows fine in Safari?

    I have tried putting the SDK Java script the Facebook Developers site says will fix this issue but I am still not having any luck!!!

  11. Herman Sotlar 7 August, 2011 at 19:20 Reply

    I wish to express some thanks to you just for bailing me out of this matter. As a result of scouting throughout the the net and seeing suggestions that were not helpful, I was thinking my entire life was gone. Being alive minus the approaches to the difficulties you have resolved by way of your main guideline is a crucial case, and those which may have negatively damaged my career if I hadn’t come across your web blog. Your own understanding and kindness in controlling all the details was very useful. I am not sure what I would’ve done if I hadn’t come upon such a step like this. I can also now look ahead to my future. Thanks very much for the expert and sensible guide. I will not think twice to endorse your web site to any individual who will need guide on this area.

  12. Jeramy Loosey 9 August, 2011 at 13:17 Reply

    Your blog is pretty educational to me thanks for your time and this was one more terrific article many thanks for posting it!”Emancipate yourselves from mental slavery, none but ourselves can free our minds!” -Bob Marley

  13. Man Pehowich 12 August, 2011 at 20:47 Reply

    I simply desired to thank you so much yet again. I do not know the things that I would’ve worked on without the actual ideas documented by you concerning this topic. It had been a scary situation in my position, but taking a look at the professional way you managed the issue made me to leap with fulfillment. I will be thankful for this guidance and then pray you find out what a powerful job your are putting in training most people thru a site. Most likely you haven’t encountered any of us.

  14. Jenn 16 August, 2011 at 10:33 Reply

    I am also having trouble getting my twitter feed on IE. It works fine with Safari and Firefox. Any help would be appreciated!

  15. asada 18 August, 2011 at 17:11 Reply

    I am commenting to let you be aware of of the impressive experience my cousin’s daughter undergone going through your webblog. She learned a wide variety of things, which included how it is like to have an incredible helping nature to let the others without difficulty comprehend selected multifaceted topics. You really exceeded readers’ desires. Thanks for presenting such essential, trustworthy, revealing and even easy tips on this topic to Tanya.

  16. Flea treatment for dogs 22 August, 2011 at 15:46 Reply

    Thanks a lot for giving everyone an exceptionally special chance to read from this web site. It is always so enjoyable and also full of a great time for me and my office peers to visit your website at minimum 3 times every week to study the newest tips you will have. Not to mention, I’m also usually impressed with the fantastic solutions you give. Some 4 tips in this post are rather the very best I have had.

  17. early childhood jobs 29 August, 2011 at 06:49 Reply

    I discovered your weblog web site on google and examine a number of of your early posts. Proceed to keep up the very good operate. I simply additional up your RSS feed to my MSN News Reader. Seeking ahead to reading more from you afterward!…

Leave a reply

Facebook
Twitter
YouTube