iWeb Tip #18 – Facebook and Twitter

44
21835
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. Rodrigo Safran 30 August, 2011 at 23:51 Reply

    Within most of these application programs, any hospice solutions certify that they need to adhere to Treatment in addition to Low income health programs guidelines, laws, and plan guidelines, and further certify that they can realize that check on the maintain by Medicare insurance and also Medicaid will be trained upon the particular assert together with hidden exchange submission with such plan legislation and requirements. When these kind of legal businesses dishonored the particular conditions of being liaison office buildings a RBI forgotten or maybe forgotten about this.

  2. JP 1 September, 2011 at 05:36 Reply

    Hi iJason,

    I am trying to get just a like button on this site jokebuis.nl. I use this code in an HTML snippet:

    I shows nicely in iWeb, with the right count of likes, but it does not show on the site. I export to a folder on my mac and then place that on the server….
    Hope you can help.

    JP

  3. Manuela Cerverizzo 4 September, 2011 at 18:37 Reply

    I am only commenting to let you know of the excellent discovery my daughter encountered visiting your blog. She mastered plenty of pieces, with the inclusion of what it is like to have an awesome giving spirit to make many more without hassle know some grueling things. You really surpassed her expected results. Many thanks for providing the useful, healthy, explanatory and as well as fun tips about this topic to Janet.

  4. Jerry 2 October, 2011 at 17:00 Reply

    HellofriendI I spotted your blog page on Google the other day and I am quite delighted that I did!
    I really appreciate your posting style and tips of which you offer.
    I will bookmark your site for future reference!
    All the best friend for Added From File, a great blog post!

  5. Rob Davis 3 October, 2011 at 16:19 Reply

    I tried to get the like box onto my website and it is not working, i tried every the iframe and html5 code and it shows up as nothing on my page, please help!!!!

  6. status site 17 November, 2011 at 22:34 Reply

    Its like you read my mind! You seem to understand a lot about this, such as you wrote the ebook in it or something. I believe that you could do with a few p.c. to power the message house a bit, however instead of that, this is excellent blog. An excellent read. I’ll certainly be back.

  7. five mistakes 11 December, 2011 at 05:19 Reply

    Your site is pretty cool to me and your topics are very relevant. I was browsing around and came across something you might find interesting. I was guilty of 3 of them with my sites. “99% of blog managers are guilty of these 5 mistakes”. http://is.gd/8IvkQ3 You will be suprised how fast they are to fix.

  8. movie wordpress 4 January, 2012 at 02:40 Reply

    I want to express some thanks to the writer just for rescuing me from this problem. After checking throughout the the web and seeing advice which are not beneficial, I thought my entire life was gone. Existing minus the strategies to the problems you’ve solved as a result of your article is a critical case, and the kind which may have badly affected my entire career if I hadn’t encountered your web site. Your good training and kindness in touching all things was valuable. I don’t know what I would have done if I had not come across such a stuff like this. I can also now look forward to my future. Thanks a lot so much for your expert and result oriented help. I won’t think twice to suggest the sites to any individual who would like tips about this problem.

  9. jon 16 February, 2012 at 17:16 Reply

    jut want to say thanks for the brilliant advice this site has on it. I’m currently building a site for a friends charity and your website has been more help than hours talking to my “tech mates”

    you are amazing, keep it up

  10. /application 19 July, 2012 at 18:02 Reply

    Hi! Quick question that’s totally off topic. Do you know how to make your site mobile friendly? My site looks weird when browsing from my iphone. I’m trying to find a theme or plugin that might be able to correct this problem. If you have any recommendations, please share. Many thanks!

  11. Jenifer 1 November, 2012 at 04:16 Reply

    When I originally left a comment I appear to have
    clicked the -Notify me when new comments are added- checkbox
    and now each time a comment is added I recieve four emails
    with the same comment. Perhaps there is a way you
    can remove me from that service? Cheers!

  12. Amanda 16 February, 2013 at 00:16 Reply

    I have tried to add the follow me Pinterest button, and when I put the code in the HTML box, all it comes up is A blue hyperlink that takes me to my pinterest page, it doesn’t look like the Pinterest button that should appear. Am I doing something wrong?

Leave a Reply to five mistakes Cancel reply

Facebook
Twitter
YouTube