FanPost

FanPosts for Beginners


Hello.

One of my New Year's resolutions is to spend a day putting together a very long and very boring sidebar piece sharing what I've learned about the mechanics of doing FanPosts on the blogs of SB Nation. I do have an ulterior motive, mind you — I'd like to see more and better stuff appear every day written by other people to keep me entertained. So if you've got something to say, hopefully this little tutorial will help you to say it more effectively.

I don't know everything about the SBN software, mind you, nor am I well versed in the wonders of html code. But I muddle along sucessfully enough. Hopefully this information will help you to do the same.

—timbo

 

FanPost or FanShot?

One of the first questions facing newcomers to the blogs of the SB Nation network involves the esoteric division of user-generated content between "FanPosts" and "FanShots." What are these things and how do they differ?

At the most basic level, FanPosts are pieces of original writing; FanShots are links to content created by others.

Bear in mind, however, that FanPosts may and often do contain links to material by others, while FanShots sometimes contain snippets of original material. These are exceptions to the general rule of thumb. If you just keep in mind that FanPosts are original writing and FanShots are links, that'll get you there.

Unfortunately, SBN uses a completely different interface for FanPosts and FanShots — the latter being a bit of a mess. This guide is for the use of the software to create FanPosts. You're on your own with FanShots. May god have mercy on your soul...

 

The Two Most Important Things.

Every author needs to have two things before publishing a FanPost: ideas and time. Don't publish these things if you don't have anything to say — an astute observation, a bit of analysis, some research into a biography, pictures of something interesting, an entertaining anecdote. And don't publish one of these if you don't have at least 15 or 20 minutes to commit to the task to do it coherently. Nothing is more annoying than bumping into a "FanPost" that is actually a semi-literate and vacuous half-assed piece of sidebar clutter:

TRADE ROY!!!!!!!! we need to trade branden roy for carmello anthony becaus e roy sucks. i set it up the trade on the trade machine and it works fine. doi it now cho u idiot!!! roy sux!!!!! what do you guys think? 75 words 75 words 75 words 75 words 75 words75 words 75 words

If you don't have anything to say that you feel is in some way astute, interesting, or entertaining, save the moderators the trouble of flushing your crap. If you want to write graffiti, find a wall. Doing a FanPost takes a little thought and a little time, first and foremost.

 

Getting Started.

There are several ways to open a new FanPost window: links at the very top of the sidebar New FanPost or Edit FanPosts or a link at the bottom of the FanPosts that reads + NEW FANPOST. Any of these work fine. I usually use Edit FanPosts since I use a template to set up a regular column with recurring elements, but it really doesn't make much difference for one's first piece. 

You click one of those links to open up the workspace, obviously. You'll see something like this:

Screen_medium

 

Taking a closer look at the buttons along the top, things look like this... I have added pink labels for reference:

Buttons_medium

Here are what those buttons do:

  • 1. Makes highlighted text bold.
  • 2. Make highlighted text italicized.
  • 3. BUG ALERT: Strikeout button does not work in FanPosts.
  • 4. Puts highlighted text into a quotation box.
  • 5. Indents and puts background behind selected text.
  • 6. Reverses the action of button no. 5.
  • 7. Makes highlighted list into bullets. SEE BUG NOTE 1 BELOW.
  • 8. Assigns numbers to highlighted list. SEE BUG NOTE 1 BELOW.
  • style menu: Pulldown menu which changes formatting of selected text.
  • a. Undo button. (Same as COMMAND + Z on a Mac).
  • b. Redo button that reverses the action of button no. a.
  • c. Inserts plain text into the layout.
  • d. inserts text from a Microsoft Word document into the layout.
  • e. Breaks a link.
  • f. Establishes a link.
  • g. Inserts a jump break, even though there are no actual jumps in FanPosts. SEE BUG NOTE 2 BELOW.
  • h. Spell-checker pulldown.
  • X. Save button.
  • Y. Insert a graphic button.
  • Z. Insert a video button.
  • WYSIWYG. What You See Is What You Get layout mode, which SB Nation calls "Visual View."
  • HTML. HTML code layout mode.

You write your piece in the WYSIWYG window, add a story headline, use the buttons to format, and you're done, right?

That's pretty simple, eh? 

The one tidbit I would add to this pretty much self-evident description of the tool box is that you should make sure to manually click the save button (Button X) periodically. Do NOT rely on the software to autosave your work. If something goes wrong the software MIGHT bail you out — but then again you might also lose a major chunk of your effort. Better safe than sorry, so be sure to do manual saves!

