I give up! Been trying for a week now.
What I want to do:
I have a website with a quiz, where I want the visitors to be able to share their score on Facebook. Simple right? no...
I have been looking into the Facebook / Open Graph / Custom Stories ect. but I am getting nowhere, somebody help me.
What I have learned so far is that I need to have this on the website:
Works:
<meta property="og:title" content="Funny quiz" />
<meta property="og:description" content="I have scored X points on this quiz" />
<meta property="og:url" content="http://www.website.com" />
Does not work:
<meta property="og:site_name" content="Website Quiz" />
<meta property="og:image" content="https://www.website.com/image.jpg" />
<meta property="og:type" content="article" />
I have wasted hours on the Facebook developers site: "Open Graph Object Debugger", "Graph API Explorer" ect. ect.
I have tried to follow the guides on the developers site. Even the "Creating Custom Stories". Also I have tried to find answers elsewhere, Stackoverflow and searchengines but Google is not my friend :( Also YouTube is to no use. I have even tried to see how Buzzfeed does it, by look in there sourcecode - nothing!
Does anybody have a working example, or tutorial for dummies I can use?
What do you mean by works/does not work? Is it the image that does now show?
Have you included the actual link:
<a href="https://www.facebook.com/sharer/sharer.php?u=<the link to your site/the current quiz>">?
You may have to wait 24 hours for Facebook to crawl your site before the image will work. I've had the same issue before and the next day it worked fine without any changes.
Also, make sure you have your opening html tag like this:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
Related
I have been struggling with this for many hours now and have not gotten anywhere.
I have the following metatags:
<meta property="og:type" content="website" />
<meta property="og:title" content="I'm going to see Speaker name" />
<meta property="og:description" content="This is the description of the speaker" />
<meta property="og:url" content="http://example.com/Speakers.aspx?speaker=35" />
<meta property="og:image" content="http://example.com/test.jpg" />
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
After running this URL through the Facebook debug tool, I was given the following error message:
Object at URL 'http://example.com/Speakers.aspx?speaker=35' of type 'website' is invalid because a required property 'og:image:url' of type 'url' was not provided.
According to Open Graph protocol (http://ogp.me/#structured), the og:image & og:image:url are identical, but I tried to add it anyways:
<meta property="og:image:url" content="http://example.com/RGDDT/images/test.jpg" />
<meta property="og:image:type" content="image/jpeg" />
However the first 7 images on the page are still being scraped instead of the one I want to use.
Any insights would be greatly appreciated!
This is probably the best article on which metatags you need. Facebook requires you to have an id, in order to use even a Like button now a days. I don't see those metatags in your snippet. Try adding:
<meta property="fb:app_id" content="1111111111111111" />
<meta property="fb:admins" content="2222222222" />
The first is your app_id number, it seems you need to turn even your blog into an app to make Facebook happy. The second is your personal id number, you can also use your Fan Page if you have one. Including these things seems to make Facebook happy and I think you get Analytics for your troubles.
So I've finally solved this problem.
Problem #1: I was using 'permanent' URLs (/getmedia/3c87abee-1cd0-4ca3-a07d-b7d8fde8ec4b/irma1.jpg.aspx?width=437&height=434&ext=.jpg) instead of 'direct' URLs (/RGDDT/media/RGDDT/Speakers/facebook-share/irma-boom.jpg?width=600&height=315&ext=.jpg). This was a setting I was able to configure in Kentico (the CMS we have used to build this site)
Problem #2: I was getting the results I wanted in the Facebook debug tool, but they were being cached when I tried to share from the live site. Thanks to this article I was able to solve that problem by adding '&v=1' (or '?v=1' if you don't already have a query string at the end of your URL), so Facebook considered this a new page request and didn't cache the description I had hardcoded in as of this morning.
I want to share an article from our website on facebook, but we are facing two problems:
1/ Almost all the time, the suggested pictures are pictures from the website but from other pages, not from the article I want to share. (And the picture has a straight relation with the subject of the article)
2/ this type of link http://www.kacileo.fr/blogs/4/1wblmb-la-face-cach%C3%A9e-de-nos-faiblesses can't be shared on facebook because we don't have any proper title and picture.
Try by yourself and you'll see! But this link works on linkeIn, Viadeo...
So, do you have any answers? Is there any people who have the same issue ?
Thanks
Facebook uses the Open Graph Protocol when displaying the preview of your link. The best way to tell the OGP what to display is adding some meta tags to the <head> of your page.
<meta property="og:title" content="Example Title" />
<meta property="og:image" content="http://example.com/exampleimage.jpg" />
<meta property="og:description" content="Example description" />
<meta property="og:url" content="http://example.com">
More information on Facebook's website
The problem I'm having is when I post a link to a post on my website to either Facebook or Google+ that link points to my homepage. Even in preview, the thumbnail displayed is that of the homepage.
From what I have found (which hasn't been much) it seems that the problem might be with the facebook metadata. I have tried to validate it on facebook's open graph validator and at first I was getting a 206 result when the links were working. Now I get: Facebook URLs aren't scrapable by this Debugger. Try your own. Not sure why.
Having the same issue with Google+. When I first published the website it was working fine and this happened out of nowhere.
Here is what I have in my header:
<!--Facebook Metadata /-->
<meta property="og:title" content="Website Title"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://URL.com/"/>
<meta property="og:image" content="http://URL.com/img.png"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="fb:admins" content="User_1"/>
<meta property="og:description" content="Website Descriptiom"/>
<!--Google+ Metadata /-->
<meta itemprop="name" content="Google+ ID">
<meta itemprop="description" content="Description">
<meta itemprop="image" content="Empty">
I have tried removing it and still the problem persists. I do want to point out that I have an html site with a wordpress blog that's being hosted on my server. Wondering if the issue might be with wordpress?
Should the metadata be placed on the index.html and the wordpress homepage or just the index.html? Any help would be appreciated. Thanks.
When you delete those metadata tags, specifically the og: ones (facebook's open graph meta tags) - you have to tell Facebook to pick up a new copy of your page as they cache everything. If you haven't tried this already:
Remove those tags
View the source on your live site, to confirm they are in fact removed
Go to http://developers.facebook.com/tools/debug and type in the URL of the page you are testing. This will tell Facebook to grab a new copy.
If that works (as it should), then you can play around with what tags to keep and how to make them dynamic - knowing that anytime you make a change, you will have to redo step #3 to tell FB to grab a fresh copy.
I have tried some of the older responses already posted on the site, but am still struggling to get the code to work.
I have developed a site using iweb, its basic - I am no coder, www.ondulinetileeffectroofingsheets.com , i have easily managed to insert a working video from youtube, and thought that simply copying and inserting the HTML snippet for the facebook like button would also work but the image fails to work, so when I copy and paste the from the facebook developers site, the Facebook image doesn't not appear. - any ideas - thanks in advance x ?
You are going to want to take a look at this link :
https://developers.facebook.com/docs/opengraph/
In there there are details of how to implement og:tags on your page. These tags help the Facebook to decide what image, text and links will be taken from your page to be displayed in the "like" dialog.
The tags look something like this :
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta property="og:type" content="YOUR_NAMESPACE:recipe" />
<meta property="og:title" content="Stuffed Cookies" />
<meta property="og:image" content="http://example.com/zhen/cookie.jpg" />
<meta property="og:description" content="The Turducken of Cookies" />
<meta property="og:url" content="http://example.com/zhen/cookie.html">
Dear fellow developers,
the past days I tried hard to have facebook understand my website what it is - a representation of a hotel/bed and breakfast - i am running with the help of OG. I completely failed. i read a lot here about people having problems parsing their sites as og:type "hotel" or "restaurant". i really tried to understand the situation but i can't help it with a strategy. I read different documentations on the OG site itself - but there is no clear approach - i found contradicting documentations on facebook, too. i tried to come up with a solution offering to implement the complete metatags like
<meta property="og:type" content="my_og_app:hotel">
buts still that just messed it up more.
At the moment I go with that which constantly have my site parsed as og:type:website where i want to go for "hotel" plus adding the geo-lacation as seen below:
<!-- Metatags for Viral Marketing / Open Graph / facebook.com -->
<meta property="og:title" content="Bordemundo B&B - Grüner Urlaub in Patagonien"/>
<meta property="og:type" content="hotel"/>
<meta property="og:url" content="http://www.bordemundo.com/patagonien-deutschland /zimmer_ferienhaus_urlaub.html"/>
<meta property="og:image" content="http://www.bordemundo.com/images/facebook_og_bordemundo.jpg"/>
<meta property="og:site_name" content="Bordemundo Bed & Breakfast Puerto Varas"/>
<meta property="fb:app_id" content="340364045978919"/>
<meta property="og:description"
content="Grüner Tourismus in Patagonien. Wildes Land, einsamer Strand, schöne Zimmer und organisches Essen."/>
<!-- Location -->
<meta property="og:latitude" content="-41.31513"/>
<meta property="og:longitude" content="-72.93576"/>
<meta property="og:street-address" content="km 3, Camino a Ensenada"/>
<meta property="og:locality" content="Puerto Varas"/>
<meta property="og:region" content="Los Lagos"/>
<meta property="og:postal-code" content="5550000"/>
<meta property="og:country-name" content="Chile"/>
<meta property="og:email" content="javiera#bordemundo.com"/>
<meta property="og:phone_number" content="650-123-4567"/>
<meta property="og:fax_number" content="+56-9-629-19443"/>
I appreciate any clear suggestions on that because none of the appearing posts help me. I understand that "hotel" is not supported by OG and more or less a facebook specific entity. but how am i able to make use of an appropriate code and method of implementation then?
i found a hint to declare and object type but in my app this need to be chained to an action. why? and what would that be good for?
saludos desde chile and thx for helping me out,
michael.
Having troubles with the open graph, you should always use the facebook debugger. Paste your url into the debugger and check the warnings and error messages it gives you:
http://developers.facebook.com/tools/debug