I finally got Simple Facebook Connect working between the St Nick’s webpage and the Facebook page, mostly.

It was both simple and not simple: Facebook had changed the look of their Apps page, and there is more than one Apps page. So one “how to install this app” tutorial I tried to follow was visually outdated, but a text update had been added at the bottom.

The plugin developer had not bothered to remove screenshots on an old blog post on his site, but added a terse update noting that the instructions in the plugin readme.txt file and on the options page are correct, and that the link to the correct Apps page was correct. Also, to link to a Page (business page, fan page), where the Option page says “Enter the ID of your page,” he means the number contained in your Facebook fan or business page, not the entire URL.

Once I finally got that, and deleted the duplicate app I created with the wrong domain name, and recopied and pasted the correct app ID and Secret key, and saved, and authorized additional permissions for SFC and saved AGAIN, I was good to go.

It now automatically reposts from blog post to Facebook page, and I can manually publish both posts and pages.

I followed instructions at the developer’s website to get the enhanced comments working. Code details in the extended post.

I’m using a different plugin, Tweet Like Share +1, to add more share boxes. They don’t seem to conflict now, after enabling SFC first, then enabling TLS+1. Testing to follow, the SFC developer has +1 on his blog but doesn’t include it as an option.

Otto is rather… blunt about not using other Facebook plugins, so proceed carefully and follow directions to the letter. Your own assumptions, and selective blindness, are your biggest stumbling blocks when installing Simple Facebook Connect. Also, older posts and comments on his support sites can be helpful, but may be outdated.

Screenshots and the steps that eventually worked to follow.

Steps:

You do need to create a Facebook app via the correct link from the SFC option page after installing the app. Getting there is half the battle.

You also need to put your site main domain in one of two boxes on the Facebook settings page for your app. For the second box, I put the URL of the St Nick blog in the box for “getting WordPress to interact with Facebook.”

Following are the installation comments from the plugin website. There are also notes and screenshots at Otto’s website, but some details have changed thanks to Facebook. Go by the plugin directions, the readme.txt, and the Options page.

However, in the next version of WordPress, adding help documentation for plugins is really improved and Otto gives a sneak peek at some reworked installation/connection instructions. He also adds a quick fix warning against setting the wrong type of encryption, and the tutorial that’s soon to be completely outdated is here (it still has some basic information about accessing the geeky crawlspace under Facebook where the developer pages are).

The comments addon isn’t working!

You have to modify your theme to use the comments plugin.

(Note: If you have WordPress 3.0 and a theme using the new comment_form() method, then this step is not necessary).

In your comments.php file (or wherever your comments form is), you need to do the following.

Find the three inputs for the author, email, and url information. They need to have those ID’s on the inputs (author, email, url). This is what the default theme and all standardized themes use, but some may be slightly different. You’ll have to alter them to have these ID’s in that case.

Just before the first input, add this code:
[div id="comment-user-details"] [?php do_action('alt_comment_login'); ?]

(Replace the []’s with normal html greater/less than signs).

Just below the last input (not the comment text area, just the name/email/url inputs, add this:

[/div]

That will add the necessary pieces to allow the script to work.
UPDATE: This method worked for me – The Management.

If you’re using WordPress 3.0 and the new “comments_form” code (like in the Twenty Ten theme), then this is unnecessary! Check ottopress.com for info on how to upgrade your theme to use the new 3.0 features.

Facebook Avatars look wrong.

Facebook avatars use slightly different code than other avatars. They should style the same, but not all themes will have this working properly, due to various theme designs and such.

However, it is almost always possible to correct this with some simple CSS adjustments. For this reason, they are given an “fbavatar” class, for you to use to style them as you need. Just use .fbavatar in your CSS and add styling rules to correct those specific avatars.

Also note that Facebook “square” avatars are limited to 50 by 50 pixels in size. If your theme uses a bigger one, then it’ll get scaled up and may look bad. There’s no easy fix for this, as the other avatars offered by Facebook are not square shaped. If it returned those, then it could mess up many more themes. complain to Facebook and tell them to offer larger squared off avatars.

How do I use this Fanbox custom CSS option?

Well, first you have to learn CSS.

Next, try starting with this code in the custom CSS box:

.connect_widget .connect_widget_facebook_logo_menubar {} .fan_box .full_widget .connect_top {} .fan_box .full_widget .page_stream {} .fan_box .full_widget .connections {}

That should be enough to get you started.

How do I use this with multi-site across subdomains/subdirectories?

(This is a new feature to 0.21 and it has NOT been really tested well yet. You have been warned.)

Many people want to set up a “network” of sites, and enable SFC across all of them. Furthermore, they’d like people to stay “connected” across them all, and to only use one Facebook Application to connect their users. This is entirely possible with a bit of setup.

First, create your Facebook Application. It should use the base domain field as well as the normal fields. No subdirectories or subdomains anywhere. For this example, we’ll use “example.com”.

Next, you can add these to your site’s wp-config:

define('SFC_APP_SECRET', 'xxxxx'); define('SFC_APP_ID', 'xxxxx'); define('SFC_FANPAGE', '(this one is optional)'); define('SFC_IGNORE_ERRORS', true');

The first four are the exact same settings as on the normal SFC base configuration screen, and they will override those settings for the entire network of sites. In fact, when those are defined, the corresponding settings options won’t even appear. This may look odd at first.

The last one is a special override that causes the normal URL check to be disabled. This is because your URLs won’t match the Facebook settings, but in this case, they don’t actually need to.

With this setup, SFC should work across all your subdomains and subdirectories. So it’ll work on example.com or blog.example.com or otto.example.com or whatever. It should also work on example.com/blog.

The “base domain” setting on your Facebook application is important. In this case, it MUST be set to the base domain (example.com), so that the cookies will be set there and thus will let you stay “connected” across the sites.

Notes: * SFC-Login may or may not work. It’s hard to say. Try it, it might work. I need more info to debug this. * Using other base domains with the domain mapping plugin absolutely will NOT work. Period. The redirection to the base domain for login breaks SFC-Login, because there is no way for Facebook to stay connected across domain names.

Email me if you have problems… But only if you’re also willing to help solve those problems, I can’t reproduce most setups and I can’t fix what I can’t see.

UPDATE: The regular login part of the module and the comments are working; I checked every box and soon afterwards noticed that some commenting that was going on in a blog post that had been migrated to Facebook was showing up on the blog side.

Note to self: may need to change my Gravatar picture to something other than June Cleaver saying “Profanity is FUN!” At least for the church blog. Also, it wasn’t that hard to write most of this on my new iPhone. Hence the goofy looking screenshots.

Link: WordPress › Simple Facebook Connect « WordPress Plugins

Next: I’ll look at what the widgets might do.

creenshot: