CSS to add thumbnail for Facebook Publicize

  • Author
  • #1458270


    I’ve been trying to play teach myself CSS by doing it for a couple of months, but I’m really only a beginner, and I think I’ve hit something that’s way beyond what I can work out on my own, so I’ve come to ask.


    On Facebook Publicize, I’d like to have my gravatar go to Facebook as the post logo thingy, rather than the WordPress W logo.

    Sometime recently Facebook has stopped using the gravatar, although some other places still do.

    The rules for what gets shown through Publicize are, in order:

    1. The featured image
    2. The first image of a Slideshow within the post
    3. The first image of a Gallery within the post
    4. An image attached to the post and inserted
    5. Any other image in the post (not attached but perhaps linked, larger than 200px by 200px.

    So Rules 4 and 5 is the ones I’m using.

    What I’m trying to do, to save manually adding an image to every post, is to add a background image of the gravatar using CSS, and move it off to the right so it doesn’t actually show on the blog page, but will still be in the post and get used by Publicize.

    So I did this:

    .entry-content {
    background: url(‘http://tessmackenzie.files.wordpress.com/2013/09/silhouette-201px.jpg’) no-repeat 0 right !important;

    Which Facebook ignores.

    So I’m stumped.

    I’m just wondering –

    Is it likely this broken because the image is background and not properly embedded in the individual page’s html? I hope what I mean is clear there, so CSS and background, rather than the actual page html having an <img= >.

    Also, is this just wrong, and completely stupid, and there’s a simpler way to do this? Because that’s completely possible! I thought this would be more common, but I can’t find anyone doing the same, so maybe not.

    So yeah. Anyway. I’d be really, really grateful for any thoughts anyone has, because I’ve about run about of ideas and also out of knowledge.

    So thank you for looking at this. And thank you if you can help!

    I’m using the On a Whim theme, and the blog is TessMackenzie.com.

    The Publicize rules are here – http://en.support.wordpress.com/publicize/#images-in-publicize


    Sorry the code snippet is –

    .entry-content {
    background: url('http://tessmackenzie.files.wordpress.com/2013/09/silhouette-201px.jpg') no-repeat 0 right !important;

    Is it likely this broken because the image is background and not properly embedded in the individual page’s html?

    Yes, well, it’s not broken, it’s just that using CSS like that doesn’t count as embedded in the post. The image has to appear in the post itself in order to get used by Facebook, adding one with CSS won’t work.

    Try uploading an image in the “Blog Picture / Icon” section on the right side of the Settings > General page in your blog dashboard—Facebook *might* see that. If that doesn’t work, your best bet is probably to take the featured image route.


    Hi, and thank you for answering!

    I’ll try the blog picture and see if that works.

    But yeah, the hope of CSS was I could do it without having to embed a picture every time, that was all.

    I realize not being quite so pedantic is also an option!

    Thank you though. I’ll post back if the blog picture works so others know.


    Yep, that works! Yay!

    This is the “Blog Picture / Icon” thing in Settings > General.

    Thank you so much. That’s so much easier than the CSS way I was trying, and I don’t know why I hadn’t done this before.

    And also, now I have a browser tab icon thingy!

    This is posting to facebook as a link, if that makes a difference somehow for anyone else. Not as a picture or whatever else kind of post.

    And the icon file is 201px square, because somewhere it said Publicize wanted images over 200px.

    And thank you for the help! My pedantic side is now soothed!

    Thank you.


    Oh, and thank you for the very delicate way you didn’t respond to my saying “is this just wrong, and completely stupid”… since basically it was.

    That was nice of you :)


    Actually, your question was explained well and I appreciate that. :) And I’m glad using a blog picture worked out!

The topic ‘CSS to add thumbnail for Facebook Publicize’ is closed to new replies.