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?

Doing Drop Caps Right

One day you’re writing along, minding your own business, and you hit a slight scene change. You’re not ready to end the chapter, and a simple transition sentence won’t be sufficient to thoroughly break away from the previous scene, so you’ve got to figure out how to make it clear to the reader that gears are being shifted.

In print, there are a few established way to do this, and typesetters will generally use an established special character (such as asterisks or squiggly symbols ( * and ~ respectively)) centered in the page between paragraphs to denote a full shift. A similar method can be used on the web, of course, but we can also easily use horizontal rules, pictures, or pagination to make our point.

I’ve always felt that these methods are too abrupt for most blog articles. Generally, blog articles are rather short affairs, and though a change in thought might call for some sort of indicator that a shift has occurred, there is no graceful way to do so. A horizontal rule or set of centered characters really breaks the reader’s stride when the truth is that only a subtle shift has occurred.

Therefore, when blogging, we need a more subtle indicator. Enter the drop cap.

I only started using these on my own blog recently when writing a series of articles on the Purpose, Power, and Presence of Design as part of a collaborative conversation. Shifting between narrative and my thoughts on design called for some sort of indicator that the tone of the article had changed, but that indicator needed to be slight. I’d seen drop caps used well to this effect in magazines and newspapers, so thought I’d give it a go.

The first plugin I found to achieve this effect was totally overkill, and did drop caps completely wrong. Yes, it technically worked, but it was limited in its customizability. I could either have drop caps used at the beginning of every paragraph, or at the beginning of the piece. The former is overkill, and the latter doesn’t serve my purposes.

When you have a nifty feature like drop caps, it is tempting to use them everywhere. Doing so completely ruins their effectiveness, though, because you no longer indicate anything to the reader other than the beginning of a paragraph, which should be properly conveyed through either a slight break in spacing between the paragraphs (which most WordPress themes do by default) or through indentation of the first line of a paragraph (not really suitable for most online print and generally going out of style in print publications).

Instead, you need a flexible way of using drop caps and employing them right where you want them. To this end, Ulysses Online has a great guide on how to create drop caps in just a few easy steps. You’ll have to be able to edit your CSS file (so this won’t be appropriate for a WordPress.com account if you haven’t bought the CSS upgrade), but it’s a pretty easy process.

Once you have that done, you have to manually enter your drop caps through the HTML view in WordPress. This is a bit of a pain, and though I’ve looked at a couple of guides for adding buttons to the Visual Editor in WordPress, I haven’t gotten it to work yet. Still, adding a span tag in the HTML editor isn’t all that bad, especially for such a handy visual tool!

Got questions? Feel free to leave a comment here and I’ll get back to you ASAP.

And remember, ONLY YOU can prevent poor typography.

Carrington 1.3 has been released

If you pay attention to your WordPress Dashboard (I notice mine every 2-3 days), you might have seen that version 1.3 of Carrington has been released. Carrington is the theme I use for SilverPen Publishing, but it’s more than a theme: Carrington is a unique shift in theme framework development and finds itself in a significantly more advanced category than your standard WordPress theme.

Simply put, it’s all kinds of wonderful, and I’ve really enjoyed having its style represent SilverPen Publishing. However, I have had to make a few tweaks to the theme, and when faced with an upgrade, I was hesitant to recommit myself to that task. All of those changes would have to be made once again, and I didn’t take notes on what I had edited because I didn’t think I’d have to do it again any time soon, let alone with this theme.

Most theme publishers write a theme, put it out for public consumption, and leave it. I never expect upgrades of a theme unless a major change in WordPress outright breaks the theme, and even then it doesn’t get upgraded most of the time. Alex King‘s a champ, though, and stands by his work. If I could laud him any more highly I would, but for now my praise and recommendation will have to be sufficient. Such dedication caught me by surprise though, hence the lack of notes.

Because there were some important security upgrades in this version, I went ahead and upgraded after backing up my current theme, and then spent some time going through and changing what I needed to. In addition, I actually took notes this time as I went, and I’m going to go ahead and post them here. As I read in someone else’s blog recently, notes for me, notes for you.

Reasons to upgrade:

From Alex King’s blog:

Version 1.3 of Carrington Blog is now available for download.

Upgrading is strongly recommended due to a security patch in this release.

This version has a couple of changes – both bug fixes and new features:

  • Added an image.php file for displaying media. This is not yet abstracted into the framework, but will be in the future.
  • Added a field to the settings page for adding in analytics code.
  • Fixed a problem with IE7 and the dropdown menus.
  • Explicitly send headers with AJAX responses, hopefully fixes some issues reported by Safari users.
  • Added a Log In link to the header.
  • Added code to load in translations.
  • Updated documentation.

Continue reading

Lightbox

Just a quick post about my foray into Lightbox. I started messing with this while writing about Flickr the other day, and after a bit of tweaking, I got it working.

You could just follow the steps on this page, but installing the plugin for WordPress is probably easier. The first, however, will allow you to use Lightbox wherever and however you like, while the latter will only work inside WP.

I, of course, followed the steps to do it manually (mostly because I didn’t find the plugin until after I was done and had it working *sigh* ). Something I discovered that might be of interest to you is that, while the instructions technically allow Lightbox to work, it 1) doesn’t tell you everything you need to do and 2) doesn’t necessarily work right on blogs.

