Beginners Guide to Integrating Facebook and Wordpress

8/3/2019 Beginners Guide to Integrating Facebook and Wordpress

1/45

PROJECT

H E R E S Y

The Beginners Guide toIntegrating Facebook and

Wordpress

Learn How to Integrate Facebook Connect, Your Blogand Facebook in 60 minutes

- BY -

Tim Marsh

http://projectheresy.com

http://projectheresy.com
http://projectheresy.com/http://projectheresy.com/


2/45

Legal

Distribution/Copyright

This guide (not the content, process or steps) is projectheresy.com 2009. The CreativeCommons info below does not apply to code itself as that is in the public domain.

This guide is created and distributed under the Creative Commons

Attribution-Non-Commercial-Share Alike 2.5 Australia Licence.

This means you are free:

to Share to copy, distribute and transmit the work (this guide) to Remix to adapt/improve the work (this guide)

Under the following conditions:

Attribution you must attribute the work (this guide) in the manner specified by

the author or licensor (but not in any way that suggests that they endorse you or

your use of the work). Noncommercial you may not use this work (guide) for commercial purposes;

that is, you cant resell it. Share Alike if you alter, transform, or build upon this work, you may distribute

the resulting work only under the same or similar license to this one.

With the Understanding That: Waiver Any of the above conditions can be waived if you get permission from

the copyright holder.

Other Rights In no way are any of the following rights affected by the license:

o Your fair dealing or fair use rights;

o The authors moral rights;

o Rights other persons may have either in the work itself or in how the work

is used, such as publicity or privacy rights.

Notice For any reuse or distribution, you must make clear to others the license

terms of this work. The best way to do this is with a link to this web page.

What this all actually means:

The Beginners Guide to Integrating Facebook and Wordpress

2009 http://projectheresy.com -2 - ph.
http://projectheresy.com/http://projectheresy.com/http://wiki.creativecommons.org/Frequently_Asked_Questions#When_are_publicity_rights_relevant.3Fhttp://wiki.creativecommons.org/Frequently_Asked_Questions#When_are_publicity_rights_relevant.3Fhttp://wiki.creativecommons.org/Frequently_Asked_Questions#I_don.E2.80.99t_like_the_way_a_person_has_used_my_work_in_a_derivative_work_or_included_it_in_a_collective_work.3B_what_can_I_do.3Fhttp://wiki.creativecommons.org/Frequently_Asked_Questions#I_don.E2.80.99t_like_the_way_a_person_has_used_my_work_in_a_derivative_work_or_included_it_in_a_collective_work.3B_what_can_I_do.3Fhttp://wiki.creativecommons.org/Frequently_Asked_Questions#Do_Creative_Commons_licenses_affect_fair_use.2C_fair_dealing_or_other_exceptions_to_copyright.3Fhttp://wiki.creativecommons.org/Frequently_Asked_Questions#Do_Creative_Commons_licenses_affect_fair_use.2C_fair_dealing_or_other_exceptions_to_copyright.3Fhttp://creativecommons.org/licenses/by-nc-sa/2.5/au/http://creativecommons.org/licenses/by-nc-sa/2.5/au/


3/45

You can distribute this guide, as well as any improvements to the process/steps I describe,

as freely as you want, as long as you dont charge for it, and as long as any re-distribution

is made under similar license conditions to these ones.

Disclaimer

The author has made every effort to ensure the accuracy of the information herein.

However, the information contained in this book is sold without warranty, either express

or implied. Neither the author, not any associated business or website/presence, nor its

dealers or distributors, will be held liable for any damages caused either directly or

indirectly by the instructions contained in this book, or by the software or hardware

products described herein.




4/45

About

One of the things that frustrates me about the Interwebs is nothing

I need is ever in one spot (hence this guide).

My wish for simplicity drives most things I do, including my

other business and ventures.

And heres where I get to (rather shamelessly) plug my other

interests. Well, this guide is free, so its a fair price I am sure you

will agree (come now, dont be unreasonable).

If you like knowing where to find great coffee, or want to help

