BLOGGING, Blogging TIPS | April 17, 2009

Design Your Blog Theme to Show Your Post on Facebook

testing how your post links are displayed on facebook

No blogger can ignore Facebook and Twitter when promoting his or her blog. Link share holds the key element in this equation. I explained before the viral marketing power of adding a post link to your Facebook profile or fan page for every new post.

This technique is more effective if Facebook displays well the content of your post. Look at the differences between examples 1 , 2 and 3. I took those from links that I posted on my On the Web fan page.

Example 1 shows the post title but it displays keywords instead of the excerpt of the post. I was surprised when I saw that Problogger did worst (example 2). His blog returns the title of the post as the excerpt. Example 3 is how I did it. Both of my blogs return the post title and the post excerpt. Example 3 looks more professional and shows that you care about your readers by saving them time. This is something we test before we launched my blog.

Publishing the excerpt gives you more chances to grab the attention of people who see the link on Facebook. Remember that your links are not just for your friends and your fans. Potentially the friends of your friends may see your links. Seeing the excerpt may convince any of them to visit your blog.

If you are not tech savvy, know that the solution depends on the way your blog theme is programmed. This is not something particular to WordPress; you can reproduce Example 3 with any blog platform where you control the programming of the blog template.

I wrote this post to alert you to this fact. Test it with your own blog and you will see if changes are necessary.

, ,
  • add to kirtsy

11 Responses to “Design Your Blog Theme to Show Your Post on Facebook”

  1. Hello Kim,

    Thank you very much for pointing out this very important matter. Trust that I’ll make sure to have my blog posts published on Facebook as professionally showed in example #3.


  2. Hey Kim,

    I have a quick question for you. Is there a way to automatically post all new blog posts to Facebook through the Post Link method so that each new post shows up in my Fan Page’s Wall and on Fan’s newsfeeds (in the format of #3 above)? Or do I have to submit each link manually?


  3. Marc Alter: The manual entry only takes a couple of seconds and it provides the best results with more viral potential. Your best bet is to do it how I suggested it in the post (using Add Link)

    Even Networkedblogs do not suggest automatic updates. Here is what they say about Auto Publish as Story (Looks nice but has low distribution):
    “Completely Automatic Format #3: However, due to Facebook rules, the posts are only published on your page wall but not to your fans’ home pages.”

  4. 4 Tracey Butterfield said:

    Hi Kim,

    Do you know how I can add my facebook feed to my website – like they do on the Vanity Fair homepage? (


  5. Hi Tracey,
    I’ve seen a LOT of questions tonight about joining blogs with Facebook – notorious for changing their formats ROUTINELY and OFTEN. One thing that may help you, if you’re any good with HTML is to view the browser info… Go to “View”, then “Page Source” (at least in Mozilla) – scroll ALL the way down and you’ll come cross this:

    Note: The text that says “/go/facebook” is a “live link” of sorts that takes you to the HTML Page Source for this:

    So, adding that link loaded with the page source for your own Facebook profile should work, correct? 🙂
    If either you or Kim can let me know if this turns out to be correct as I am getting ready to build my own web and blog and want to do the same, that would be great 🙂

  6. Tracey and Kim,
    Due to the nature of showing the HTML for the Vanity Fair page, it didn’t of course come out as HTML but showed up instead as the normal text “Facebook” you would see on their page in the very bottom right hand corner instead ! (LOL – my bad…)

    So instead I will write it out here to show you with spaces in between so that you can retype it together WITHOUT the spaces and #’s and add it appropriately.
    M O R E
    (NOTE: there is a natural space after the r and before the / in this line where I put in this symbol #)
    F a c e b o o k

    NOTE: drop down a line under the word “More”, indent in a few spaces, then… there are natural spaces after the 1st a before the first h in this line; another one after the ” and before the t in target; and a third one after the very last r and before the last / in this line… where I put in the symbol #)

    THEN after all that, you’ve got to view the page source for your own Facebook profile and link THAT mess to the above mess 😉

    As far as I understand it… Kim, is this correct? or is there an easier way? Last I heard on another website even as recently as last week Facebook had changed the way you can add them and your stuff to your own website, and from what Vanity Fair has (and I see from looking at all of this) – this method posted here is working, at least for now 🙂

  7. LOL – VERY SMART WEB PAGE – IT DECIPHERED WHAT I WROTE AND MESSED UP INTENTIONALLY. Never mind. Just go to that Vanity Fair page, and read the page sources… I tried!
    Cheers, and sorry for taking up so much space-didn’t know it was going to do that! 🙂

  8. Tracey and Janet: What I recommend is to use the Facebook widget available from the “Promote with a Fan Box menu” on your fan page. Personally, I prefer the Fan Box. It was more effective than a simple link to grow my fan base. Another option is the Page badge. You insert the code provided by Facebook where you want it on your HTML page.

    You have to remember than blog pages are a mash-up of several components. Looking at the page source gives one part of the solution – the interpreted one. It is not necessarily what you should write on your HTML page. Because of that, it is safer to use the code provided on the widget section of your fan page. For an overview of all the options, click here.

  9. Hi kim!
    Thank’s for all this useful information!
    I’ve had a blog linked to my personal page through Networked blogs.
    I now understand the automatic feed is not recommended? I will try to change it back and do it manually.
    This week I started a new blog, with a different WordPress theme, and the posts on Facebook don’t show any photo from the blog. Reading your posts I realized this is a problem with the theme and not Facebook. Thanks!
    Would you have a clue where in the blog theme I have to look to fix this?
    Where in the blog do you write the excerpt? or do you add it when you post the link on Facebook?

    Sorry for all these questions…
    Thanks’ for all your posts, they helped me a lot!!

  10. Dria: I am not a programmer – I hired people for that. Therefore, I could not tell exactly how to fix it since I always made the test before I selected a blog theme. As for the excerpt that appears automatically on Facebook; it is really the first X characters of my post. I do not know if it is WordPress or Facebook that determine how many characters is included. Sorry that my answers could not tell you more than that.

  11. Thanks, Kim. I think Facebook changed something in the way blog links are shown on Facebook. The problem fixed itself, and now my blog posts appear as if I wrote them on Facebook (which I don’t like, but nobody asked me..)