Facebook, the popular social Web site for connecting to friends and family,
allows you to integrate your Web site with your Facebook wall. You can add
what Facebook calls “social plugins” to your pages or blog postings. Small
HTML snippets are easy to configure and paste into your Web page. These
include the following:
✦ Like Button: This button allows your Web-site viewers to share your
page/post on their Facebook profiles. See http://developers.
facebook.com/docs/reference/plugins/like.
✦ Like Box: You can have your Web-site viewers like your Facebook wall
from your Web site. See http://developers.
✦ Activity Feed: Shows your Web-site viewers the most interesting activity
on your Facebook wall. See http://developers.facebook.com/
docs/reference/plugins/activity.
✦ Recommendations feed: Shows your suggestions for pages or content
on your Facebook wall. See http://developers.facebook.com/
docs/reference/plugins/recommendations.
✦ Facepile: Shows profile pictures of other users who have signed up for
your Web site. See http://developers.facebook.com/docs/
reference/plugins/facepile.
✦ Login Button: Like Facepile, displays profile pictures of your friends
who are logged in to your Web site. It has a login button as well.
See http://developers.facebook.com/docs/reference/
plugins/login.
✦ Comments: Enables your Web-site viewers to comment on your site via
their Facebook profiles. See http://developers.facebook.com/
docs/reference/plugins/comments.
✦ Live Stream: Allows you to share activity and comments in real-time.
See http://developers.facebook.com/docs/reference/
plugins/live-stream.
You must be registered as a Facebook developer to enable the Comments
and Live Stream plugins. Go to http://developers.facebook.com.
In the following sections, I walk you through how to add two of the most
popular of these plugins to your site.
Adding a Like button
You can add a Facebook Like button to your Web site to share your content
on the visitor’s Facebook profile. To quickly add a Like button, follow these
steps:
1. Open your Web page in the editor of your choice.
If you’re using Adobe Dreamweaver or Expression Web, open the HTML
page on your desktop. Or, if you’re using an online site builder or blog,
open the online editor.
2. View HTML code for your page.
3. Locate the location in your page in which you want to add the Like
button.
4. Paste the following code into your page:
Replace yourdomain.com with the name of your domain. Figure 4-1
shows the code inserted into a page on my Squarespace Web site.
5. Save the changes.
6. Preview your Web page.
allows you to integrate your Web site with your Facebook wall. You can add
what Facebook calls “social plugins” to your pages or blog postings. Small
HTML snippets are easy to configure and paste into your Web page. These
include the following:
✦ Like Button: This button allows your Web-site viewers to share your
page/post on their Facebook profiles. See http://developers.
facebook.com/docs/reference/plugins/like.
✦ Like Box: You can have your Web-site viewers like your Facebook wall
from your Web site. See http://developers.
✦ Activity Feed: Shows your Web-site viewers the most interesting activity
on your Facebook wall. See http://developers.facebook.com/
docs/reference/plugins/activity.
✦ Recommendations feed: Shows your suggestions for pages or content
on your Facebook wall. See http://developers.facebook.com/
docs/reference/plugins/recommendations.
✦ Facepile: Shows profile pictures of other users who have signed up for
your Web site. See http://developers.facebook.com/docs/
reference/plugins/facepile.
✦ Login Button: Like Facepile, displays profile pictures of your friends
who are logged in to your Web site. It has a login button as well.
See http://developers.facebook.com/docs/reference/
plugins/login.
✦ Comments: Enables your Web-site viewers to comment on your site via
their Facebook profiles. See http://developers.facebook.com/
docs/reference/plugins/comments.
✦ Live Stream: Allows you to share activity and comments in real-time.
See http://developers.facebook.com/docs/reference/
plugins/live-stream.
You must be registered as a Facebook developer to enable the Comments
and Live Stream plugins. Go to http://developers.facebook.com.
In the following sections, I walk you through how to add two of the most
popular of these plugins to your site.
Adding a Like button
You can add a Facebook Like button to your Web site to share your content
on the visitor’s Facebook profile. To quickly add a Like button, follow these
steps:
1. Open your Web page in the editor of your choice.
If you’re using Adobe Dreamweaver or Expression Web, open the HTML
page on your desktop. Or, if you’re using an online site builder or blog,
open the online editor.
2. View HTML code for your page.
3. Locate the location in your page in which you want to add the Like
button.
4. Paste the following code into your page:
Replace yourdomain.com with the name of your domain. Figure 4-1
shows the code inserted into a page on my Squarespace Web site.
5. Save the changes.
6. Preview your Web page.
