I want to code my website in such order so if someone paste my website's URL in their facebook status update or in their profile page,this post will display correctly,with an image on the side,text parsed from the website.
For example i am posting a screenshot.The one on the left is my site.The one on the right is some random site.See they have included a picture,a text paragraph,a title and so on....
Are there any special guideline or rules i should follow or is it out of my powers.
Also,i could even think a search term for googling it so i post it here(dont even know what to search at FB apis).
Thank you all!
Take a look at the Facebook Docs. You'll need to include Open Graph tags withinin your <head>
https://developers.facebook.com/docs/opengraphprotocol/
From the docs:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<!-- the bold title on Facebook -->
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<!-- the url under the title on Facebook -->
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<!-- the image to the left of text on Facebook -->
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<!-- the description under description and title on Facebook -->
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
...
</head>
Related
I'd like to show a share dialog using URL Redirection as described here : https://developers.facebook.com/docs/sharing/reference/share-dialog
The example they provide is the following : https://www.facebook.com/dialog/share?app_id=145634995501895&display=popup&href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2F&redirect_uri=https://developers.facebook.com/tools/explorer
I tried to achieve the same with a custom page I created (with og meta tags), here is the code :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta name="description" content="Page description. No longer than 155 characters." />
<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">
<!-- Open Graph data -->
<meta property="fb:app_id" content="762471050442760" />
<meta property="og:site_name" content="Facebook Developers" />
<meta property="og:title" content="Documentation for building software with Facebook - APIs, SDKs and Services" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://developers.facebook.com/docs/" />
<meta property="og:image" content="https://fbstatic-a.akamaihd.net/rsrc.php/v2/y6/r/YQEGe6GxI_M.png" />
<meta property="og:locale" content="en_US" />
<meta property="og:description" content="Learn how to integrate with Facebook's APIs and developer tools to drive growth and engagement to your app, website or content." />
</head>
<body>
</body>
</html>
This page is stored at this location (fake location here) -> www.mysite.com/test.html
Now I try to use the following link to share : https://www.facebook.com/dialog/share?app_id=MY_APP_ID&display=popup&href=www.mysite.com/test.html&redirect_uri=www.mysite.com
But I don't get the same result as the example they provide. Instead I get some image and description from another website (not at all the one I created with og meta tags).
How can I solve that and customize my share dialog ?
Thanks
It was a cache problem. I managed to refresh this by going to https://developers.facebook.com/tools/debug/ with the following Input URL www.mysite.com/test.html
For a Facebook game, I want to have Open Graph picture objects with titles in multiple languages (specifically, English and German). I did everything as described in Facebooks open graph internationalization document, but somehow the objects (and actions) are always shown with English titles in the newsfeed and activities - and the app is definitely localized in its configuration.
Here's the URL of one of the objects: http://apps.facebook.com/spot-it/opengraph/picture/pictures.1A24.html
If I get it through Facebook's object debugger using the fb_locale parameter set to German, I see:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# spot-it: http://ogp.me/ns/fb/spot-it#">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="og:locale:alternate" content="de_DE">
<meta property="og:locale:alternate" content="en_US">
<meta property="og:locale" content="de_DE">
<meta property="fb:app_id" content="419035224820013">
<meta property="og:type" content="spot-it:picture">
<meta property="og:url" content="http://apps.facebook.com/spot-it/opengraph/picture/pictures.1A24.html">
<meta property="og:title" content="Beißerchen">
<meta property="og:description" content="Findest du die Fehler in 'Beißerchen'?">
<meta property="og:image" content="http://d2tv32y5kdvj8c.cloudfront.net/assets/pictures/1A24_potd.jpg">
</head>
<body>
<script type="text/javascript">
self.location.href = "";
</script>
</body>
</html>
So why doesn't Facebook use the German version when displaying actions involving that object to German users? Am I doing something wrong, or does internationalization for open graph simply not work?
in the app settings at developers.facebook.com > your app > "Localize" you can add support for additional languages.
you can set:
display name
tagline
description
detailed description
explanation for permissions
and all images like logo, icon, web banner, cover image…
i hope this is what you're looking for ;)
When I click on the link button on my website , I get the notification on Facebook that I have liked such and such thing and along with that my Logo of the website Appears. However I want that the logo of the website is not shown but instead the Image of the product is shown.
I am using the step 1 like button on this URL https://developers.facebook.com/docs/reference/plugins/like/
You need to look at open graph meta tags and in particular the image tag. og:image.
A full example of tags and how they work can be found here http://developers.facebook.com/docs/opengraphprotocol/ but the general jist of what you need is:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>My Movie Website</title>
<meta property="og:title" content="My Movie Website"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://mymovies.com/images/logo.png"/>
<meta property="og:site_name" content="My Movies"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="Some content description blah..."/>
...
</head>
...
</html>
By setting this tag it should tell Facebook the image to load. You can test this via Facebooks tools online here http://developers.facebook.com/tools/debug
I use Facebook application (shortstack) to make my page.
I want to Personalize publication when I share it with short URL.
I have test to create a open graph meta tags but it's don't work .
You need to put opengraph meta tags in your page like
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
example found it here http://developers.facebook.com/docs/opengraphprotocol/
You also need to change the top tag to
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
And then it should work fine :)
To debug your page and see if you correctly implemented opengraph tags use the debugger tool here: http://developers.facebook.com/tools/debug/
Hope that helps
I have a website that uses the Facebook like button.
I am attempting to get the "Administration" link to show up on the page so that I can push content to people who like the page.
My page's HTML namespace is like:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#">
My meta tags are like so:
<link rev="canonical" href="http://mysite.com/welcome/" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="MySite" />
<meta property="fb:app_id" content="012345678910" />
<meta property="og:title" content="Name of my page" />
<meta property="og:description" content="Description here..." />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://mysite.com/welcome/" />
<meta property="og:image" content="http://mysite.com/path/to/image.jpg" />
I have checked the page with the Facebook debugging linter and it passes without any warnings or errors. I am an admin of the app.
What am I doing wrong?
Note: I've also tried to put the <meta property="fb:admins" content="01234567" /> in to no avail. I've also tried different xmlns tags and even without any xmlns tags.
There is no og:admins tag. Try fb:admins and fb:app_id tags:
<meta property="fb:admins" content="USER_ID1,USER_ID2"/>
<meta property="fb:app_id" content="1234567"/>
You'll also need to press the 'Like' button.
1) Are you logged into Facebook
2) How long have you been waiting it can take some time to trickle thru Facebook's Servers.
3) The correct tag is fb:admins check Page Administration on https://developers.facebook.com/docs/opengraph/ -
<meta property="fb:admins" content="USER_ID1,USER_ID2" />
Also your og:app_id is wrong it is fb:app_id
4) At the bottom of the debugger it will give you a Graph URL click that to confirm the admins are correct
Whats the URL you are trying in the debugger?
It appeared that the problem stemmed from having the wrong xmlns tags in the <html> element.
I had a custom xmlns tag that was sending likes to the wrong graph (I believe...).
The current tags that are working are:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
After this change, liking a page would show up the Administration link.
Thanks for the responses!