iWeb FAQ - Facebook and StumbleUpon
iWebFAQ.org
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? How can I add a StumbleUpon button to my website?
I personally don’t like Facebook. They are having way too many informations about their members. However I have to admit that it useful. Since there are so many users it is an important mean to make your site being popular and keep in touch with your visitors by creating a group.
Chapter 1: Add to contacts widget
Chapter 2: Become a Fan page and widget
Chapter 3: “Share on Facebook” link
Chapter 4: StumbleUpon button
Chapter 1: Add to contacts widget
1. The first thing you need to do is login to your Facebook
2. Go to Profile and scrolling down on the left side you will see “Create a Profile Badge” click it
3. Copy the HTML code and paste it on your pages or in your sidebar where you want the badge to display
4. Now people will be able to click on it, see your public profile and add you as a friend if they want to
Note: For this widget you can either use HTML Snippets or Alternative HTML.
Chapter 2: Become a Fan page and connect widget
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 3: “Share on Facebook” link
With a “Share on Facebook” link you provide your visitors an easy way to add the URL of your website or a page of it to their Facebook profile to be seen by all their friends.
1. First visit this page of Facebook
2. Choose what you want the link to look like and copy the code
3. Since this code doesn’t work in HTML Snippets we will have to use the Alternative HTML FAQ method (MassReplaceIt). Read that FAQ.
4. On every page where you want the link to appear add a TextBox with a unique text in it (example: ShareOnFB)
5. In MassReplaceIt Search field add the unique text
6. In MassReplaceIt Replace field add the code you copied in step 2
7. Run MassReplaceIt through your website each time you publish
Another possibility which also works with HTML Snippets is...
1. To use this code instead:
<a href="http://www.facebook.com/sharer.php?u=YourURL" target="blank">Share on FB</a>
2. Replace YourURL in the code with your website’s address.
Example:
Code:
<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.
Chapter 4: StumbleUpon button
StumbleUpon is a link sharing platform. It allows people to add websites they like to Stumble’s database so other people can see them, add reviews for the websites and more. You can also share your list of websites (bookmarks) with your friends so they can see what sites you like to browse on. Same as for Facebook: there are millions of users or potential visitors for your site on StumbleUpon.
Here I will explain how to add a Stumble upon button to your website which allows people to vote for it:
1. Go to this page
2. Choose the graphic you want the button to wear and hit “Any web page or blog”
3. You will now find a code like this one:
<a href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.yoursite.com%2Farticle.php%26title%3DThe%2BArticle%2BTitle"> <img border=0 src="http://cdn.stumble-upon.com/images/120x20_thumb_black.gif" alt=""></a>
In there you see the URL to the image (here in red), copy and paste it to a safe location. We will need it further on.
4. Now depending on whether you want to use HTML Snippets to post the code into your page or use Alternative HTML (recommended) the code is slightly different.
Using Alternative HTML copy this code here (original source of the following code is this site)
<script language=JavaScript>
document.write ('<a href="');
document.write('http://www.stumbleupon.com/submit?url='+document.URL+'&title='+document.title.replace(/ /g,'+')+'">');
document.write ('<img border=0 src=URL of the image></a>');
</script>
In the code replace URL of the image with the URL you copied in step 3
If you want to use HTML Snippets copy the following code:
<script language=JavaScript>
document.write ('<a href="');
document.write('http://www.stumbleupon.com/submit?url=URL of your Home page">');
document.write ('<img border=0 src=URL of the image></a>');
</script>
In the code replace URL of your Home page with the URL to your Home page. In my case that would be: http://iwebfaq.org/site/iWeb_FAQ.html
Replace URL of the image with the URL you copied in step 3
As always with HTML Snippets this solution is a workaround. Meaning far from perfect.
5. Proceed to adding the code to your pages. Depending on the choice you made in step 4 either by following the Alternative HTML process you find described in its FAQ or by adding it to HTML Snippets.
You find this widget on each of my pages, join in! :-)
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 -
iWebFAQ.org on Facebook
