I am currently trying to set up the ability to publish open graph stories for an app but I am running into trouble with facebook's scraper. *Note: I am replacing the values in the parenthesis with their correct values; the php is hosted on wpengine.
I have put the example php code
(mydomian)/opengraph.php and when I enter (mydomian)/opengraph.php?fb:app_id=(my_id)&og:type=(type)&og:title=(title)&og:description=(descr)&og:image=(image)&body=(body) it generates the object as expected.
Unfortunately when I run it through the debugger I get:
Errors That Must Be Fixed
Object Missing a Required Value: Object at URL '(mydomain).wpengine.com/opengraph.php' of type 'website' is invalid because a required property 'og:type' of type 'string' was not provided.
Redirect Path
original: (mydomian).wpengine.com/opengraph.php?fb:app_id=(my_id)&og:type=(type)&og:title=(title)&og:description=(descr)&og:image=(image)&body=(body) it generates the object as expected.
301: (mydomain).wpengine.com/opengraph.php //looks like it's redirecting and scraping this page instead
the end result of the scrape is
<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns# product: http://ogp.me/ns/product#">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="fb:app_id" content="">
<meta property="og:url" content="(mydomain).wpengine.com/opengraph.php">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:image" content="">
<meta property="og:description" content="">
<title>Product Name</title>
</head>
<body>
</body>
</html>
Like I said before when I visit this page via web browser myself the html contains the correct values, but for some reason the facebook scraper is getting just the base php with no input. Any ideas?
Decided to go around the problem and use our plugin to generate the meta properties per post instead. If anyone else comes across this issue, the code at http://www.wpbeginner.com/wp-themes/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes/ seems to be working for our purposes. We generate a bunch of xml from custom post types for our app and that's what we needed to publish stories about.
Related
Currently i want to get image from instagram url. the url is this
https://www.instagram.com/p/B_zZCRpB895/media/?size=t
what im doing now is this :
$image = file_get_contents("https://www.instagram.com/p/B_zZCRpB895/media/?size=t");
i run it into my AWS server, but the result is go to login instagram.
<!DOCTYPE html>\n
<html lang="en" class="no-js not-logged-in client-root">\n
<head>\n
<meta charset="utf-8">\n
<meta http-equiv="X-UA-Compatible" content="IE=edge">\n
\n
<title>\n
Login • Instagram\n
</title>\n
\n
\n
<meta name="robots" content="noimageindex, noarchive">\n
<meta name="apple-mobile-web-app-status-bar-style" content="default">\n
<meta name="mobile-web-app-capable" content="yes">\n
<meta name="theme-color" content="#ffffff">\n
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover">\n
<link rel="manifest" href="/data/manifest.json">\n
......
however, if i run into my local PC. i can display the image code. is there any way to get the image code from the url instagram?
It think it because these links are designed to serve content on instagram site. So if you want to display images on your site you have to use instagram api instead:
Here is getting started link for instagram api.
You will end most likly using this endpoint: graph.facebook.com/{image id} after you have provided a authenication token too.
So I have this cakephp project, when I share the link to facebook i don't get og:description, og:image etc, even though everything seems to be there.
My code: (Views/Layouts/default.ctp)
<head>
...
<meta property="og:url" content="<?=Configure::read('og_url');?>landing" />
<meta property="og:title" content="<?=Configure::read('app_title');?>" />
<meta property="og:description" content="<?=Configure::read('og_description');?>" />
<meta property="og:image" content="<?=Configure::read('og_image');?>" />
...
</head>
I initialize everything in bootsrap.php so all my files can have access to these values.
Which produces this, View Page Source:
<head>
...
<meta property="og:url" content="https://www.philippidescompetition.com/landing" />
<meta property="og:title" content="Back To School Spin & Win! " />
<meta property="og:description" content="Συμπλήρωσε τα στοιχεία σου και παίξε "Spin & Win"!" />
<meta property="og:image" content="https://www.philippidescompetition.com/img/wheel/og_image_s.jpg" />
...
</head>
So far so good, but when I share the link on facebook I don't get any of the meta data.
I tried the debugger tool, but it didn't really help.
I want to share philippidescompetition.com/landing this link, which redirects to the facebook app page or to the actual url philippidescompetition.com/users/register on my server, according to if its from a desktop or mobile, so am thinking this redirect causes the issue, but if I share philippidescompetition.com/users/register which doesn't have a redirect, all meta data are still empty
Any ideas?
You need to add an exception to your automatic redirect for the Facebook scraper.
It can be recognized by its User-Agent, see https://developers.facebook.com/docs/plugins/faqs#faq_1748179212062572
I have this in my wordpress header file as specified by the Facebook app object types "get code" list:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# clubapp: http://ogp.me/ns/fb/clubapp#">
<meta charset="utf-8">
<title><?php echo $recipe_title; ?></title>
<meta property="fb:app_id" content="12349845123" />
<meta property="og:type" content="clubapp:reference" />
<meta property="og:url" content="https://club.com/miko_index_temp/" />
<meta property="og:title" content="nice" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/images/devsite/attachment_blank.png" />
Now, when I try to use the opengraph debugger (https://developers.facebook.com/tools/debug/og/object/) in which the scraper is supposed to read these tags, I'm getting an error saying "Object at URL "..." of type 'website' is invalid because required property 'og:title' of type 'string' was not provided.
I looked at the screaped url and the meta tags are not showing. Does anyone know why this is happening?
This is working finally.
The issue was that some PHP code before it was blocking the meta tags from being scraped and I tested these out by placing these on the very top of the header file and putting the url in the debugger again.
After modifying the code, I finally got all the og meta tags such as the url, image, type, etc. from the debugger.
I'm doing a project in which I have to show the project description to the app user and what I have is the url of the product, the url could be from any site it could be the product url from amazon, ebay etc after searching a lot I found that the facebook's linker does the same thing that I want for my project that is generating the meta tags from single url, after generating the meta tags I will get the information i needed from those tags but the question is how to generate those tags.
Below is the code in my product.php I used to debug on facebook linter
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta property="fb:app_id" content="xxxxxxxxxxxxxx" />
<meta property="og:url" content="http://www.amazon.com/Programming-PHP-Rasmus-Lerdorf/dp/0596006810/ref=pd_sim_b_4" />
<meta property="og:site_name" content="social" />
<meta property="fb:profile_id" content="">
<meta property="og:type" content="website" />
<meta property="og:image" content="" />
<meta property="og:title" content="" />
</head>
<body>
</body>
</html>
When I pressed the debug button, it generates the meta tags as shown below
I want to show exactly the same output that facebook linter generate to show the product image, description to my user.
thanks in advance
If I'm understanding your question right...
Your sites meta tags:
<meta name="custom_image_tag" content="http://yoursite.com/images/product_1.jpg" />
<meta name="custom_description_tag" content="The product description" />
Php code to fetch the tags
$tags = get_meta_tags('http://www.yoursite.com/some-page.html');
echo $tags['custom_image_tag'];
echo $tags['custom_description_tag'];
As for Amazon you could use their title meta tag and scrap images from the page.
I am having some issues with the new facebook like button. It shows up fine, however for some reason it's not pulling the title of the page.
I have the and I am using og:title, all are filled in, when I view the source of the iframe created on the load of he button, the in there is blank. I am also trying to put the tweetmeme and that's seeing that title and not the meta, or the normal page title.
What am I doing wrong?
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://developers.facebook.com/schema/">
<fb:like href="<?=$url?>" layout="button_count" show_faces="false" width="100" font="arial"></fb:like>
UPDATE: Complete Head
<head>
<title>Ladder 15 Gets A New Menu!</title>
<meta content="Growing up can be hard to do, especially in the Mad River family. But Ladder 15 has come into its own over the winter. With some new cocktails, wine selection, a hefty new beer list and veteran Chef David Ansill in the kitchen, you can check your fist pump at" name="Description">
<meta content="" name="Keywords">
<meta content="cities2night inc." name="author">
<meta content="Cities2Night 2010" name="copyright">
<meta content="en-us" name="language">
<meta content="General" name="rating">
<meta content="index,follow" name="robots">
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<meta content="Ladder 15 gets a new menu!" name="tweetmeme-title">
<meta content="Ladder 15 gets a new menu!" property="og:title">
<meta content="article" property="og:type">
<meta content="http://philly.cities2night.com/articles/show/listing/11/ladder-15-gets-a-new-menu" property="og:url">
<meta content="http://philly.cities2night.com/public/article_images/11.jpg" property="og:image">
<meta content="c0176da0ec38aaf107c0ef6c8cdeee38" property="fb:app_id">
<meta content="Philly2night.com" property="og:site_name">
<meta content="Growing up can be hard to do, especially in the Mad River family. But Ladder" property="og:description"></head>
Are you using a development URL? This is the page that I see when I visit the link specified by your "og:url", which has the title "Philly2night.com's Articles" and no open graph meta data specified. I imagine this is probably an issue, as Facebook will likely try to pull info from the available URL.
Also, for the pages you listed that have a good number of "likes" already, you may run into this issue:
You can update the attributes of your
page by updating your page's
tags. Note that og:title and og:type
are only editable initially - after
the page receives 10 likes, these
properties become fixed to avoid
surprising users who have liked the
page already, and changing the title
or type tags will result in your page
losing any existing likes.
From the FB Open Graph Protocol explanation.