In my first article about WordPress, I’ll show you how to easily add a page to your WordPress site that allows your users to invite their Facebook friends to check out your website.
You’ll first need to have Facebook Connect up and running on your site. More on that later.
What I did was make a WordPress Theme Template that will display the Facebook Invitation screen, complete with a friend selection box. It automatically pulls your website name, URL, and description to populate the Facebook invitation fields.
The reason I made this a theme template instead of a plugin, is because plugins are generally slow. WordPress loads all the code for the plugin on each page, whether the code is needed or not. This takes up valuable memory. Plus, the plugin gets called every time a page load, further cuasing overhead. With a theme template, nothing is loaded until the specific page that needs it is accessed. Some other advantages of this method are: it will automatically show your invite friends link in your page navigation, it will show up in the search engines, and it will show up in your WordPress site search as well.
To use the theme template, simply upload the template file () to your theme directory, then create a new page in WordPress and select “Page – Facebook Invites” as the Template.
It should work just fine for standard themes that have a header, sidebar, and footer. You must already have a Facebook connect plugin working on your site, though.
The original plugin built by a programmer at Facebook is called WP-FacebookConnect. It allows your users to log in with Facebook and uses Facebook profile pictures automatically on comments. It also lets your users optionally post their site comments back to their Facebook profile.
The plugin that I’m using on this site is the Sociable.es Facebook Connect WordPress Plugin. It is more robust than the plugin above as it adds a nice widget to show recent visitors, your Facebook friends that use the site, and your friend’s site comments. I have further modified it to show the full Facebook stream (your home page or your friend’s wall) and to also show a full list of all your Facebook friends regardless of whether they use the site or not. I’ve reached out the original developer to see about rolling these enhancements into his plugin.
One thing to be careful of, though, with both of the above plugins: If you already have a large number of users, make sure they log in to your site first before connecting with Facebook or they will get a completely new user ID created on your site.
There are many other Facebook plugins for WordPress, so you might want to just search for some in the plugin directory. Please let us know if you find a particularly interesting one.
I’d like to thank Adam over at http://www.intafuse.com/ for asking me to help get this working on his site. It motivated me to build the theme template as the easiest way to handle this.
If you’d like to help me out, please just spread the word about my Facebook Applications and the XtremelySocial.com website. Or maybe you might be able to help me one day with some WordPress stuff. I’ve had people ask how they could donate money to help pay for my dedicated webserver, so I finally set up an easy way to donate with Paypal.
23 responses to “How To Allow Users To Invite Facebook Friends On Your WordPress Site”
Hello, this looks like it was a great solution to a problem I’ve been trying to solve for a long time! However, due to recent changes this month with FB’s FBML it no longer works.
Are you able to create an alternative solution at this time?
Thank you,
Joseph
Facebook wants us to use a “send” button now, which is an option when displaying a “like” button. You have to key in specific friends names rather than paging through a list of profile pics, but it does work pretty well. I’ll be rolling that out on this site soon.
See here for the Facebook documentation on it https://developers.facebook.com/docs/reference/plugins/like/
I’m using this great plug-in on my site. Actually, task is user can post idea to our site and they can invite fb friends to voting on their idea. So I need data to be submitted when I click on ‘Send Invitation’ button. Please reply me is their any solution for this. Thanks.
Every thing is okay as the contacts are coming on page , but when the “Send button is clicked, another window opens and lastly the page says ”
“The page you requested was not found
You may have clicked an expired link or mistyped the address. Some web addresses are case sensitive.
Return home
Go back to the previous page”
Where is ERROR ?
You are also requested to elaborate if the page has no lines like the one you suggested above , what should be done so that those lines appear.
Nishant
http://tenquestion.com
Hey this is a brilliant template/tool !! Thanks so much for developing this. I’m wondering whether a small tweak is possible. Right now, when you invite a friend, it doesn’t really show on the invitee’s notifications, nor does it display prominently on the invitee’s news feed/wall. Is there any way to post the invite on the invitee’s wall? Or to make it a private message?
Thanks a bunch!!
HI,
Thanks for the invite page, I currently have the fbconnect installed but I keep getting an error when I try to log using my facebook account
An error occurred with “My Website”. Please try again later.
Any help with be appreciated
Thanks for the info! I recently installed WP-FB-AutoConnect to my WP install. It was the only plugin that I found was compatible with BuddyPress.
I wonder if this is sufficient to use your theme template? What information does your tmeplate need? I guess I’ll find out when I take a look at your code.
Thanks again!
Giovanni
just testing this, don’t get all excited
[…] page that lets users invite their Facebook friends to your site. Please check our our article, How To Allow Users To Invite Facebook Friends On Your WordPress Site. Its easy to install and won’t tax your server. Please note that RPX does not support true […]
Hi,
I just installed sociable plugin and it works great. But I am not getting ‘change facebook status’ and ‘view facebook wall’ features as in your site. I think your sites has some cool facebook features. Can you kindly let me know where can I get the code for the facebook features in your site?
regards,
Davidson.
I did make some pretty significant enhancements and additions, but I’m hoping the original author will work with me. However, I noticed references to a “pro” version in his code. I think he’s planning on selling a more robust version. You should have the feature to update Facebook status… at least it was in version 2.0.2, which I’m running. The Facebook wall is definitely the biggest thing I added, but I’m not ready to release it and I also believe that’s one of the things the original author is going to have in his “pro” version.
i need help in installing sociable facebook connect, i installed the beta version 2.5.2 everything seems so well until i asked my friend to try the facebook connect button on my site but after he login/connect using his facebook nothing happens his avatar wont show in the visitors tab in the plugin and also in the friends tab. how can i fix this?
and also the Publish comment to Facebook button wont show in my comments.
i forgot to post the link : http://iamsiin.co.cc/
Siin, check out the javascript error on your site. Its an error in prototype.js, which is not part of Facebook Connect. Once a javascript error happens, then no other javascript will run on the page. So its some other plugin that is causing the problem.
i already removed the plugin and also deactivated the tool bar just to make sure but the problem still exist, i tried to login using my friends facebook account after i removed the plugin thats causing the problem but still nothing happens the avatar wont show next to my avatar.
I’m actually logged in to your site and I can invite friends. Its mainly the FB Connect widget that isn’t working. It looks like you might have two different plugins loading two different versions of jquery and/or thickbox.js. I would try disabling more plugins and maybe even try loading the default WP theme. Your issue is likely some sort of conflict and likely related to javascript.
still not working i change my wp theme to default and run the facebook connect plugin. maybe my facebook app is the problem, i looked at your app http://apps.facebook.com/xtremelysocial/ can you provide me the settings of the facebook app? cause mine is like loading the whole site into my canvas page http://apps.facebook.com/iamsiin/ including the theme i dont know how you made to show only the post.
“i looked at your app http://apps.facebook.com/xtremelysocial/ can you provide me the settings of the facebook app? cause mine is like loading the whole site into my canvas page http://apps.facebook.com/iamsiin/ including the theme i dont know how you made to show only the post.”
already changed i added the wpbook plugin.
Siin, that app is a custom Facebook app that I wrote that reads my WP database directly for the recent news. Its not loading my actual website at all. That feature in the FB Connect plugin doesn’t seem to work, at least not in v2.0.2 which is what I’m running. If WP Book works reasonably well for you, you might want to just keep that for now.
I think there is a javascript error with Buddypress, if you have buddypress, this might be the error…
I am unable to find the link of sociable.es Plugin. I installed FB’s connect plug but I am unable to see widget on my page. What could be the reason?
Thanks for trying out my code. Does the Facebook Connect plugin itself work? Can people log in and you see your Facebook profile pic on your site? If all that is working, then you should be able to enable the invitation page as follows:
1. Upload the template file (page-fbinvites.php) to your theme directory
2. Create a new page in WordPress and select “Page — Facebook Invites” as the Template.
Also, view the source on your page and make sure that you have something at the top on the line like this: xmlns:fb=”http://www.facebook.com/2008/fbml”.
Check that you have something toward the bottom of the page like this:
FB_RequireFeatures([“XFBML”], function() {
FB.init(“12345678901234567890123456789012”, “http://xtremelysocial.com/wp-content/plugins/fbconnect-xs/xd_receiver.htm”);
Those lines should be added by the Facebook Connect plugin itself. If you don’t have lines like those, then the plugin isn’t working.
[…] How To Allow Users To Invite Facebook Friends On Your WordPress Site […]