I’m a Facebook user. How can I get my visitors to add me as a friend? How can I create a fan page for my website to start a community? How can I have people sharing the URL of my website with their friends on FB? And much more...

I personally don’t like Facebook. They are having way too many informations about their members. However I have to admit that it is useful. Since there are so many users it is an important tool to make your site popular and keep in touch with your visitors by creating a group.

Chapter 1: Facebook Profile Badge (Add to contacts widget)

Chapter 2: Facebook Share (Allow people to share a page of your site on their Facebook Wall with one click)

Chapter 3: Facebook Page Badge (Become a fan of the website)

Chapter 4: Facebook Like Button (For people to like a particular page/post of your website)

Chapter 5: Facebook Comments Box (For people to post a comment on your website through FB)

Chapter 6: Follow me on Twitter button

Chapter 7: Twitter Profile Widget (Display your latest tweets on your website)

Chapter 8: Send to Twitter link or button (Allow people to share a page of your site on their Twitter with one click)

Chapter 9: How to stream your Blog entries to your FB Page’s Wall

Chapter 10: How to stream your Blog entries to your Twitter

Chapter 11: How to stream your Facebook Page entries to your Twitter

Chapter 1: Facebook Profile Badge (Add to contacts widget)

(this is just an image, not working since I don’t want a 1000 people a day adding me as a friend, please do not add me)

Note: For this widget you can use either HTML Snippets or Alternative HTML

1. The first thing you need to do is login to your Facebook

2. Go to this page of Facebook. By hitting “Edit this badge” you can further customize what the badge should include. Once you’re done with customizing the badge hit Other.

3. Copy the HTML code and paste it in an HTML Snippet or add it to your pages using Alternative HTML. The code is full of useless parts which can be deleted if you want. For a basic badge just keep what I highlighted in red here:

<!-- Facebook Badge START --><a href="http://www.facebook.com/people/Cedric-Bauer/1335895607" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Cédric Bauer">Cédric Bauer</a><br/><a href="http://www.facebook.com/people/Cedric-Bauer/1XX5895607" target="_TOP" title="Cédric Bauer"><img src="http://badge.facebook.com/badge/1XX5895607.331.1963677553.png" width="120" height="60" style="border: 0px;" /></a><br/><a href="http://www.facebook.com/badges/" target="_TOP" style="font-family: &quot;lucida grande&quot;,tahoma,verdana,arial,sans-serif; font-size: 11px; font-variant: normal; font-style: normal; font-weight: normal; color: #3B5998; text-decoration: none;" title="Make your own badge!">Create Your Badge</a><!-- Facebook Badge END -->

If you want to use your own image substitute the URL to the image in the code

<img src="http://badge.facebook.com/badge/1XX5895607.331.1963677553.png" width="120" height="60" style="border: 0px;" />

with the URL to your own image

4. Now people will be able to click on it, see your public profile and add you as a friend if they want to

Chapter 2: Facebook Share (Allow people to share a page of your site on their Facebook Wall with one click)

Note: For this widget you have to use Alternative HTML

Alternatively you could also use one of the services described under Tell a friend.

1. First copy this code:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a href="http://www.facebook.com/share.php?u=<url>" onclick="return fbs_click()" target="_blank">Share on Facebook</a>

2. Instead of Share on Facebook write what you would like to appear on your site as a link. If you ant an image instead of text replace it with:

<img=”URLtoTheImage” width=”30px” height=”35px” border=”0”>

3. On the pages you want to add the Facebook Share widget add a TextBox with a code (something like ShareOnFBGoHere)

4. Publish your website

- To a folder if you publish your website to a server other than MobileMe

- To your iDisk if you’re using MobileMe

5. Open or download MassReplaceIt (freeware)

If it’s the first time you’re using MassReplaceIt read the “Alternative HTML” FAQ among the first pages of this book to make sure the settings are right

6. In the Search field type ShareOnFBGoHere (or the code of your choice)

7. In the Replace field paste your Share on Facebook code

Of course if you’re using MassReplaceIt for other codes as well you can add it to that query.

8. In Files add your website

- If you publish to a folder go the folder you publish to from iWeb and select your site’s folder

- If you publish to MobileMe go to your iDisk/Web/Sites/ folder where iWeb publishes to and choose your site’s folder

If you can’t choose the iDisk because you don’t see it go to Finder/Preferences/Sidebar and check the box near the iDisk

9. Save the query by hitting Command(cmd or Apple)+S and enter a name for it so the next time you publish your website you will only have to hit the Replace button

10. Hit Replace and MassReplaceIt will search for files it has to make changes to

11. Again hit Replace All and MassReplaceIt will automatically replace the code “ShareOnFBGoHere” and add the Facebook code instead

Note: You have to repeat the process from step 10 to 11 every time you republish.

If you want to use HTML Snippets instead you can use this code:

<a href="http://www.facebook.com/sharer.php?u=YourURL" target="_blank">Share on FB</a>

