Upload
calvinrb
View
231
Download
0
Embed Size (px)
Citation preview
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/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -3 - ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -4 - ph.
http://projectheresy.com/http://projectheresy.com/http://cyclinginfranceguide.com/http://cyclinginfranceguide.com/http://tdftips.com/http://tdftips.com/http://wherespresso.com/http://wherespresso.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -5 - ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -6 - ph.
http://projectheresy.com/http://projectheresy.com/http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -7 - ph.
http://projectheresy.com/http://projectheresy.com/http://twitter.com/goodieshttp://twitter.com/goodies8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
8/45
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -8 - ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -9 - ph.
http://projectheresy.com/http://projectheresy.com/http://tdftips.com/http://tdftips.com/http://wherespresso.com/http://wherespresso.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -10- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -11- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -12- ph.
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=d1c60af68/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -13- ph.
http://projectheresy.com/http://projectheresy.com/http://wherespresso.com/http://wherespresso.com/http://tdftips.com/http://tdftips.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -14- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
Time needed: 1 minute
Elapsed time: 14 minutes
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -15- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
Time needed: 1 minute
Elapsed time: 15 minutes
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -16- ph.
http://projectheresy.com/http://projectheresy.com/http://wiki.disqus.net/SitePlugins%23FacebookConnecthttp://wiki.disqus.net/SitePlugins%23FacebookConnect8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -17- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -18- ph.
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/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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!
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -19- ph.
http://projectheresy.com/http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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");
8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -21- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -22- ph.
http://wordpress.org/extend/plugins/wpbook/http://projectheresy.com/http://projectheresy.com/http://wordpress.org/extend/plugins/wpbook/http://wordpress.org/extend/plugins/wpbook/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -23- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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).
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -24- ph.
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/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -25- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -26- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
27/45
I know, right? Good times.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -27- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -28- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -29- ph.
http://projectheresy.com/http://projectheresy.com/http://livepage.apple.com/http://livepage.apple.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
30/45
8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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!
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -31- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -32- ph.
http://livepage.apple.com/http://projectheresy.com/http://projectheresy.com/http://livepage.apple.com/http://livepage.apple.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
33/45
Youll then see this.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -33- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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!
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -34- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -35- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -36- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
37/45
Before saving the settings, click Click here to allow publishing to your fan page.
Youll see the below dialogue. Choose Allow Publishing.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -37- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -38- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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/.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -39- ph.
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/blognetworks8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -40- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -41- ph.
http://projectheresy.com/http://projectheresy.com/http://www.facebook.com/facebook-widgets/pagebadges.phphttp://www.facebook.com/facebook-widgets/pagebadges.php8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -42- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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.
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -43- ph.
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/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
44/45
The Beginners Guide to Integrating Facebook and Wordpress
2009 http://projectheresy.com -44- ph.
http://projectheresy.com/http://projectheresy.com/8/3/2019 Beginners Guide to Integrating Facebook and Wordpress
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/
The Beginners Guide to Integrating Facebook and 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/