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?

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

How to Edit your Single Post Navigation on WordPress

The WordPress Codex presents that the default code and presentation of the post navigation links appears as:

Perhaps I’m a little too OCD twitchy about this, but I take issue with the navigation structuring. When I’m looking at the front page of my blog, displaying the ten most recent posts, and scroll to the bottom, it presents “Next Page ».” To my mind, though, I would not be navigating to the “next page,” but rather to the “previous page” because I would be looking at older entries. Older is always Previous to me, but WordPress is backwards in this regard.

Conversely, when accessing a single post in my primary WordPress theme (and perhaps others), it was backwards from what I now expected based on the front page of my blog. To access older articles, I would click the link on the left (denoted by the name of the entry, rather than “newer” or “older”), and newer articles were accessed by using the link on the right (which, to my mind, should be leading me into an archive). This seemed counter-intuitive considering that the full-page-post (where I have ten entries on a page, rather than just the single one) navigation had older entries on the right and newer on the left.

In essence, the navigation seemed contradictory and inconsistent. To change this, I needed to edit browse.php (though in most themes, this is located in index.php) and reverse the following conditions:

|

The aquo statement is for two left or right karat marks, and the L or R that preceeds the aquo tells them which direction to point. Therefore, when I reversed these, it became:

|

Note the spacing, which is purely for aesthetic reasons. I added the pipe (the | symbol) myself for the same reasons.

If you want your post navigation to conform to whatever OCD tendencies you might have, this code should be located in either index.php or browse.php.

What’s sort of amusing is that my stories blog, despite having older posts on the left and newer on the right (the same configuration that set off this OCD codefest to begin with) doesn’t bother me at all. Maybe that’s because it doesn’t have a sidebar and everything is centered (and the theme is built to only display one post at a time), so I wasn’t expecting older posts to be on the right or the left. And I get the initial logic: much like an English book, you turn the page from right to left, so newer content (that you haven’t read yet) is to the right… but it has to be consistent. All of your navigation links must agree, and by default on my primary theme, they did not.

Does anyone else think about visual triggers and the expectations to which they lead?

Using a Second Sidebar for Different WordPress Pages

This post was originally written when I was using a different theme. That doesn’t affect the content, just wanted to let you know that my current theme (designed by Ryan Burrell) doesn’t use this particular method. Rather, it employs various templates to display bars as necessary. For more information, check out my guide How to use page templates in WordPress.

I wrote sometime ago about the visual design of a website, particularly a WordPress blog, and lamented the long sidebar that plagues so many sites. Like anyone else, I want to show everything I have to offer to my readers, but I know that my readers don’t necessarily want the same. End-users want the information they want and nothing else that might distract them from that information. Readers want data to be concisely presented and easy-to-read. A sidebar as long as my arm detracts from these goals.

Therefore, when I added some things to my WordPress sidebar (like a blogroll) that made it particularly long, I knew something had to be done. It’s all fine and well on the main page where ten blog entries make for a rather long site (and therefore the sidebar doesn’t look out of place). But when looking at a single post, the sidebar added a dozen inches below the comment box until you reached the footer. No good.

The WordPress Codex has some tips on creating a second sidebar and using this for other pages (such as when viewing just a single post), but beyond giving me the PHP tag for the sidebar, it didn’t do me a lot of good. The theme I use did not have the sidebar statement in the default location (which is normally sidebar.php in your theme’s files), and when I did find the code I needed to change, the tag listed in the WordPress Codex didn’t work.

My sidebar actually extends up from the footer, so it was the footer.php I needed to edit. Removing the standard sidebar tag, I entered the following:

When I first made this change, I discovered that, while it worked great for posts, my pages still had the longer sidebar. Since my Contact page is pretty short, this ran into the same problem as before: the page content had ended, but the sidebar just kept going. Therefore, the code needed to be modified slightly to accommodate pages as well as single posts.

Using an elseif statement, we are able to use sidebar2.php on both pages and single posts. If you have additional templates on which you wish to use a different sidebar (say you wanted a different sidebar on the category, archive, and portfolio pages as well), you might considering using a switch, but with my limited knowledge of PHP, using if/elseif/else statements worked just fine for me.

Scrolling code display boxes of doom

Why can’t anything ever work as advertised?

So, I’ve written a couple of tech articles for the next couple of weeks (scheduled to publish on the next two Tuesdays) and they had a few code snippets in them. Therefore, I thought I’d find a nice way to display that code, maybe put it in a box that preserved its formatting, and if the line was too long would present a horizontal scrollbar instead of breaking the right margin or wrapping the code.

I first tried the IG:Syntax Hiliter (it frustrates me to no end that it’s not spelled “Highlighter”), which is supposed to be the first, greatest, most original plugin for WordPress that is intended for this purpose. But when I used it, it refused to present my code in a visually accurate fashion. Or, rather, it was too accurate: it converted my symbols to their ASCII equivalent and displayed boldly that this was Plain Text mode.

You could click on Plain Text and change it to HTML, which made it look nicer, but I wanted it to default to HTML. What’s more, it didn’t behave regularly; sometimes, the code would be accepted and displayed, and other times it would be stripped out and deleted. This isn’t an issue with the plugin so much as it’s an issue with WordPress, which strips PHP from blog posts as a security measure. However, when I’m trying to post PHP to give an example, that’s pretty damned annoying.

I then tried WP-CodeBox, an off-shoot of the “Hiliter” (every time I see the word spelled that way, I think it says “Hitler”) but one that seems to be preferred by a lot of people. Unfortunately, its author’s website is in Chinese or something, has major faults on it that kick me to a partial TinyMCE window, and the plugin failed completely. I couldn’t get it to do anything.

I tried 1-2 others before finally giving up. What irked me the most is that I had it looking just fine before using pre-tags and/or blockquotes, and these plugins (even when they semi-worked) looked worse. If I included code as a regular part of this blog, I would definitely find a solution (and I suspect I’d just develop it in-house using CSS, which seems far more reliable than the plugins geared towards this task), but I just don’t care anymore.

Bugger it.

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.