CSS Problems
-
Hi. I’m having problems with the CSS customization. I admit I’m a n00b with CSS, so I might be doing it wrong. But every time I enter new CSS on the customization screen and hit save, the new CSS text disappears. I can’t seem to make any changes at all.
Here’s the bigger problem I’m trying to solve by changing the CSS: When I share a link to my WordPress page or blog on Facebook, it can’t detect images on my page. I want to change the og meta properties to fix this problem.
The blog I need help with is: (visible only to logged in users)
-
Hi Glen,
I’m happy to help you with this. Currently, it looks like you have several lines of CSS saved under Appearance -> Customize -> CSS. Were you able to figure out how to properly save the CSS? Basically, for each new CSS code you’d like to add, you’ll just need to add it on a different line, similar to adding a new paragraph on a page.
As for the Facebook image, it isn’t possible to add og meta properties via CSS. Unfortunately, we have little control over which image in your post Facebook chooses to share. The best way to make sure the correct image is shared is to select it as the Featured Image on your post. You can read more about this here:
http://en.support.wordpress.com/publicize/#images-in-publicize
Can you give that a try?
-
With the help of a friend versed in CSS, I did eventually find a solution — a work-around, really, but it does the trick. I’m going to describe it here for other people with the same problem.
1. I added an image widget to the footer of my website, using the image I wanted to use by default. It turns out that Facebook has no problem finding images in the footer. However, this solution meant I had an unnecessary image at the bottom of my page. Which led to…
2. I added some code in the CSS customizer to make the image in the footer invisible. This is the code my friend gave me:
#footer img {
display: none;
}#footer .widget img {
display: none;
}
}That’s actually two lines of code, and probably only one of them is necessary. But it doesn’t hurt to have both. The first one says not to display images in the footer; the second says not to display widget images in the footer. Facebook can still detect the image even though it’s not displayed, and the solution works perfectly. In case it matters, I used MS Paint to make sure my image was perfectly square so that Facebook wouldn’t need to stretch it.
-
Oh, one other thing. The reason that my lines of code were disappearing from the CSS window after saving was that, as it turns out, the code I was entering wasn’t CSS. I think it was Javascript.
It really would be nice for WordPress to let you modify your og meta properties. They are definitely part of WordPress’s default code, as you can see by looking at the source for your page. And when I ran my page through the Facebook debugger, the debugger indicated that one of the og properties (article:publisher) was problematic. I don’t know if that was the cause of my image detection problem, but it would have been nice to find out. Anyway, my work-around solution above apparently bypasses the problem.
-
Hey Glen,
I’m glad you were able to find a workaround, and thank you for posting it in the forums for others to find. I’m sorry you had to go to such great lengths with the footer image for Facebook. Setting a featured image of the correct size or inserting a large-enough image into the post should have done the trick as well.
Regarding the og meta properties, can you explain what issue you’re running into with the Facebook debugger? I just ran the following post:
It pulled the following meta tag for the publisher:
<meta property="article:author" content="http://econundead.com/author/agoraphile/" />That appears to be the correct meta tag.
-
When I ran my home page through the Facebook debugger, it gave me the folllowing response:
“The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘article:publisher'”
Putting an image in the main body of a page, rather than the footer, also works. But some pages and blog posts don’t have images, so that solution wasn’t general enough. Also, I did setting a featured image (before finding the footer solution), and that didn’t solve the problem for me. Maybe I set the featured image wrong?
-
Hey Glen,
Please see below!
“The parser’s result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: ‘article:publisher'”
I checked with our developers, and it looks like this is an error with some of the tags we’re sending alongside your home page. We’ll be fixing the error shortly, but in the meantime, it shouldn’t negatively affect your Facebook posts from your site!
Putting an image in the main body of a page, rather than the footer, also works. But some pages and blog posts don’t have images, so that solution wasn’t general enough. Also, I did setting a featured image (before finding the footer solution), and that didn’t solve the problem for me. Maybe I set the featured image wrong?
For Facebook to detect the Featured Image, it must be around 300 x 300 or larger. Any smaller and Facebook will not publish the image. Also, the Featured Image must be set when you originally publish the post for the best result. If you go back and set the featured image at a later time, Facebook might not publish it accordingly. This has to do with Facebook caching the debugger results of a certain post and therefore ignoring the new featured image for a period of time.
-
Hey Glen,
That Facebook warning should be fixed now! You’ll likely still receive it if you run your domain through the debugger for a bit due to caching. However, it should stop showing eventually!
- The topic ‘CSS Problems’ is closed to new replies.
WordPress.com Forums 