your other human friends find great coffee, then visit wherespresso.com where you can

submit, find, rate and review great coffee anywhere.

If you are planning on going to France to cycle, follow the Tour de France, do LEtape du

Tour or just, well, visit France, you should definitely check out my totally awesome guide

to Cycling through France at tdftips.com or cyclinginfranceguide.com. Ive pulled

together ALL the information you need to know to travel to and/or cycle in France into

one awesome guide.


http://projectheresy.com/http://projectheresy.com/http://cyclinginfranceguide.com/http://cyclinginfranceguide.com/http://tdftips.com/http://tdftips.com/http://wherespresso.com/http://wherespresso.com/


5/45

Table of Contents

......................................................................................................................Introduction 6................................................................................This Web2.0 Business What is It? 7

.........................................................................................................Facebook Goodness 9........................................................................................................Facebook Connect 9.........................................................................................................Facebook Pages 10.......................................................................................................Networked Blogs 11

..............................................................................................Blog Feed to Facebook 11............................................................................................Lets Get this Party Started 12...........................................................................................Pre-work & Assumptions 12

................................................................................................Creating your FB App 12.........................................................................Getting FBC Working on Wordpress 18

...................................................................................Blog RSS Feed into Facebook 22................................................................................Submitting to Networked Blogs 24

........................................................................................................Fan/Brand Pages 30...............................................................................................Bringing it all together 30....................................................................................................................Summary 45




6/45

Introduction

This is an expanded guide to the post that appeared on Project Heresy.

This guide is not intended as the be-all and end-all guide to integrating Facebook andWordpress.

Rather, it is intended to get 6 elements working on your Wordpress site and Facebook

presence ASAP. Below youll see the elements along with the time I think youll need to

get it working. Facebook App 30 minutes to set up Facebook Connect 10 minutes Facebook Blog Feed 10 minutes Your blog into Networked Blogs 10 minutes Setting up Facebook Pages 5 minutes (per page)

Adding Networked Blogs and fan page widgets to your site 2 minutes perwidget per page

Bringing it all together (cross posting Networked Blogs blog feed into your Fan

Page and Profile page, adding your FB app WP feed to your personal profile)

about 30-60 minutes depending on how many blogs and feeds and pages you need

to bring together (in my examples, I have 2 pages, 4 Networked Blogs feeds and a

few sites to badgetise)

Sound confusing? Not so, my padawan FacePress ninja. Read on for enlightenment and a

general sense of wonderment.

Remember, this is for beginner-intermediate users only.


http://projectheresy.com/http://projectheresy.com/http://projectheresy.com/http://projectheresy.com/


7/45

This Web2.0 Business What is It?

This Web2.0 business can be a bit overwhelming: Facebook, Twitter, FriendFeed, Ning,

Vimeo, Digg, Delicious, StumpleUpon the list of sites and services is ever-expandingand pretty confusing (have you seen Foursquare yet?).

For me though, two services clearly stand out Twitter and Facebook. Both are great for

communicating with users and getting information and news out. I dont have a personal

FB account as I personally abhorr the noise from people but its a great business tool

nothing more (FB have done a great job of convincing people its a great personal tool

too).

The killer reason I use Facebook and Twitter is for interactivity and integration with

people. Remember you want to create a tribe, and you should go to where your customers

are, and this, in ever-increasing numbers, is on Facebook and Twitter. If youre not there,you dont exist (same for Google indexing).

So read on if you want to get a lot more eyeballs on your website, and to bring your site

into Facebook, Facebook users to your site and therefore provide scale for visitors and

interactivity.

This is a beginners guide only; there is a lot of really spiffy stuff you can do with

Facebook but this will just deal with getting Facebook Connect working on your site,

getting your blogs feed into a Facebook App, as well as covering some of the other stuff

you can do with Facebook like creating pages and adding your blog to Networked Blogs

so you can add them to blog networks and create widgets for your Wordpress site. Allthese are great for interactivity and social proof (i.e. oh, this site has 2000 followers on

their FB Networked Blog so Ill join too).