In the code replace YourURL with the URL to your website. In my case that would be: http://iwebfaq.org/site/iWeb_FAQ.html

Example:

<a href="http://www.facebook.com/sharer.php?u=http://iwebfaq.org/site/iWeb_FAQ.html" target="_blank">Share on FB</a>

This way you have to enter the URL of a page manually. Whereas with the first method it is automatically entered/generated.

Paste the code into an HTML Snippet. As always with HTML Snippets this solution is a workaround. Meaning far from perfect.

Chapter 3: Facebook Page Badge (Become a fan of the website)

To have a Facebook page for your website or yourself if you’re an artist or something there are two things to be done. The first part is creating the page. The second one is adding the widget to your website. So let’s start with the page:

1. First visit this page of Facebook

2. Hit Create a page and fill in all the required informations

3. Once you filled in the informations you need to confirm that you’re authorized to create the page by checking the box and giving an electronic signature. Then hit Create Page.

4. Add the basic informations, add a picture and so on

Now we will create the Fan Box widget. There are two ways to do that.

1. Hit “Add a Fan Box to your site” which you find on the left menu of the Facebook page

2. Configure the Fan Box

3. Copy the code and paste it into an HTML Snippet

However I prefer using the other way which is using an iFrame. The reason for that is that it gives you more control over the widget.

1. Copy the following code:

<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id=XXXXXXXXXXXX&connections=0&stream=0" allowtransparency="true" style="border: none; width: 300px; height: 65px;"></iframe><div style="font-size:11px; padding-left:10px"><a href="URL to your Facebook page">Name</a> on Facebook</div>

2. Edit the code as described here:

The id, marked with red X in the code, is a 12 digit number which you find on your FanBox code page

Connections 0 means that the widget will not show the members, set it to 1 if you want it to show them

Stream 0 means that it will not show the posts that are made on the page, if you want them to display set it to 1

Width and height parameters should be clear. It defines the dimensions of the widget. If you add connections or stream you will need to increase the height to 500 or something.

URL to your Facebook page is self explanatory.

Name is the name of your Facebook page, your band name, website name, whatever.

3. Publish the code to the page where you want the widget to display.

Note: For this widget you can either use HTML Snippets or Alternative HTML.

You find this widget on each of my pages, join in! :-)

Chapter 4: Facebook Like Button (For people to like a particular page/post of your website)

How this is done is described in my iWebFAQ.org E-Book (15$).

Chapter 5: Facebook Comments Box (For people to post a comment on your website through FB)

Note that I will probably not read the comments you post here. For questions use the Forum instead!

How this is done is described in my iWebFAQ.org E-Book (15$).

Chapter 6: Follow me on Twitter button

Simply link your Twitter page http://twitter.com/YOUR-ID with a text link or image-link.

Chapter 7: Twitter Profile Widget (Display your latest tweets on your website)

Note: For this widget you can use either HTML Snippets or Alternative HTML

1. The first thing you need to do is login to your Twitter account

2. Go to this page of Twitter. By hitting “Preferences” you can further customize the badge. Choose to include scrollbars. Under “Appearance” you can customize the look or theme of the widget. Once you’re done customizing the badge hit Finish&Grab Code.

3. Copy the HTML code and paste it in an HTML Snippet or add it to your pages using Alternative HTML.

4. People see your latest tweets on your website, they can reply and join the conversation

Chapter 8: Send to Twitter link or button (Allow people to share a page of your site on their Twitter with one click)

How this is done is described in my iWebFAQ.org E-Book (15$).

Chapter 9: How to stream your Blog entries to your FB Page’s Wall

If you have a website with a blog for the news on it and have a Facebook Page for the website it’s a good idea to stream the news blog to your Facebook Page so every new entry on the blog gets also automatically posted to your Facebook Page.

You can also stream it to both Facebook and Twitter at the same time.

How this is done is described in my iWebFAQ.org E-Book (15$).

Chapter 10: How to stream your Blog entries to your Twitter

If you have a website with a blog for the news on it and have a Twitter account for the website it’s a good idea to stream the news blog to your Twitter so every new entry on the blog gets also automatically posted to your Twitter.

You can also stream it to both Facebook and Twitter at the same time.

How this is done is described in my iWebFAQ.org E-Book (15$).

Chapter 11: How to stream your Facebook Page entries to your Twitter

If you have a Facebook Page where you publish the news of the website and a Twitter account you can stream the entries from the Facebook Page to the Twitter account. So every new entry on the Facebook Page gets also automatically posted to your Twitter account.

How this is done is described in my iWebFAQ.org E-Book (15$).

iWebFAQ.org - Tutorials, Tips & Tricks is made with iWeb and for iWeb.

It’s presented by Cédric and hosted by HostExcellence.com

I would like you to give me feedback on this page by commenting in the appropriate section of the Forum. Tell me if it's been helpful. If it wasn’t please tell me why. If you think something is missing please tell me what. If you have questions about it post them there and I will probably try to give you an answer.

Thank you for visiting and supporting my website.

- Cédric -