opengraph
A Ruby wrapper for the Open Graph protocol.
Documentation for intridea/opengraph (master)
When using Facebook Sharer, Facebook will offer the user the option of using 1 of a few images pulled from the source as a preview for their link. How are these images selected, and how can I ensure that any particular image on my page is always included in this list?
Source: (StackOverflow)
Chrome (or any other webkit browser) throws a ton of these "Unsafe JavaScript attempt to access frame with URL..." when working with the Facebook API for example.
It doesn't interfere with actual operation, but it does make the javascript console basically unusable.
I'd like to know if there is a way to suppress these errors specifically in the console? Or if there are other solutions you guys can think of, I would really appreciate it.
Thanks.
Source: (StackOverflow)
When posting a link directly to a Tab on a Facebook Page,
https://www.facebook.com/PAGENAME?sk=app_APPID
Facebook picks up the Page's Open Graph <meta> tags, which means the link post gets associated with the Page's profile picture, name, and a description of "Page • n like this".
I had hoped that Facebook would instead use the og <meta> tags from the app's HTML, allowing link posts to be customized.
What's the best way to provide a direct link to a specific Tab on a Facebook Page with custom content in the link post?
Source: (StackOverflow)
First -- I do not believe this is a duplicate issue. I've searched for same or similar problems on SO extensively, and due to the nature of troubleshooting before asking, I believe this problem is unique.
Facebook cannot grasp my og:image files and I have tried every usual solution. I'm beginning to think it might have something to do with https://...
- I have checked http://developers.facebook.com/tools/debug and have zero warnings or errors.
- It is finding the images we linked to in the "
og:image", but they're showing up blank. When we click the image(s), however, they DO exist and it takes is straight to them.
- It DOES show one image -- an image hosted on a non-https server.
- We've tried square images, jpegs, pngs, larger sizes and smaller sizes. We've put the images right in public_html. Zero are showing up.
- It's not a caching error, because when we add another
og:image to the meta, FB's linter does find and read that. It DOES show a preview. The preview is blank. The only exception we're getting is for images that are not on this website.
- We thought maybe there was some anti-leach on
cpanel or the .htaccess that was preventing the images from showing up, so we checked. There was not. We even did a quick < img src="[remote file]" > on an entirely different server and the image shows up fine.
- We thought maybe it was the
og:type or another oddity with another meta tag. We removed all of them, one at a time and checked it. No change. Just warnings.
- The same code on a different website shows up without any issue.
- We thought maybe it was not pulling images because we're using the same product page(s) for multiple products (changing it based on the get value, ie, "details.php?id=xxx") but it's still pulling in one image (from a different url).
- Leaving any
og:image or image_src off, FB does not find any images.
I am at the end of my rope. If I said how much time myself and others have spent on this, you'd be shocked. The issue is that this is an online store. We absolutely, positively cannot NOT have images. We have to. We have ten or so other sites... This is the only one with og:image problems. It's also the only one on https, so we thought maybe that was the problem. But we can't find any precedent anywhere on the web for that.
These are the meta-tags:
<meta property="og:title" content="[The product name]" />
<meta property="og:description" content="[the product description]" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" />
<meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" />
<meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" />
<meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" />
<meta property="og:type" content="product"/>
<meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" />
<meta property="og:site_name" content="[our site name]" />
<meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/>
<meta name="title" content="[The product name]" />
<meta name="description" content="[The product description]" />
<link rel="image_src" rel='nofollow' href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" />
<meta name="keywords" content="[four typical keywords]">
<meta name="robots" content="noarchive">
In case you want it, here's a link to one of our product pages that we've been working on. [Link shortened to try to curb this getting into search results for our site]: http://rockn.ro/114
EDIT ----
Using the "see what facebook sees" scraper tool, we were able to see the following:
"image": [
{
"url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"
},
{
"url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"
},
{
"url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"
}
],
We tested all links it found for a single page. All were perfectly valid images.
EDIT 2 ----
We tried a test and added a subdomain to the NONSECURE website (from which images are actually visible through facebook). Subdomain was http://img.[nonsecuresite].com. We then put all images into the main subdomain folder and referenced those. It would not pull those images into FB. However, it would still pull any images that were referenced on the nonsecure main domain.
POSTED WORKAROUND ----
Thanks to Keegan, we now know that this is a bug in Facebook. To workaround, we placed a subdomain in a different NON-HTTPS website and dumped all images in it. We referenced the coordinating http://img.otherdomain.com/[like-image.jpg] image in og:image on each product page. We then had to go through FB Linter and run EVERY link to refresh the OG data. This worked, but the solution is a band-aid workaround, and if the https issue is fixed and we go back to using the natural https domain, FB will have cached the images from a different website, complicating matters. Hopefully this information helps to save someone else from losing 32 coding hours of their life.
Source: (StackOverflow)
Is there a way to retrieve the list of Facebook users that have clicked the like button on an external website?
- E.g. there is a domain example.com which has been confirmed via Facebook Insights to belong to fbUser1 (using OG meta tags).
- Somewhere on example.com there is a page with multiple XFBL like buttons, each one pointing to a further specific URL on example.com, e.g. example.com/xyz, example.com/abc etc.
What I'd like to get is the list of users that liked example.com/xyz and of those who liked example.com/abc.
My intuitive approach would be to look at graph.facebook.com/123456789/likes (where the number is the ID of the domain taken from FB insights), but this always returns an empty dataset:
{
"data": [
]
}
I've also tried getting an OAuth access token from https://graph.facebook.com/oauth/access_token?type=client_cred&client_id=APPID&client_secret=APPSECRET (where APPID and APPSECRET are taken from a FB application that is marked as owning the domain using OG meta tags), but that makes no difference.
I'd also be interested in a non-OpenGraph (i.e. JS SDK, FQL etc.) solution.
EDIT: Using the following code (according to WideBlade's answer below) still gives me an empty list of likes (the second query never returns):
var objectsQuery = "select id from object_url where url in ('http://example.com/xyz', 'http://example.com/abc', 'http://example.com/123')";
var likesQuery = "select object_id from like where object_id = {0}";
FB.Data.query(objectsQuery).wait(function (objectRows) {
console.log(objectRows);
FB.Array.forEach(objectRows, function (objectRow) {
FB.Data.query(likesQuery, objectRow.object_id).wait(function (likeRows) {
console.log(likeRows);
})
});
});
Source: (StackOverflow)
I have a client who already has a Facebook page associated with their own website. I finally convinced them to integrate open graph tags into their pages, since when anyone clicked the Facebook Like button on their website, it looked awful on Facebook (since it chose whatever images and content it wanted).
I have admin access to their Facebook page, however, they are using the fb:appid tag instead of fb:admins on their website, so I can't see any of the insights on Facebook.
So I need to be made an admin of their Facebook application as well, in order to see the insights?
I've read dozens of forums and posts about this, including Facebook's own Open Graph documentation and I still don't REALLY understand the difference between fb:admins and fb:appid. As far as I can tell, fb:appid is more for developer/programming access, whereas fb:admins is for those who just want reports and insights for page activity.
In what circumstances would I want to use fb:appid over fb:admins?
EDIT : Let me clarify. I can already view insights for the company's Facebook page. What I want to do, is see the insights for users who have clicked the Like button on the website.
Source: (StackOverflow)
I properly set og:image on my website, the facebook linter sees it (facebook debugger) however, it says the image should be at least 200x200, which it is not the case, my image is 250x250 image.
What could be causing the issue? Could this have anything to do with Cloudfront?
Edit: I got around it by switching from this image to another image which is a
jpg image, but still I couldn't find the cause for the problem since the image
looks fine.
Source: (StackOverflow)
I'm trying to implement Facebook's OpenGRaph protocol on my product pages.
On each page i have this above the head section:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
Then within the head section i have:
<meta property="og:title" content="This Page Title"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://www.mywebaddress.com"/>
<meta property="og:image" content="http://www.myimage.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="10101010101"/>
<meta property="og:email" content="hello@mywebaddress.com"/>
<meta property="og:description" content="Description of my product."/>
I then have a 'like' button with this code:
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-rel='nofollow' href="http://thispagesurl" data-send="true" data-width="350" data-show-faces="false"></div>
To my eye, everything seems to replicate what can be found on the Facebook Developers page but when i 'like', Facebook is seemingly only picking up on the page title and general info.
I have tried to 'debug' the page using their Object debugger, and i get these warnings:
Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:title property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:image property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The og:locale property should be explicitly provided, even if a value can be inferred from other tags.
As far as i can tell, i have followed Facebook's instructions to the letter, but i have no joy. Can anyone point out if i'm doing anything wrong?
Thanks in advance,
Dan
Source: (StackOverflow)
I am trying to use FBGraph to let my app publish messages on the users wall. However, all of the APIs are kind of foreign to me and I am just trying to change things and see what happens. Right now, I am getting this error message
{
"error": {
"type": "OAuthException",
"message": "Invalid redirect_uri: Given URL is not allowed by the Application configuration."
}
}
Does anyone know what it means by redirect_uri? What would it be on my Application Settings page on facebook?
Source: (StackOverflow)
This is my current implementation of the Open Graph tags using Laravel 5:
app.blade.php
<title>@yield('title')</title>
<meta property="og:title" content="@yield('og-title', 'DEFAULT PAGE TITLE')">
<meta property="og:image" content="@yield('og-image', 'default.png')">
<meta property="og:url" content="@yield('og-url', '{{ Request::url() }}')">
<meta property="og:site_name" content="SITE NAME">
page.blade.php
@extends('app')
@section('title', $article->title . ' | SITE NAME')
@section('og-title', $article->title)
@section('og-image', secure_url('img/news/' . $article->image .'.png'))
It works for the most part, but I have a couple inquiries:
Is there a way to use @yield() in @yield?
I tried <meta property="og:title" content="@yield('og-title', @yield('title'))"> but it did not work.
How can I get the current SECURE url of the page?
{{ Request::url() }} returns http://example.com/page, but I want https://example.com/page
As a meta, please let me know if you have any suggestions to improve my current method of OG.
Source: (StackOverflow)
Will other services other than Facebook use Open Graph tags when scraping the page for sharing information?
Meaning, if I have an AddThis button (for example) on a page, which allows sharing to Facebook, Google +, and Pinterest etc., will any of the other services also honor those meta tags? Or is generally something we do specifically for Facebook?
Source: (StackOverflow)
HTML 5 validator is failing on my code despite me following the Facebook documentation to the letter. There are a variety of problems but let's start with one example to start with.
I'm following the Facebook "Getting Started" documentation and using th5is code:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
The only difference is I precede this with <!DOCTYPE html> for HTML5. When running it through the W3C HTML5 validator I get this error:
Attribute xmlns:og not allowed here
The only things I can think of what the error are:
- Facebook's documentation is wrong
- I'm supposed to add some kind of namespace to the
<!DOCTYPE html> declaration.
However, in either case I don't know what the fix is. Would love some help!
Source: (StackOverflow)
At the f8-conference Facebook just announced the new timeline view. This is based on the new Open-Graph model
The question is, how is this data retrieved via the API?
Retrieval should address a number of complexities:
- The filtered nature should be just like in the online view, i.e. not everything from the ticker should show up
- Even more, the granularity of the timeline view should be reflected just like on the webpage (more detail today, less detail in the past, but the option to dig deeper at any time)
- The aggregation view of app data should be supported
- The cover image should be part of the data
Right now, it is not obvious to me if this is or will be possible at all.
Source: (StackOverflow)
hope you can help me...
I want to have a page with facebook metatags, like:
<meta property="og:title" content="TITULO" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://profile.ak.fbcdn.net/hprofile-ak-snc4/277072_61646342824_993843268_n.jpg" />
<meta property="og:url" content="http://www.clarin.com" />
and the problem is that instead of showing the descriptions, titles and images that I define in the metatags of my page, the facebook like box is generated with the url defined in my og:url. I was reading documentation and it seems that it should be in that way.
But I still want the facebook like box generated only with the metatags of my page, and not with the url defined in og:url.
is it possible? someone has done?
Source: (StackOverflow)