I wont deal with Twitter as its a snap to integrate as a Wordpress widget, you can find

information on that at Twitter.

So onto Facebook!

Below Ive created a very quick and dirty map of how I am pulling bits and pieces of FB

together into the website. Feel free to copy any elements and code; Ive grabbed code and

ideas from elsewhere anyway.


http://projectheresy.com/http://projectheresy.com/http://twitter.com/goodieshttp://twitter.com/goodies


8/45




9/45

Facebook Goodness

Facebook Connect

I recently needed to integrate Facebook Connect into wherespresso.com and tdftips.com

so that users could sign in to make comments and submissions and share comments back

to their wall.

This is beneficial for a couple of reasons. Firstly, it makes signing in to make comments

familiar (hundreds of millions have FB accounts) and seamless for users. If the site

visitor is already logged in to FB, FB Connect (FBC) and your site will know this, and a

small window will display showing the user they are logged in (see below).

Less friction, more cohesion and familiarity.


http://projectheresy.com/http://projectheresy.com/http://tdftips.com/http://tdftips.com/http://wherespresso.com/http://wherespresso.com/


10/45

Secondly its a form of social proof that people are on your site; it improves adhesion,

cohesion and by people using their FB account to comment, chances are theyll share this

comment on their wall, which improves the visibility of your site.

Facebook Connect relies on you creating a FB Application which will give you an API

key and App password to use on the Wordpress side.

Facebook PagesFacebook Pages are excellent for helping to create a following around a brand. You can

bring together blog feeds, video, users, photos and discussion forums to build content

around your brand. Its a place where anyone can go all-in. Be prepared for completely

transparent behaviour though.


2009 http://projectheresy.com -10- ph.


11/45

Networked Blogs

Networked Blogs is basically a Facebook app where you can submit your blog and it then

pulls the feed into its registry of blogs. Its a great networking and find-me tool, and

also allows you to (after adding the NB app to your personal page/profile) send the feed

to your personal wall and a Facebook Page which is great for visibility and reach of your

blog.

Blog Feed to Facebook

Creating a Facebook App allows you to bring your blogs RSS feed into the app and then

re-post it to your personal profile page or wall. Again, this is good for visibility and reach

but perhaps made redundant by the Networked Blogs app.




12/45

Lets Get this Party Started

Pre-work & Assumptions

Im going to assume youre on Wordpress 2.8.4 and using Thesis. If youre not using

Thesis, thats totally cool; it wont make a material difference to the instructions, but

Thesis is a rad theme and you should definitely check it out.

Thesis makes things very easy and is great for SEO. Its a framework theme, so the core

files never change meaning when you upgrade the theme, you dont lose your custom

tweak as they are all stored in custom style and function files and called via hooks.

Creating your FB App

Creating an app is very easy; you only need a FB account. Just go to here and click on

the Set Up New Application button.

Creating an app provides a handle or holder for FB Connect and Blog Feed to FB

functionality.

A FB App has 7 sections for completion: Basic Authentication Profiles Canvas Connect Widgets Advanced

Chris Wallace has a pretty handy guide here as does this site but I found some

configuration items missing. Ive detailed these below, as well as what you should use.Ive left most of my fields free in the App settings in Facebook; stuff like privacy

information page, support page etc will be dealt with later when more users use the app.

As the app is simply for Facebook Connect and drawing the blogs RSS feed into FB,

Ive only configured minimal settings.