Okay, let's get serious...

 

Getting Serious.

Inserting External Text.

Let's say you want to insert a snippet from a piece on the website Ball Don't Lie to illustrate your point that Carmelo Anthony is a loving, caring, family man that would be a PERFECT fit for the Portland Trail Blazers. You will quickly find that if you just copy and paste the material into the FanPost editor window, you'll wind up with a disastrous mess — wrong font, wrong spac ing, non-existent links marked, wrong colors, and so on.

To solve this, your new best friend ever is "Button C" — the "insert plain text button." You just copy the paragraph you want into your computer's memory (COMMAND + C on a Mac), flip back to the editor, click the cursor on the edit page ONE EXTRA LINE below where you want the text to appear (the extra line needed is a software bug, don't think about it, just leave the extra space), hit Button C, paste in the text from the article in question into the window that Button C opens, and click the INSERT button on that sub window. Voilá! the plain text will appear in your layout:

Last Saturday, while you were enjoying bratwursts and s'mores, Carmelo Anthony(notes) was marrying LaLa Vasquez, an MTV VJ. Cool weekend plans, I suppose. And since Melo is a big-time NBA baller, he attracted more than a few celebrities to his New York City nuptials. In attendance were Kim Kardashian, Spike Lee, Justin Timberlake and Ludacris, who hopefully provided entertainment during the reception. Oh, and LeBron James(notes), whom you may have heard of.

You may well need to go back and clean it up a little, erasing the little "(notes)" labels, for example — but the material is ported in without making a huge mess of things.

I have never played with "Button D," the "import from Word" button much, I was unimpressed with it when I did, but I use good ol' Button C multiple times on every single piece I write. It will become your friend, too. Love it and treasure it.

 

Inserting Graphics.

Pictures can make the difference between a run-of-the-mill FanPost that nobody cares about or remembers and a compelling and memorable piece. If you're going to to spend an hour writing something, say, why not spend another 10 minutes to make it look good?

Unfortunately the buttons for inserting graphics are inadequate and you will need to jump back and forth between "Visual View" (WYSIWYG) and "HTML View" to make things look good. Don't worry, the code won't bite you, it's really not hard.

First you start with your graphic that you want to use. I upload things to my own server and work from there but in case you don't have that capacity, there are services out there like Photobucket that are commonly used. For purposes of this illustration, we will use a Photobucket stock image located at http://i319.photobucket.com/albums/mm453/ANDRES_DIEZ/Retro%20Pics/So_so_retro_by_mathiole.jpg

To insert the graphic, first place your cursor where you want the image to appear on your Visual View layout page, then select "Button Y" and paste in the URL where the image is located.

So_so_retro_by_mathiole_medium

via i319.photobucket.com

That's what you get. It's easy to go back and erase the stupid "via" information, but you're stuck with a graphic with a border around it that is left justified with text that appears above and then jumps below. That's where many people leave it. They shouldn't.

How do you get rid of the border or justify the graphic to the center or to the right or left with text wrapping around it? The answer lies in jumping to the HTML View editing window and doing super simple minor tweaks to the html code.

I'm gonna use a different graphic here since the SO RETRO! thing is so large. I've got a Blazer logo up on my server at the location http://www.marxisthistory.org/logos/BLAZERS.jpg, so let's use that.

First, I'll insert it as usual with Button Y and elimination of the "via" information by hand:

Blazers_medium

That leaves us with the above image.

Now, I click on the HTML VIEW tab and locate the image. I usually use the search function on my computer looking for part of the text in the layout just above the image to find it. No one wants to scroll through 20 screens of barely legible code hunting when a quick search will get you there in two seconds. Here's what the relevant section of code for the image looks like over in HTML View:

<p>First, insert it as usual with Button Y and elimination of the "via" information by hand:</p>

<p><a href="http://cdn2.sbnation.com/imported_assets/627463/blazers.jpg"><img alt="Blazers_medium" class="photo" src="http://cdn3.sbnation.com/imported_assets/627463/blazers_medium.jpg" /></a></p>

<p>That leaves you with the above image.</p>

That code is nice and clean, actually, a lot of times the simple <p> paragraph formatting tags are replaced by the sketchy SBN software with horrible long things are really hard to read... No matter. The a href part is the new name of the image on the SBN mainframe. The only part you care about is the little snippet that says class="photo". That's the money line.

