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 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: 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
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 your WordPress blog
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:
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 menas 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, post or sidebar where you want the widget to display.
You find this widget on each of my pages, join in!
Chapter 3: 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:
In there you see the URL to the image (here in red), copy and paste it to a save location. We will need it further on.
4. Now copy this code here (original source of the following code is this site)
5. In the code replace URL of the image with the URL you copied in step 3
6. On “Where to insert the code” in WordPress StumbleUpon says
Tips for adding StumbleUpon buttons to WordPress
- Edit single.php of your WordPress theme.
- Find the following line (or similar line, depending on your theme file) in single.php or theloop.php:
- Immediate after the line, add the code below:
- Save and upload single.php back to your WordPress theme folder. Done!
7. If you don’t want to go through this process paste it to wherever you want (example: sidebar).
You find this widget on each of my pages, join in!
WordPressFAQ.org – Tutorials, Tips & Tricks is made with and for WordPress.
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 -

