Connecting Facebook and SilverPen Publishing

As a blog author, I have a variety of goals when writing and posting an entry. I want to help or inform people, and I also just want to write for the sake of writing. But there is most assuredly a part of me that wants feedback, community, and discussion, primarily in the form of comments on individual entries.

This has been happening regularly on Facebook, which imports all of my blog entries as notes, and that’s great. Unfortunately, those comments can’t be moved or copied from Facebook to my primary site, so the conversation happens there among a small group of my Facebook Friends while general visitors to my site never see them. I’ve only had a few hundred comments on SilverPen articles here locally, but that number would easily double or triple if comments left on Facebook were added in.

Because of all this, I have been seeking a solution to the Facebook-Comment issue. My initial desire was some sort of plugin or API hook to simply copy comments left on Facebook notes to their corresponding entries on SilverPen, but this has been tried and failed. Facebook’s API changes too often, and though it has opened up some in the last year or so, it is still pretty walled off. Comments simply can’t be taken out reliably.

Therefore, my desire became channeling people from Facebook to my site, so they comment here instead of there. To do that, I needed to integrate my site with Facebook.

To this end I have employed the built-in Facebook Notes Import feature in Facebook and the WPFacebook-Connect plugin. My original intent had been to use the WordBook plugin and stop using Facebook to grab my RSS feed, but upon attempting to publish this post it failed in a horrible, fiery way. Shocked and dismayed, I looked at some other options and then hit upon an idea that seemed both elegant and simple. I will have Facebook keep importing my notes through RSS, turn off commenting on Facebook notes, and modify my Feedburner Feed to add a comment button to the end of each post. Nearly the same end-result with one less plugin and a lot less fidgeting and work. I’m a bit disappointed I hadn’t thought of this to begin with, to be honest.

The next step was far more complicated and cumbersome, but I thought it important that Facebook users who are being forced to go to another site to comment be able to do so pretty effortlessly. WPFacebook-Connect allows single sign-on between my WordPress blog and Facebook, so Facebook users can connect to their Facebook account with a single click and then comment.

Of course, a fair few modifications had to be made to SilverPen for this all to work.

Login Page

Login Box

When you first install WPFacebook-Connect, your login page may look pretty janky. I have a custom login page (designed by the same genius who did my theme, Ryan Burrell) and it broke badly when the “Connect” button slapped itself on there, so I had to style it a bit.

Unfortunately, this button is the same one used in the blog comment area, so modifications here affect those pages as well. In addition, it’s not immediately obvious how to style this. The div tag used for this button isn’t listed anywhere other than the common.php file and there is no corresponding CSS to modify–by default, it is unstyled. Add something like the following to the fbconnect.css file in the /plugins/wp-facebookconnect folder.

.dark {
 position: relative;
 float: right;
 margin: 0 19px 0 10px;
}

The div in question is simply .dark (for reasons I don’t quite understand, though I appreciate the terror some might experience when connecting to Facebook), and the above code floats it to the right so it doesn’t break anything and then lines it up with my login boxes.

Comment Area

Connect Box

Because the stupid button is styled off .dark and is used on both the login page and for the comment form, you can’t style them differently. I went round and round about this, trying to figure out how to do it, and came to the conclusion that the button would have to be duplicated in the code and one set up with a different style. This seemed like it might break some functionality and I wasn’t confident enough to give it a go, so I decided to work around it.

The above code meant my button on the comment page was off-set to the right, rather than being properly centered inside the border I created for it with:

.fbc_connect_button_area {
 float: right;
 border:2px solid #D5D5D5;
 color:#417378;
 width: 160px;
 text-align: center;
}

Note that width element, though. I decided if I couldn’t beat it, I’d work around it, so I just centered the text and tweaked the box size until the button looked centered. /smug

The float: right up there is to move the whole thing over to the right and not break anything. If you’re curious, I placed the FBConnect code (per step 2 of the instructions for WPFacebook-Connect) right after the else statement in my comment.php, a la:

<li><strong>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>"
title="Log out of this account"> Log out &raquo;</a></strong></li>
<?php else : ?>
<?php do_action('fbc_display_login_button') ?>
<li>
<label for="author">Name <?php if ($req) echo "<span>(required)</span>"; ?></label>

Profile Header

Facebook Profile Box

When someone is connected through Facebook, it adds a little box to the top right of your WordPress blog with their name, picture, and an option to log out. Of course, you can move this anywhere you like, but I chose to leave it up there. In addition, per Ryan’s recommendation, I styled it with Facebook’s colours so it would actually make sense (instead of looking ugly and out of place–by default it has a white background, the font is browser default, and the font colour is dark blue).

.fbc_profile_header {
 text-align: right;
 padding-top: 10px;
 padding: 5px;
 border:2px solid #8B9DC3;
 background: #3B5998;
 color: #fff;
 width:160px
 font-size: 0.5em;
}

What all this unfortunately means is every time the plugin is upgraded I’ll have to go back and make these changes again. Thank goodness I have it all documented in a handy blog post ^_^

Conclusion

Though the process was a bit tedious (due mostly to my own ignorance), I learned some new things about both PHP and CSS by implementing this, and I’m excited to see it work decently because I would like to use this same setup for the new Help Desk website I’ve been working on. We’d like people to be able to comment and interact with us using the accounts they already have, so knowing how to connect Facebook and WordPress is going to be a big help.

My next curiousity is to see how people interact with the new comment-redirection from Facebook notes and the ability to connect SilverPen Publishing and Facebook. Will you comment and give it a try?

3 thoughts on “Connecting Facebook and SilverPen Publishing

    1. Protest all you want, you’ve got to admit that single sign-on between my blog and Facebook is pretty cool 😀

      Ironically, it doesn’t appear to have picked up your Facebook account… wonder why. Did you sign out of Facebook before commenting?

  1. Hm, I might have to try this. I get annoyed that all my comments happen on the facebook notes and my blog just looks like a ghost town for the lurkers that read it. I’ll have to bookmark this for later reference.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s