Blazers_medium

If you change just one word in the html code, from class="photo" to class="right" — like I just did here, that image automatically becomes right justified with wrapping text. Similarly changing class="photo" to class="left" makes the graphic left justified with wrapping text and class="center" makes the image center justified with no border — for example if you want to make a little graphic to use as a headline.

See how much better that looks with the change of justification and wrapping text? It's completely simple thing to do, a matter of jumping out of Visual View to HTML View for a few seconds to change exactly one word of code.

SB Nation is officially very persnickety about what graphics one is allowed to use. They have a huge archive of images for blog editors but unfortunately regular users making FanPosts have no access to the treasure trove. The company licenses images from the Associated Press however, so if you run up an AP image with appropriate credit you are probably golden — and there are additionally various images which are not technically golden are commonly used on the sidebar, nudge nudge, wink wink. Plus you can use any photo that you take yourself, obviously or public domain photos from places like Wikipedia.

 

Inserting Video and Centering the Screen.

Button Z inserts video, using either the URL of the video or the Embed Code provided with an internet video. Using the Embed Code generally allows you to tweak the size of the screen, color of the border, and so on and is generally more useful than using the URL.

Button Z will open up a little window that looks like this...

Importvideo_medium

That's pretty much self evident: paste the URL or the Embed Code in the appropriate space, click the IMPORT button, and you'll end up with a left-justified playback screen on your layout page.

I generally don't use Button Z, preferring instead to insert the Embed Code directly onto the html code page and then centering the image.

First of all, here is the code recipe for centering a playback screen (or any section of text, actually): 

<p style="text-align: center;">

I never type this, I always copy-and-paste it from a previous layout. I suspect if the spacing is a little bit wrong, things don't work...

To insert the video I usually put an easy-to-find set of words in my layout, something iike

INSERT THE STUPID VIDEO HERE

Then I jump to HTML View and replace the Embed Code that I copy from YouTube or Vimeo or wherever into the placeholder, and I replace the initial paragraph tag <p> with the code recipe above <p style="text-align: center;">

So in this case the html code which looks like this

<p>To insert the video I usually put an easy-to-find set of words in my layout, something iike</p>

<p>INSERT THE STUPID VIDEO HERE</p>

<p>Then I jump to HTML View and replace the Embed Code that I copy from YouTube or Vimeo or wherever into the placeholder, and I replace the initial paragraph tag &lt;p&gt; with the code recipe above&nbsp;</p>

is changed by me with a couple cut-and-pastes into

<p>To insert the video I usually put an easy-to-find set of words in my layout, something iike</p>

<p style="text-align: center;"><object width="640" height="385"><param name="movie" value="http://www.youtube-nocookie.com/v/VqHv74MVm7A?fs=1&amp;hl=en_US&amp;rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/VqHv74MVm7A?fs=1&hl=en_US&rel=0&color1=0x3a3a3a&color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></p>

<p>Then I jump to HTML View and replace the Embed Code that I copy from YouTube or Vimeo or wherever into the placeholder, and I replace the initial paragraph tag &lt;p&gt; with the code recipe above&nbsp;</p>

Now that looks really complicated, but it's actually just two cuts-and-pastes — one to insert the Embed Code and the other to insert the "recipe" to center the screen in place of the <p> tag.

Here's what the video looks like in the final product...

 

 

Saving Your Work.

I don't trust the SBN software — I've had one complete piece go missing and lost some work due to software glitches a couple of other times. If you are writing a particularly long piece, I encourage you to save your work once or twice during the writing process. Flip over to HTML View and click the editing area, Select All (COMMAND + A on a Mac), and then paste that huge mass of html code into a Word or a Pages word processor document.

You'll probably never need it, but it's good to have in case you ever do.

 

Linking and Unlinking.

Okay, so you've got everything written and formatted and you're getting ready to publish. SBN's software requires that one run an "Auto Tag & Link" on each article that results in a mass of ugly and thoroughly useless links. Every team name and every player name will be linked with a low value link, and the ACTUALLY IMPORTANT links that you have inserted yourself in the regular piece will be lost in the morass.

One thing you can do in a pinch is to physically edit the whole article again after it is published, using the Unlink tool ("Button E") on each link that the crap software foists upon you, one by one. Then you republish the changed version and you're golden.

