This question already has answers here:
How does Facebook Sharer select Images and other metadata when sharing my URL?
(12 answers)
Closed 4 years ago.
I have a website and I want to users to be able to share some content from my website to other apps such as facebook, slack, etc. The share is a link points to an image in my website. How can I customize the shared content shown no the apps? For example, I'd like to show an image with a text as its title on slack rather than a weird long link URL?
As pointed out in the comments this works by including special meta tags in the header of your HTML page. It is called Open Graph protocol and both Slack and Facebook support it.
When you then add your URL it will be unfurled to show the content you specified like a specific title, image, description, etc.
Example from one of my websites:
<!DOCTYPE html>
<html lang="en">
<head>
<meta property="og:type" content="website">
<meta property="og:site_name" content="EVE Info" />
<meta property="og:title" content="Rosie Dunbar | Character" />
<meta property="og:description" content="Rosie Dunbar | Ishikawa Corporation | -0.3" />
<meta property="og:image" content="https://imageserver.eveonline.com/Character/2112668467_128.jpg" />
Related
How facebook identify the entered hyperlink and get data from that link. it shows thumbnails, text, pictures, etc. Does facebook using any javascript for framework?
Open graph protocol (OGP) is what helps Facebook get specific data from URL i.e. Web page title, site name, description ... etc
To install OGP on your site (page)
Add: prefix="og: http://ogp.me/ns#" into <html> tag
And:
<meta property="og:title" content="{Title}" />
<meta property="og:type" content="{site_type}" />
<meta property="og:url" content="{page_URL}" />
<meta property="og:image" content="{Thumbnail}" />
between <head> tags.
Those above are basic meta properties You can read more about it on OGP
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
I am using mediawiki 1.19 and I've added facebook 'like'. When I click like the image posted is the site logo. How do I take the image from the page. I've run the site through http://developers.facebook.com/tools/debug and it seems og:image is set to the site logo. How do I change this meta property?
My site is thepetwiki.com
Thanks
You are going to gave to add some custom og:tags to the HTML markup of your page and specify the image that you want to use...
Take a look at the example from the Facebook documentation -
<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>
<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."/>
...
</head>
...
</html>
As you can see the og:image parameter is specified here and that allows Facebook to correctly display the meta data associated with that URL...
You might not need all of the og:tags specified here, title,url,image and description should be fine for just a LIKE button.
You are already aware of the debugger tool - it will help you debug your LIKE button and og:tags. Make some changes in your HTML markup and each time you'll have to send your URL though the debugger to refresh Facebook's cached version of your URL.
A quick Google search gave me this mediawiki extension that looks like it could help you -
http://www.mediawiki.org/wiki/Extension:OpenGraphMeta
OpenGraphMeta provides OpenGraph protocol metadata for articles on the wiki for 3rd parties like Facebook to extract...
see post http://www.mediawiki.org/wiki/Extension_talk:Facebook#OpenGraph_image_problems.
The open graph coding is all part of the Facebook extension.
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">
In my website I have a small gallery with about 100 images only. It would be cool if facebook users could "like" an image so that this appears on their wall and all their friends see the image. I'm not sure if this is possible with facebook. Maybe someone knows?
What you are trying to do is possible, but you have to think about it a little differently. You will need to dynamically create the open graph tags on the page based on some query string or url information. If all of your images are on the same page you would do something like this: Say my page is http://www.example.com/photos.php. First, add all your like buttons to this page. Each image will have its own like button like this:
<fb:like href="http://www.example.com/photos.php?id=###"></fb:like> (where ### is the id of the photo)
Now, what happens with a fb like is when a user clicks like the href url is sent to facebook, then facebook actually makes a request to that url to read the open graph data. So this is where you have to build a dynamic page that provides dynamic open graph data.
So for each image ?id=### display the appropriate open graph tags on the page like so:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Image Name"/>
<meta property="og:type" content="image"/>
<meta property="og:url" content="http://www.example.com/photos.php?id=###"/>
<meta property="og:image" content="http://www.example.com/img/myimg.jpg"/>
<meta property="og:site_name" content="My Site Name"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="A cool image I made"/>
...
</head>
...
</html>
So now when facebook makes a request to the url http://www.example.com/photos.php?id=### it will read the og:image tag and display that image as the image with the post on facebook. It will also use the other properties accordingly.
Let me know if this makes sense or if you have any questions.