• Status: Solved
  • Priority: Low
  • Security: Public
  • Views: 62
  • Last Modified:

Facebook Instant Articles Top Image Question

Good Morning,

So i just started using facebook instant articles, pulling from a wordpress site.   So the very top image, above the logo and like button.  For the life I can't figure out how to get that picture there.  I thought it was the featured image that would get pulled from wordpress, but I don;'t think that is it.   And I was alway looking at example code from facebook developer, but can't see where the picture might go.   Here is the code
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://instantarticles.fb.com/example1">
    <link rel="stylesheet" title="default" href="#">
    <title>Instant Articles</title>
    <meta property="fb:article_style" content="Test Article Style">
  </head>

Open in new window


Any thoughts or advice?

Thank you,

Rich
1
Richard Barry
Asked:
Richard Barry
  • 4
  • 3
  • 2
1 Solution
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
Hi Rich!
Do you have the Yoast SEO plugin installed?
Yoast has a great feature for setting your facebook post image.

Once the plugin is installed, you'll find this panel at the bottom of every post or post type edit page.

Edit-Musician---Lucidity-Festival-20.jpg
0
 
Allie WattsDemand Generation & Digital Marketing SpecialistCommented:
Rich, I think it is in this part of the code.  
code-image.JPGAdd your png/jpeg image after the href and a title prior to that if you want to. You may need to change the link rel= to be "icon" but this may not matter.
Facebook and other social sites pull og metadata from our links. Here are two resources for more information on that for the future.
Let me know if this works.
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
I'm a designer/developer/coder and not versed in Facebook marketing, but I do know that rel="stylesheet" means that it's referencing a CSS stylesheet. So, it probably will matter.

Rel="icon" is for the Favicon. The little square on a browser tab.

I just looked at some Instant Article info. Facebook is trying to pull in a featured image but sometimes it's a default image for the whole site.  It looks like you need more control per article. Yoast will give you that. I use Yoast to grab featured images for a huge festival site I've built. When the musicians share their profiles, it's nice to have their face and not the Festival logo/header.
1
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
Richard BarryAuthor Commented:
Hello,

So i do use Yoast, but for the life of me I can't get the cover image to show up.  I have no idea what I am doing wrong.  I have found this code and tried this, but it didn't seem to help.

<head>
  <meta property="og:title" content="Article title">
  <meta property="og:description" content="Article description">
  <meta property="og:image" content="http://myserver.com/image.jpg">
</head>

Thank you,

RIch
0
 
Allie WattsDemand Generation & Digital Marketing SpecialistCommented:
Rich,

When I tried to view your image in a separate tab I got the below error message.

error-message.JPG
Try inserting your jpg or png image you wish to have associated with your article in the og metadata line for og image after content=

It looks like the current image is not available for Facebook to scrape when creating posts.
0
 
Richard BarryAuthor Commented:
Yes.. I didn't put my real information in.. that was just an example code.

Rich
0
 
Alicia St RoseOwner & Principle Developer/DesignerCommented:
How did you insert that code? You'd have to insert a different one for each post. And since you've probably added it to the header, then it will show the same image for all posts or maybe not work at all. So, the Yoast plugin isn't working?

See if this article is of any help:

http://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
0
 
Richard BarryAuthor Commented:
Good Morning, I figure out what the issue was.  I was not using the actaully facebook IA rss feed.  Once I change the feed like, all the images came through with no issues.

Rich
1
 
Richard BarryAuthor Commented:
I figured out the issue myself
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now