http://www.chris-wallace.com/2009/01/07/five-easy-steps-to-integrate-facebook-connect-with-your-blog/http://diythemes.com/thesis/?a_aid=4a80cc0a28f4f&a_bid=d1c60af6http://diythemes.com/thesis/?a_aid=4a80cc0a28f4f&a_bid=d1c60af6http://projectheresy.com/http://projectheresy.com/http://www.thewhyandthehow.com/integrating-facebook-connect-using-the-thesis-theme/http://www.thewhyandthehow.com/integrating-facebook-connect-using-the-thesis-theme/http://www.chris-wallace.com/2009/01/07/five-easy-steps-to-integrate-facebook-connect-with-your-blog/http://www.chris-wallace.com/2009/01/07/five-easy-steps-to-integrate-facebook-connect-with-your-blog/http://www.facebook.com/developers/http://www.facebook.com/developers/http://diythemes.com/thesis/?a_aid=4a80cc0a28f4f&a_bid=d1c60af6http://diythemes.com/thesis/?a_aid=4a80cc0a28f4f&a_bid=d1c60af6http://diythemes.com/thesis/?a_aid=4a80cc0a28f4f&a_bid=d1c60af6http://diythemes.com/thesis/?a_aid=4a80cc0a28f4f&a_bid=d1c60af6


13/45

STEP 1.

Essential Information:

Agree to Terms and Conditions

Time needed: 1 minute

Elapsed time: 1 minute (so far so good!)

STEP 2: Basic Information.

Youll notice here that the App now has an App ID, API Key and Secret. You need the

API Key and Secret for FB Connect and another plugin well be using to get your blog

into Facebook.

I didnt add a description, a Privacy URL, Help URL or Terms of Service URL as I only

need this App for parsing my blog into WP, and for FB Connect. My other apps (tdftips

and wherespresso) are more user-focussed so have all these sections completed.

Add a description, a logo will be useful, so will an icon it gets used as a favicon. This

makes your app look pro, so do it.

Your Help, Privacy and ToS URLs can just be pages on your blogs so put something in

but make sure you create at least a matching page on your blog.

For example, if you make the Privacy URL http://yourdomain.com/privacy then thats

what you put in the field below.


http://projectheresy.com/http://projectheresy.com/http://wherespresso.com/http://wherespresso.com/http://tdftips.com/http://tdftips.com/


14/45

Time Needed: 10 minutes not including time spent mucking around choosing a super-cool logo but including creating dummy pages for your Help/Privacy/ToS URLs (no

content).

Elapsed time: 11 minutes. Crazy!

Right now, youre thinking, whoah this is easy. And youd be right.

STEP 3 Authentication

Easy as breathing! See below. 1 minute!

Elapsed time: 12 minutes.

STEP 4 Profiles

If this takes you more than 1 minute (and thats being generous), you need to take a good,

hard look at yourself.

Elapsed time: 13 minutes




15/45

STEP 5 Canvas

Again, this is easy. Make sure your iFrame size is resizable. Things will get ugly if its

not.

You can put your main URL of your home web site as the Bookmark URL.






16/45

STEP 6 Connect

This is where I ran into trouble initially as I had trouble finding any meaningful reference

to what the Connect URL should be until I read this.

The missing stuff I needed was Connect URL and Base Domain. In your apps settings,

under Connect, set

Connect URL -> your blog/sites home URL WITH http://Base domain -> your blog/sites home URL WITHOUT http://

Add a Facebook Connect logo if you desire.

The image below shows my settings, I will add more as I learn more about the API.




http://projectheresy.com/http://projectheresy.com/http://wiki.disqus.net/SitePlugins%23FacebookConnecthttp://wiki.disqus.net/SitePlugins%23FacebookConnect


17/45

STEP 7 Widgets

Leave for now.

STEP 8 Advanced

Leave for now.

Done!

If you slammed this, 15 minutes would have been enough.If you spent some time reading, looking at images for your logo etc, 30 minutes is more

than enough.

Well done, now youre a Facebook App owner and developer! Now we can get the rest

of the tasks done. So, now onto Facebook Connect.




18/45

Getting FBC Working on Wordpress

After creating your FB app, you need to install the FB Connect Wordpress plugin and add

the API Key and Secret in the widget configuration. Easy so far right? Were almostthere.

You need to do two things now; add a special html file to your domain and configure your

theme to display the FB Connect login at the comment form.

Facebook needs a special file called xd_receiver.html to make Connect work.

Simply copy the code below into a text editor and save it as xd_receiver.html. Upload to

your web host. Take note of the absolute path to the file, i.e. http://yourdomain.com/

folder/xd_receiver.html.