First, when you upload and extract the files, it is assumed that you’re putting those in the root of your web server. I had put them elsewhere, and subsequently it wasn’t working.

However, because they assume root (once you get them moved there), going to a specific blog entry will prevent Lightbox from working. Essentially, all the code in the JS and CSS files point to root or ../images for everything. Which is great, and works just fine on my main page (http://mstublefield.com), but when I go to a blog post (for instance, https://mstublefield.com/blog/2008/09/24/why-i-dont-use-flikr/), going to ../images actually points at https://mstublefield.com/blog/2008/09/24/images (the ../ being “go up one level”).

So, I went through the JS files and the CSS file and changed the links from dynamic to static. Therefore, instead of ../images/close.png, it became https://mstublefield.com/images/close.png. Instead of js/whatever, it became https://mstublefield.com/js/whatever. This allows Lightbox to work inside specific blog posts, as well as on the main page. The only files that need edited are the lightbox.js and the CSS file.

Secondly, the CSS file wasn’t quite working for me. The instructions say to put it somewhere and their files will point to it. Instead, I had to manually copy/paste the CSS and append it to my main stylesheet. This seemed to work a lot better for some reason. Maybe it’s that I didn’t have the CSS in the right place, but regardless, it was easier just to copy the code over.

Between adding ZenphotoPress and Lightbox, I’m pretty excited about adding more pictures to my blog 🙂

Step 2: Visual Design

I am, to be perfectly, honest, an incredibly non-artistic person. I appreciate art, and I know what I like looking at, but I sometimes lack the vocabulary to discuss art and I am completely incapable of producing it. The written word is my forté, so when I began to design a new website, I was stymied.

The idea of creating a theme from scratch and of having complete visual control over one’s website is certainly appealing, but I lack the capacity for such design work. Therefore, I chose a few designs and showed them to Ryan, with whom I collaborated while creating SilverPen Pub revision 3.0. I would have a theme that I didn’t really like, but wasn’t sure why, and he would supply terms describing how its flatness and lack of depth failed to catch the eye or guide the reader to where you want them to spend their time. The current theme, however, worked really well, and after I bludgeoned one of my own photographs into the banner using The GIMP, I’m happy with it.

There are several things to consider when visually designing your website:

  1. Sidebars: How many do you want, and what do you want them to contain? Personally, I feel that sidebar length and composition is determined by logical order. That is to say, it should be organized logically, with clear reasoning why one item has been placed above another item. If your sidebar has reached a length where you are sticking things in with no justification for its placement–if you don’t care where something goes–then you are adding things to the sidebar that probably don’t need to be there. As much as I enjoy Lorelle’s blog, the sidebar annoys the hell out of me because I can’t find anything useful in it. It’s a mash of random things, with subscription buttons and book article advertisements littered throughout. After reading her article Who the hell are you? I began looking for her “About” section. Because it was hidden in the ridiculously long sidebar, I had to use Firefox to search for it to even find the oh-so-important statement she was talking about in her article.
  2. Mood, pathos, etc.: Colour is a tricky one, because it can affect how a reader perceives and responds to your blog. It affects the tone in which they read your entries, and if the appearance of your blog is offensive to them, they will certainly be unreceptive to what you have to say. Nevertheless, I maintain that the most important aspect of the visual design of one’s blog is that the author like its appearance. A reader can use an RSS feed, but the author cannot avoid looking at their own page. It is important to keep this aspect of visual design in mind, but it is perhaps not the most important. The only rule regarding colour is to make text readable. Stereotypical MySpace pages are bad, m’kay?
  3. How comfortable are you with editing code?: If you don’t mind getting your hands a little dirty, you have a few more options when choosing a theme. You can pick one that’s close to what you are looking for, then edit the CSS and PHP files to make it exactly what you want. Conversely, if you just want a CMS where you can input your content and you’d rather not have to deal with anything else, WordPress has a lot of options to help. In this instance, however, you may have a harder time finding a theme that really makes you happy and gives you all of the content you want.
  4. Accessibility: I will write more about this at a later date, but accessibility is probably the most overlooked issue when it comes to personal blogs. Nevertheless, it is important to pay special attention to this aspect, if for no other reason than it is simply the right thing to do so. There are scads of guides online about how to make your site more accessible, so I won’t go into details on that, but keep in mind that you should try and make your blog as accessible as possible. This might require a little bit of coding on your part, but it’s not hard and can make a visually challenged person’s day a whole lot better.
  5. Content: Will your blog entries be short, or long? How far your readers have to scroll to read a particular blog entry might be worth considering, and can be affected by widening the content section of your design. However, keep in mind that long lines of text are awkward to the human eye, and anything beyond 80-120 characters is difficult for a person to read. Try to keep your content column at a reasonable width.
  6. Scaling: This is the first test I do to see how well a site is design. Does your site scale gracefully, or does your text go all over the place and become unreadable? This is partially an accessibility issue, but it’s also about standards; if you stay within the spec, your site will usually scale just fine. WordPress, by default, handles this pretty well, so you shouldn’t have any problems if you’re using WordPress as your CMS.

Once you strike a balance between these and have everything settled, it’s time to decide how you intend to organize your blog, which I will discuss tomorrow.