Whenever we post any url to facebook, it extracts its data and shows the basic information like title, thumbimage etc. I just want to know how it detects whether the url contains a video and adds a play button on top of the thumbimage.
Here are a couple links to get you on the right track. The short answer is Open Graph, e.g.
<meta property="og:image" content=""some content..." />
and if those tags aren't available, in simple terms, facebook guesses.
How Does Facebook Know What Image To Parse Out of An Article?
Facebook uses the Open Graph Protocol to determine what content is being shared. It is up to the webmasters/developers to insert these tags on their content.
Webmasters - Facebook Developers
Related
I've seen it several times on my facebook timeline where the image of a shared link is not in the post itself. Example:
https://www.facebook.com/BarakaBits/posts/1065758210116791 - Image has text on it.
screenshot
Here's the post itself: http://www.barakabits.com/2015/01/beauty-moroccos-diversity-captured-stunning-photo-series
Is this a hidden image? I'm using a wordpress blog, how can I do this? Do I need a special plugin?
Thank you in advance!
Wil
I don't know exactly what this site is doing, but you can suggest that Facebook use a specific image (not necessarily one found on the page) by using the og:image Open Graph tag. For example, something like this would go in the <head> portion of your site:
<meta property="og:image" content="http://www.barakabits.com/wp-content/uploads/2015/01/Moroccos-faces-featured-6.jpg">
As you can see from the site you referenced, you can have multiple og:image tags, and the user will be able to choose which one is displayed in the post.
Here's Facebook's guide to Open Graph tags: https://developers.facebook.com/docs/sharing/best-practices
I was on Facebook, and thought to ask people to visit my website via a post. However when I pasted my website URL into the comment box, some other photo that is related to the Wordpress parent theme I'm using as a base theme showed up. How can I control what image of the site Faceboook see and relates to my website, instead of it just grabbing whatever it wants to grab?
You need to set the correct Open Graph tags.
Use this debugger to get more information: https://developers.facebook.com/tools/debug/
The specific open graph tag you are looking to set is og:image
Example:
<meta property="og:image" content="http://www.example.com/image_name.png" />
Another important note is that Facebook caches whatever it reads from the page (name, image, description, etc.), and the only way to reset the cache is to check the page using the debug tool I mentioned.
One of the problems I face while sharing a link of my blogger post on facebook or linkedin is that the thumbnail shared is my picture (which is the only picture on the page). I would prefer no thumbnail being shared.I tried using
<meta property="og:image" content=""
I.e the content is kept as blank, yet it shows a thumbnail. How do i set it to no picture?
You can't. Facebook/Linkedin will crawl your site and decide on it's own what images to offer the user. The og:image meta tag is just a suggestion and not a directive.
The only way to share without image is for the user to remove it.
Update: there is another way. You could detect (on the server) FB/LinkedIns crawler and serve them HTML that does not contain any images. That way they wouldn't have anything to display (just text). I don't know if that's possible on blogger. And if you go down this path, check FB/LinkedIn's TOS if this is allowed (doing this with google, for instance, will get you banned).
I have a like button that works and that takes the image I have specified through the following parameter and attaches to a user liking the post on there feed.
<meta property="og:image" content="http://www.mysite.org/images/logo_50x50.gif" />
I basically want to use this image only for my users when they like an article, but when posting from a specific article "on my facebook site"..I want to be able to still select the images pulled up from that link. That doesn't happen. All I get right now is what I specified in my og:image parameter.
How would I achieve this?
You can't, you just told Facebook which image to use - it's supported to have multiple og:image tags but i'm not sure if which image to display is deterministic, random, or uses a picker like the system used when you don't specify an image
I'm develop sucsongmoi.net (vietnamese language) and when viewer share link of site from their wall some link facebook get description and image, some link facebook could not get description and image.
eg: share sucsognmoi.net facebook do not get description, image
but when i share: sucsongmoi.net/nau-gi-hom-nay-84.html facebook could get description and image.
I feel odd because I implement same code for this.
when I share through:
https://www.facebook.com/sharer/sharer.php?u=http://www.sucsongmoi.net/?a=1
then it works. Is that facebook cache my site (như google index)? Then how can I update it?
thanks in advance
Here is a great tool facebook provides us to deal with exactly these issues -
Meet facebook's URL Debugger. With regard to YOUR problems, you can see from this report that facebook is unable to retrieve the title & url og:tags.... this is possibly due to the non-standard character set that you are using... can you try change the og:title value to something with only regular English letters? Or alternatively placing some Unicode characters instead.
I can not see ANY og:tags in your source. You can read more about Open Graph and the og:tags on this link.
Basically you have to place these tags in your page so that facebook can know what information to take and display when a user shares your url.
For example :
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
This will tell facebook about the image to use and the website name.
If you want to control the information that is shown when your link is posted in a Facebook status then you must add some Open Graph tags to the head section of your web page.
They are explained here: https://developers.facebook.com/docs/opengraph/