http://yourdomain.com/folder/xd_receiver.htmlhttp://wordpress.org/extend/plugins/wp-facebookconnect/http://projectheresy.com/http://projectheresy.com/http://yourdomain.com/folder/xd_receiver.htmlhttp://yourdomain.com/folder/xd_receiver.htmlhttp://yourdomain.com/folder/xd_receiver.htmlhttp://yourdomain.com/folder/xd_receiver.htmlhttp://wordpress.org/extend/plugins/wp-facebookconnect/http://wordpress.org/extend/plugins/wp-facebookconnect/


19/45

Cross-Domain Receiver Page

The last thing you need to do is get the Facebook Connect functionality to display near

the user comments form.

If youre using Thesis, or another Wordpress theme that uses framework architecture (that

is, it uses hooks to access custom functions and styles), then add the below code to your

custom_functions.php (or whatever its called for your theme) file. By adding the code to

your custom_functions.php file, when you upgrade Thesis/your theme or even WP, thefile wont be overwritten, so your custom changes are maintained (Mr Chris Pearson is an

awfully clever guy).

The only two changes you need to make to the below code is to add your API Key where

[API_KEY] appears. Leave the quotation marks!

If youre not using Thesis, youll need to change your hook calls.

Change the URL that resolves the xd_receiver.html file to the path it resides on on your

web host.

Done!


http://projectheresy.com/http://projectheresy.com/http://projectheresy.com/


20/45

add_action('thesis_hook_after_post', 'fb_comment_box');

add_action('thesis_hook_after_post', 'fb_comment_plug');

add_filter('language_attributes', 'add_fb_xml_ns');

function add_fb_xml_ns($content) {

return ' xmlns:fb="http://www.facebook.com/2008/fbml" ' . $content;

}