A better solution is to dodge those low value links altogether. Underneath the Tags and Links section below the edit window there is a dropdown slider that reads League Filter. Basketball blogs default to the NBA setting, but it you slide that to, for instance, English Premier League soccer before you click the mandatory Run Auto Tag & Link button, the software finds no team names or player names to link and you can get on with life untainted.

Blog editors have a little clicky button they can select to ditch the useless links, but us sidebar folk have to be a little tricky.

Also, be sure that whenever you insert a link yourself that you choose the OPEN NEW WINDOW option. Why? You don't want to be sworn at by your readers, do you?

 

Edit, Reedit, Edit Again.

I don't care how many times you look at the Visual View page or click the Preview button, you will find typographical errors. As soon as you publish your piece, read it from the start to the end slowly and locate your errors. Then click the Edit It Again link in the green box at the top of the page and fix the mistakes before republishing.

I probably make 10 to 15 changes to every piece I do, adding material and making fixes. If you put the work into writing something, put the work into illustrating it with graphics and video, for goodness sakes take the extra time to fix the typos and dead lines inserted by software bugs. Which brings me to the next topic...

 

Some Notes About Software Bugs.

Unfortunately, not everything works swimmingly. Here are a few known bugs.

Strikeout text doesn't work. Even though it is considered proper form to cross out and leave changes in your published layout, there seems to be no capacity to do that with a FanPost, either through use of the strikeout tool or with html coding. No matter what you do, things publish in plain text. So forget all about that.

Bug Note 1: When you insert a graphic, a blank line of space will be inserted in front of and behind each list, whether that list is bulleted (button 7) or numbered (button 8). This is also true sometimes (but not always) for material in block quote quotation boxes (button 4). Fixing this is just a minor pain in the butt — if you go back and physically remove the additional breaks inserted by the bug, they usually stay gone.

Bug Note 2: Even though there is no way to actually jump a FanPost, there must be a jump break used at some point in every article.

Addenda: A comment is made below that jumps actually do appear in the mobile version of FanPosts. A jump near the top of long posts is thus helpful to readers using mobile devices so that they do not have to scroll through the entirety of one vast post to get to the next.

Publishing Difficulties: Sometimes after the PUBLISH button is clicked the timer will spin and spin and spin without indicating that the page is published. Many times the article actually goes up without the software properly redirecting you to the published page. To see if this is the case, just open a new window and visit the site and check the sidebar. If you piece is showing, close down your edit window, no worries.

If things have still NOT published, first be sure to SAVE YOUR WORK (!!!) [!!!!!] and then reload the edit page and try again. If that still doesn't work, try quitting and relaunching your browser and opening up your work via the Edit FanPosts link.

These sort of problems shouldn't happen but sometimes they do. Again: manually save by regularly clicking the SAVE button. Save your work by pasting the html code into a Word document. Seriously.

 

Pee Ess.

If you hate this User Guide or are confused and want to read another, please take a look at the tutorial put together by the blog Pension Plan Puppets at THIS LINK.

If you have additional information that people might find helpful, please chime in in the comments section.

X
Log In Sign Up

forgot?
Log In Sign Up

Please choose a new SB Nation username and password

As part of the new SB Nation launch, prior users will need to choose a permanent username, along with a new password.

Your username will be used to login to SB Nation going forward.

I already have a Vox Media account!

Verify Vox Media account

Please login to your Vox Media account. This account will be linked to your previously existing Eater account.

Please choose a new SB Nation username and password

As part of the new SB Nation launch, prior MT authors will need to choose a new username and password.

Your username will be used to login to SB Nation going forward.

Forgot password?

We'll email you a reset link.

If you signed up using a 3rd party account like Facebook or Twitter, please login with it instead.

Forgot password?

Try another email?

Almost done,

By becoming a registered user, you are also agreeing to our Terms and confirming that you have read our Privacy Policy.

Join Blazer's Edge

You must be a member of Blazer's Edge to participate.

We have our own Community Guidelines at Blazer's Edge. You should read them.

Join Blazer's Edge

You must be a member of Blazer's Edge to participate.

We have our own Community Guidelines at Blazer's Edge. You should read them.

Spinner.vc97ec6e

Authenticating

Great!

Choose an available username to complete sign up.

In order to provide our users with a better overall experience, we ask for more information from Facebook when using it to login so that we can learn more about our audience and provide you with the best possible experience. We do not store specific user data and the sharing of it is not required to login with Facebook.

tracking_pixel_9347_tracker