I have an app that makes posts to facebook via a self-hosted object using open graph.
On desktop, the post looks exactly as I want. Here is how it looks:
And here is how it looks on mobile (incorrect, seemingly ignoring my sentence construction in the app admin console as well as my OG meta tags in my self-hosted object:
I am trying to find a way to make my mobile posts look more like this one, which seems to have its open graph meta tags honored on mobile as well as desktop (mobile shown here):
Can anyone let me know if I am making a crucial mistake? I can also share the meta tags in the self-hosted object if that will help get to the bottom of this!
Related
According to my testing, Facebook's crawlers do not render client-side templates like a browser.
I want to avoid a webserver and building HTML files for Open Graph objects at all costs. I want to generate the meta tags on the fly via the URL, but it seems Facebook cannot do this.
Can someone from Facebook please confirm? I asked the head of Open Graph at #mobiledevcon and she said that Facebook can render stuff like {{value}}
My meta tags are as follows, and they render fine in every browser. But the Facebook Open Graph Debugger only sees the raw text, not the interpolated content.
<meta property="{{meta.property}}" content="{{meta.content}}">
When you think about it it should be clear, why this does not work.
The Facebook crawler downloads the HTML as it is served by the server. The Facebook crawler will not execute any JavaScript, like all the crawler will not execute the JavaScript. This is due to security restrictions and for speed reason (they do not have the time execute JavaScript on their servers.)
There is no way around this. If you want the crawler to index you page, you need to give them directly what you want them to read.
Tip: You could use something like phantom.js to render your pages on the server side and serve this to the crawlers.
The solution is basically to use some kind of server-side user-agent detection to pick up whenever a social media crawler arrives.
Use the ?_escaped_fragment_ method along with a prerender service. Facebook will respect the same crawlable Ajax specification as Google. Please see https://developers.google.com/webmasters/ajax-crawling/docs/specification
I have been reading about using Open Graph (OG) meta tags to improve the way facebook works with your website. I have read two tutorials that say to create an application and use the application ID. But I am not developing an application, all I have is a business page... Can I just the page ID?
Can anybody also point out any good, simple resources around the using OG in my website?
Thanks
The sharer.php method (which is deprecated) allows you to post without an application. The feed/post method appears to require an app_id, though it's possible that there's some way around that. On the bright side, there's nothing complex about creating an application, so, if that's what you must do, I'd say just do it :)
Here is an example of how it works *with an app using the feed/post method (you'll need to click the "Post to feed" link at the top (yes I know it doesn't look like a link!).
and Here is the same exact example only using Sharer (notice that this time it's pointing at a slightly different url (drawImageForFB2.php instead of drawImageForFB4.php).
I use a php to render the tags based on the vidId that I collect but that's neither here nor there... you could just as easily have this as a static HTML page.
The innards of the OG tag are just about identical and the app_id tag in the OG is entirely optional as it pertains to the second example).
Oh, and addthis does it using the dialog api which looks like this
https://www.facebook.com/dialog/feed?redirect_uri=http://s7.addthis.com/static/postshare/c00.html&app_id=140586622674265&link=http://support.addthis.com/customer/portal/articles/381222-optimize-facebook-sharing#.UQ8bBJM9KQk.facebook&name=Optimize%20Facebook%20Sharing&description=
Hey everyone I was working on a Wordpress site in a dev environment and when I shared a page on Facebook I would see a nice preview image and some of the text. When I moved the site to production now I don't see the image and the preview text is a bunch of CSS code.
Here are two links to test with
Dev - http://www.facebook.com/share.php?u=http%3A%2F%2Fssb.thejspot.ws&title=Sunset+Beach+Golf+Company
Live - http://www.facebook.com/share.php?u=http%3A%2F%2Fssbeachgolf.com&title=Sunset+Beach+Golf+Company
You don't have any open graph tags defined for either site. You're lucky on the dev site that you were getting what you want.
Either code the open graph tags into your theme or get a plugin (I like Wordpress SEO) that adds the tags for you.
Also, take a look at the output from the Facebook debugger for each of your URLs. That is the first place you should start when you're not getting the results you want.
I know this question has been rised quite a lot of times, but then they constantly change things at Facebook and none of the numerous ways I've discovered on the web, works for me. Maybe it worked before, but not anymore.
I have a web page with a video playing in our skinned jwplayer. All the og tags are beautifully set, so that when a visitor likes the page, it's title, description, thumb and custom flash player are nicely shared on the users wall. Video even plays right there on the wall, in the embedded and customized flash player. So everything works as expected.
But!.. We would like to auto-post our new posts onto the website's page on Facebook and we want them to look exactly like when they are shared. One would probably expect that it'd be enough to simply post a link through PHP SDK and facebook will do the rest. But it doesn't. It seems to not pay attention at og tags in latter case.
What would be the right way to do this? Is it possible to force facebook to look at og tags? Or how to publish a post with a video in a similar way, but through PHP SDK?
One would probably expect that it'd be enough to simply post a link through PHP SDK and facebook will do the rest. But it doesn't.
What exactly are you posting – just a link, or a post containing a link?
(For difference between the two types of creating a feed object see https://developers.facebook.com/docs/reference/api/user/#posts vs https://developers.facebook.com/docs/reference/api/user/#links)
Is it possible to force facebook to look at og tags?
Normally it does without any further action neccessary.
Have you tried, though, putting your new posts URL through Facebook debugger before posting it?
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)