function fb_comment_box() {

if (is_single()) {

?>

Comments:

FB.init("[API_KEY]", "http://

www.yourdomain.com/wp-content/themes/thesis/custom/xd_receiver.html");


21/45

WP comment form, not both, or neither. If someone has the correct code to get that

working, I sure would like it.

You can run a few test posts and make sure its all working. You should see something

like the below image.

Youll be able to see a logged-in notification on the page as well.




22/45

Blog RSS Feed into Facebook

Now, this is really easy. Now that youve already created your app, and added your sites

info in there (just use the home URL for blogs; FB picks up the RSS feed by itself, even

if you redirect it to Feedburner) you can now install the WPBook Wordpress plugin.

Activate this plugin then wack in your API Key and Secret and canvas page URL (which

would be projectheresy for my example above, i.e. exclude the http://

apps.facebook.com/).

The other options can be chosen however you need them, but I set it up as shown below.


http://wordpress.org/extend/plugins/wpbook/http://projectheresy.com/http://projectheresy.com/http://wordpress.org/extend/plugins/wpbook/http://wordpress.org/extend/plugins/wpbook/


23/45

If you go to your canvas page URL, you should be able to see your site being sucked into

Facebook land. Voila! You, and others, can now add this feed to your Facebook profile.

Once you have 10 users, you can submit it to the Apps directory.




24/45

Time needed: 10 minutes

Yay! Now, send that Canvas Page URL to your friends and get them to add it to their

profiles. Once 10 of them have done that you can submit the app to the FB apps directory

and (pending approval) everyone can add it.

You can see the apps I made here and here. You can see how they work at http://

tdftips.com and http://wherespresso.com.

Submitting to Networked Blogs

Networked Blogs is a big blog directory so you need to be on there.

You do NOT need to create a FB App to make this work, but Ive included it for ninja

completeness.

Go to their Facebook App and click the + Add a New Blog button. Whilst it looks like

youll have to follow 5 blogs first, you dont.

If you are really cool, search for Shredquest, Wherespresso and tdftips and add them

(only Really Cool people will actually add them so dont worry if your subconscious

doesnt allow you to do it).

Then fill in the details requested (screenshot below). The blog name can be different

from your actual blog name but it makes sense to keep them the same for cohesion and

uniformity. You definitely want something meaningful, which can be added to the

tagline.

Click Next then Uncheck the next Trackle option (or leave it, if you want to receive

their stuff).


http://apps.facebook.com/tdftips/http://apps.facebook.com/wherespressohttp://tdftips.com/http://projectheresy.com/http://projectheresy.com/http://apps.facebook.com/blognetworks/http://apps.facebook.com/blognetworks/http://www.networkedblogs.com/http://www.networkedblogs.com/http://wherespresso.com/http://wherespresso.com/http://tdftips.com/http://tdftips.com/http://tdftips.com/http://tdftips.com/http://apps.facebook.com/wherespressohttp://apps.facebook.com/wherespressohttp://apps.facebook.com/tdftips/http://apps.facebook.com/tdftips/


25/45

Next youll be asked if youre the author of the blog if you are, click YES.

At this point you have two choices send the link to your friends and get them to verify

you, or, get some code and put it on your blog in a widget which will verify you

immediately. Its not hard so lets take that option.




26/45

Next youll be given some code to put in a text widget in Wordpress. Grab the code,

create a new Text widget in Wordpress and paste it in. Save the widget, go back to

Facebook and click Verify Widget.




27/45

I know, right? Good times.




28/45

You should now see something like the below. We need to enable some Feed Settings

now so that this feed goes to your personal profile wall (remember all of this work is

performed when logged in to Facebook, so its going to prompt you to do stuff to your

personal profile too). See below.

Editing feed settings. If you have FB Pages like I do below, you can configure to publish

to these too.




29/45

Next up, you want to send the URL of this page to all your friends and get them to follow

it. The URL will be http://apps.facebook.com/blognetworks/blog/. Get

your friends to follow that sucker!

Now, remember how we put that code in a widget? Well you should see a nice badge on

your page that will show the followers and allow people to follow.

Now thats all done, we have our blog submitted to Networked Blogs so that people can

follow it from your site or from within Facebook. Seamless integration and social proof

of your blog/sites awesomeness.


http://projectheresy.com/http://projectheresy.com/http://livepage.apple.com/http://livepage.apple.com/


30/45


31/45

2. Add Networked Blogs blog feed to your FB Fan/Brand page.

3. Add Networked Blogs blog to your FB Profile (your personal FB profile) blog

visibility, social proof and clean integration.

4. Add a fan page widget to your blog blog visibility, social proof and clean

integration.

Add a Networked Blogs widget to your FB Fan/Brand Page (completed as part of theNetworked Blogs implementation) blog visibility, social proof and clean

integration.

Step 1 Adding Blog Feed to your Wall Info

This may be rendered superfluous by doing Step 3 (as described above).

Bring up your Canvas URL in a browser window. Click that Add to Profile button.

Now, allow the App to access your profile. Now its added to your wall. Sweet. Next!




32/45

Step 2: Adding Networked Blogs blog feed to your FB Fan/Brand page

There are two ways to get your Networked Blogs feed onto your FB fan/brand page. You

can go to your Apps URL and Edit the Feed Settings, or go to your Page and pull the

App in that way. Both methods are shown below.

After this has been done, we can add FB Fan Page Widgets to our blog.

Method 1.

Go to your apps URL (e.g. http://apps.facebook.com/blognetworks/blog/)and click Edit Feed Settings.


http://livepage.apple.com/http://projectheresy.com/http://projectheresy.com/http://livepage.apple.com/http://livepage.apple.com/


33/45

Youll then see this.




34/45

Click Configure, Publish a Test Post you may need to grant permission here, so do so.

Then click Visit your page to see it.

Boom!




35/45

Method 2.

Go to your FB Page (NOT your profile). Click the Blog tab. This automatically

installed itself when I installed the Networked Blogs app.

Youll then get something like this. Click Click here to verify your settings.




36/45

Now youll see this. Choose which blogs you want to appear on your Wall Tab or just

Tab. I chose Wall+Tab for maximum flexibility and visibility.




37/45

Before saving the settings, click Click here to allow publishing to your fan page.

Youll see the below dialogue. Choose Allow Publishing.




38/45

BOOM! You now have your Networked Blogs blog feeds auto publishing to your FB

fan/brand page. Hands off and automated. Repeat for your other pages.




39/45

Step 3 Add Networked Blogs blog to your FB Profile

Go to http://apps.facebook.com/blognetworks then click on Profile. Click on the Add to

Profile button. This assumes youve installed the Networked Blogs FB App itself

(which you can do from here.

If you do not see Add to Profile button its because youre not following any blogs or

youre already publishing the feed to your wall. Make you sure you follow your own by

clicking follow from http://apps.facebook.com/blognetworks/blog/.


http://projectheresy.com/http://projectheresy.com/http://livepage.apple.com/http://livepage.apple.com/http://www.facebook.com/apps/application.php?id=9953271133%23/networkedblogs?v=wallhttp://www.facebook.com/apps/application.php?id=9953271133%23/networkedblogs?v=wallhttp://apps.facebook.com/blognetworkshttp://apps.facebook.com/blognetworks


40/45

Youll then see this. You can (shall!) test this for yourself. Click Next. Youll be asked

to select 5 blogs to follow. You can ignore this. Done, so go back to the start of this step.




41/45

You can also achieve this step by going to the Networked Blog URL for your blog, then

choose Edit Feed Settings. This will let you post the feed from the blog to your personal

profile.

Step 4 Adding a FB Fan Page Widget to Your Site.

Man, we are so close to being done. Go to your FB Page. Click Add Fan Box to your

site. You can also go to to Facebooks widgets and badge page.


http://projectheresy.com/http://projectheresy.com/http://www.facebook.com/facebook-widgets/pagebadges.phphttp://www.facebook.com/facebook-widgets/pagebadges.php


42/45

Now youll see the below screen. Choose what content to include, your blogging or page

platform (i.e. Choose where to add it for most readers of this guide it will be

Other), then grab the code. Paste the code into a widget and youre done.

Youll see the Page badges link in the image below. You can also add Page badges on

your site.

You can choose to edit the badge which allows some control over content.




43/45

Once again, get the code and put it in a widget on your site.

Done.

Step 5 Networked Blog Widget to your WP Site

We already did this in the section where your blog was submitted to Networked Blogs

and then verified (remember, we put the code we were given into a widget, then verified

from back in Facebook) but to recap:

From your Networked Blogs blog URL (e.g. http://apps.facebook.com/blognetworks/

blog/), click Widget. Get the code if you have not done so, and put in

a widget.

Done.


http://livepage.apple.com/http://projectheresy.com/http://projectheresy.com/http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/


44/45




45/45

Summary

Wow that was a lot of work, so if you got this done, well done.

Most of this was very straightforward, but if you need some help, drop me a line from the

projectheresy.com website, via the Contact Form or via twitter on @projectheresy.

The finished product will look something like the below. Ive quickly added the

Networked Blog widget, as well as a Fan Page badge.

You can do some more reading at: http://developers.facebook.com/get_started.php http://developers.facebook.com/connect.php http://wiki.developers.facebook.com/index.php/Facebook_Connect http://wiki.developers.facebook.com/index.php/WP-FBConnect http://www.smashingmagazine.com/2009/09/14/how-to-integrate-facebook-with-

wordpress/

http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/http://livepage.apple.com/http://wiki.developers.facebook.com/index.php/WP-FBConnecthttp://wiki.developers.facebook.com/index.php/WP-FBConnecthttp://wiki.developers.facebook.com/index.php/Facebook_Connecthttp://wiki.developers.facebook.com/index.php/Facebook_Connecthttp://developers.facebook.com/connect.phphttp://developers.facebook.com/connect.phphttp://developers.facebook.com/get_started.phphttp://developers.facebook.com/get_started.phphttp://twitter.com/projectheresyhttp://twitter.com/projectheresyhttp://projectheresy.com/http://projectheresy.com/

Beginners Guide to Integrating Facebook and Wordpress

Documents

Transcript of Beginners Guide to Integrating Facebook and Wordpress