I have a blogger post with multiple images. All the images are uploaded from local drive. My blog post
http://canyoureadit.blogspot.in/2017/02/race-to-oscars-2017-part-2.html
I have followed the article on https://www.addthis.com/academy/how-to-add-open-graph-tags-using-blogger/ to open graph related tags.
It just adds the schema definition at the beginning and then some og tags at the head section of the template. Have not added og:image tag to each image of the post.
Now when i share the post on facebook, i only get the first image as preview. Not able to get the other images. I might be missing something here.
I have even followed this https://gist.github.com/pathawks/1343315 but getting the same results
Best Regards,
Saurav
This is happening because your blog is using a Blogger Dynamic Views template. Dynamic Views template load all the data via JavaScript (including the post HTML)
Currently, Facebook scraper doesn't run JavaScript code (Refer to Facebook scraper doesn't load dynamic meta-tags ) and only infers properties from the meta tags and HTML. In your blog's case, as the post HTML is loaded via JavaScript as well, therefore, Facebook scraper only depends on the meta tags for getting information about the page. You can see a live example of what the Facebook scraper see's when parsing one of your blog post - https://developers.facebook.com/tools/debug/echo/?q=http%3A%2F%2Fcodifyit.blogspot.com%2F2015%2F08%2Fcreate-your-first-php-application-with.html
To resolve this problem, switching away from Dynamic Views template to normal Blogger template would be the best solution. If you are particuarly fond of the Dynamic Views design, you can still access it while using a normal Blogger template by accessing the URL - yourblog.blogspot.com/view - For a live example, check https://blogger.googleblog.com/view
Related
I've successfully added a Share button to my website using the following code:
https://developers.facebook.com/docs/plugins/share-button
It produces a popup with a link to the og:url along with the title of the linked page and a picture from it, which I can then post, and it shows up on my Facebook.
I am having 3 issues with this:
I've update the og:url and data-href after page load, using jquery, but the new values get ignored when I Share.
the og:title, og:description, and og:image don't appear to be used at all.
Sometimes I'd like to Share some custom text (and images if possible) without any url.
I'm aware that Facebook provide other tools/APIs that provide more versatility but it seems that would mean my site would have to go through a review process, and I'd have to code for security. This is not an option and I want to stick to the popup method.
Hope someone can help. Many thanks.
If the tags do not change when posting, refresh (and test) the tags in the debugger: https://developers.facebook.com/tools/debug/sharing/
Dynamically created Open Graph tags (with JavaScript) will be ignored, the tags have to be in the original page source.
im using wordpress on my web site and im having problems posting articles on facebook.
for every article i post i always get the same og title and og url. this is cleary a url masking issue as my meta tags cannot change even if i settled them on wordpress header.php.
here is the website.
http://carnagenews.com/
anyone can help me?
basically i want dynamic og title/url/description/image avoiding that the url cloaking always output the same meta tag
thanks guys!
There is couple of issue with your site:
Your site on http://carnagenews.com/ is just a top-level frame wrapping http://carnageweb.altervista.org/ which Facebook will not follow with linter and will not populate your OpenGraph data with correct details until OpenGraph meta exists at the URL specified by og:url meta tag.
Your real pages result in 404 response code for Facebook Linter (check for yourself using Debug Tool).
Our websites article backend does not allow access to anything above </head> which prevents our writers from specifying shareable content with use of the facebook meta tags. Anyone know an alternative route of specifying the article image, title, and description of a shared article without accessing the <head>? My search yielded no results, my apologies if this has been answered.
Can you give your writers a way to create meta tags in other separate pages, outside of your article backend?
The Facebook Open Graph meta tag content does not need to reside within the same page that the like button is rendered on. The shareable content (images/titles/descriptions) will be pulled from the meta content of the page referenced in the URL parameter of the Facebook button. So you could create separate pages corresponding to each of your articles that serve simply to supply the meta content for the Facebook news story post. The Facebook news story posts would still link back to your articles as long as the meta "og:url" in the placeholder file is set to your article url.
The Documentation from facebook isn't understandable, atleast for me.
I have never worked before with facebook and had a basic requirement of putting a like button on Product pages.
So yesterday, I added the OpenGraph meta tags and like button to my Product pages as stated in this documentation, https://developers.facebook.com/docs/opengraph/. I also created an app, as the document stated that it has extended the basic meta data to add a required field to connect your webpage with Facebook: fb:app_id.
The like button has been set but i have few queries which are as following :-
For some pages, the like button doesn't read the og tags. Rather than publishing the whole thing in a story manner by reading og tags, it just shows a link. During googling, I read it happens because of facebook caching and since, I shared the link on facebook before putting the meta-tags, this is happening. So, Is there any way that I can direct facebook to reset all the caching for my pages or scraping that it has done earlier.
Though I have created the App, I actually have no idea what to do with it. Why is it needed and what matters it can help me with.
I tested one of my URLs here: Facebook Linter but it shows some error and stuff which i can't understand. Below is the image. Please tell if I have done anything wrong and why it's showing these errors
Documentation for OpenGraph on Facebook containing outdated information about pre-defined types, see OpenGraph Types. You probably need to define your custom Object Type "Product" in for your Application/Site using Developer Application in Open Graph settings.
You may want to read Documentation for OpenGraph beta too.
Update:
There is a similar question about exactly this og:type: Opengraph meta tag og:type set to “product” errors (like button & URL linter/debug)
I'm integrating a Like button in the individual blog posts on my company's website ( www.atlas-games.com , blog by CLASSIC Blogger at http://blog.atlas-games.com ... can't use a widget). Unfortunately the metadata isn't passing through, so in Facebook it looks like:
Michelle Nephew likes a link.
Atlas Games: Charting New Realms of Imagination <--website's name, not post title
The item links work correctly on "link" and "Atlas Games ..." directing to the individual post, but it's using generic text rather than the individual post's title, the site name I specified for Facebook, and the image.
Object Debugger comes up with Inferred Property errors for URL, Title, and Image, though I specify them in the header of my page. For some reason Facebook just isn't finding the metadata, seems like. See the report here:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fblog.atlas-games.com%2F
I'm having trouble posting my code here ... View Source, though, and you'll see the Meta Property tags in the header and the iframe in the post's footer code (commented out right now).
This is the third time over the course of several months that I've spent hours trying to get this to work, with no luck, so it's not a temporary issue. Any suggestions?
It seems like the structure of the HTML might be the issue as it could be stopping Facebook finding the Open Graph tags.
Fixing these validation errors might allow the tags to be parsed:
http://validator.w3.org/check?uri=http%3A%2F%2Fblog.atlas-games.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Also there are some template variables in the OG tags which aren't being replaced with values:
<meta property="og:title" content="<$BlogItemTitle$>" />
I have the same problem on my blog! And I can't even insert html for the facebook like button directly from facebook developers, into my blog, my blogger blog tells me that the html is erred. I think it has something to do with blogger being a google blog and google now having google+. I noticed all my problems began when google+ came out, I think google is possibly screwing up the facebook like buttons on google sites, to gain monopoly through "share on google+" .