Facebook open graph protocol - facebook

I would like to ask how to add data with links after the description to a Facebook post, what meta tags i should use to have such result like image below
http://alternative-spaces.com/UPDATE/screen_shots/GraphProtocol.png
Here is my code
<meta property="og:title" content="Exciting views and amazing floor plans"/>
<meta property="og:url" content="http://mysite.com/"/>
<meta property="og:description" content="sdfsfsd http://mysite.com/" />
<meta property="og:image" content="http://somagrand.com/images/fb_icon.jpg" />
<meta property="og:site_name" content="content"/>
<meta property="og:type" content="company" />
<meta property="fb:app_id" content="229103737100322"/>
<meta property="og:latitude" content="33.8164994"/>
<meta property="og:longitude" content="-116.5469377"/>
<meta property="og:street-address" content="1160 Mission St."/>
<meta property="og:locality" content="San Francisco"/>
<meta property="og:region" content="CA"/>
<meta property="og:postal-code" content="94103"/>
<meta property="og:country-name" content="USA"/>

That post wasnt made by liking a page on that site and therefore wont be concerned with open graph tags. It was done through the legacy REST API action stream.publish - if you go here: http://www.musicolio.com and click the 'share' button at the top you will notice the URL for the popup is something like this (once decoded):
https://www.facebook.com/dialog/stream.publish?action_links=[{"text":"Join Now","href":"http://www.musicolio.com/"}]&api_key=138938132827513&app_id=138938132827513&attachment={"name":"Musicolio","href":"http://www.musicolio.com/","description":"Collaborate on music projects, connect with musicians, find talented musicians, find work in the music industry.","media":[{"type":"image","src":"http://www.musicolio.com/blog/wp-content/uploads/2010/12/micon.png","href":"http://www.musicolio.com/"}],"properties":{"Get Discovered":"Monitored by industry executives","Private":"No Spam","Job Boards":"Get work, get paid","Free":"Get connected for free"}}&display=popup&locale=en_US&next=https://s-static.ak.fbcdn.net/connect/xd_proxy.php?version=3#cb=f24407dddc7a49a&origin=http%3A%2F%2Fwww.musicolio.com%2Ff1be678fb013a1e&relation=opener&transport=postmessage&frame=f11e216310dbbde&result=%22xxRESULTTOKENxx%22&sdk=joey&target_id=
I've highlighted the part you're interested in. More information on this can be found here: http://developers.facebook.com/docs/guides/attachments/

Related

Facebook og:image (link image) does not display when sharing my website

I cannot get the image to show when sharing my site in FB. Below is my open graph code.
I have rescraped using the FB sharing debugging tool (https://developers.facebook.com/tools/debug). soooo many times, and it never displays, in the tool or in a share.
The debugger reports no errors, and lists the correct image.
The image is 1200x630 and exists on the same site.
Using open graph checker displays the expected image.
https://iplocation.io/open-graph-checker.
I have tried everything i can find in posts. but i really need this working for marketing.
Hope someone has the secret sauce.
cheers,
<meta property="fb:app_id" content="123456789"/>
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://www.example.com/images/og2.jpg"/>
<meta property="og:image:secure_url" content="https://www.example.com/images/og2.jpg"/>
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:title" content="my title"/>
<meta property="og:description" content="my description."/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>

Embedded video in Facebook timeline shows "download link", won't play inline only when shared through facebook open graph api

Here are the og meta tags I'm using:
<meta property="fb:app_id" content="xxxxxxxxxxxxxxxxx" />
<meta property="og:video" content="http://videogami.s3.amazonaws.com/54c2c58c19d5bdec65000036.mp4">
<meta property="og:video:secure_url" content="https://videogami.s3.amazonaws.com/54c2c58c19d5bdec65000036.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="600">
<meta property="og:video:height" content="380">
<meta property="og:title" content="" />
<meta property="og:image" content="http://videogami.s3.amazonaws.com/54c2c58c19d5bdec65000036.big.jpg" />
<meta property="og:url" content="http://videogami.tv/h/54c2c58c19d5bdec65000036" />
<meta property="og:type" content="video.other" />
If I share the link manually, the embedding works perfectly. But when I share the link through the Facebook /me/feed api, it won't play and just shows a link to the mp4 that says "download file".
Here is an example link: http://videogami.tv/h/54c2bb1719d5bdec65000030
Any idea why this might be happening? I'm pretty sure you don't need a flash player anymore, it said nothing about this in the FB docs that I could find.
It makes no sense that it would work when you manually post it, vs posting the link through the api...

How are Open Graph og:see_also tags intended to behave in Facebook?

I've implemented og:see_also into my posts, but when they're liked, no additional webpages appear.
Is there specific criteria that needs to be met (i.e. do they require a specific og:type)?
Must they be placed in a specific place within the Open Graph Meta Tag order?
Here's how they're set up:
<meta property="og:see_also" content="http://mywebsite.com/article1/">
<meta property="og:see_also" content="http://mywebsite.com/article2/">
They're displayed appropriately in the FB Debugger Tool. I'm just wondering if perhaps I may be doing something wrong, or if the see_also articles will only appear intermittently?
Here's the full code:
<meta property="og:site_name" content="SITE NAME">
<meta property="og:url" content="http://THEWEBPAGE.COM">
<meta property="og:title" content="TITLE">
<meta property="og:image" content="http://IMAGE-HERE.com">
<meta property="og:image:secure_url" content="https://IMAGE-HERE.com">
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:description" content="DESCRIPTION">
<meta property="og:see_also" content="http://mywebsite.com/article1/">
<meta property="og:see_also" content="http://mywebsite.com/article2/">
The official OpenGraph protocol page doesn't mention anything about og:see_also, and Facebook's documentation doesn't do anything with it.
However, Pinterest mentions it, which suggests it may one of the og: tags Pinterest has extended from the standard. The only description we get is:
URL pointing to other related articles from the same domain. Up to 6 og:see_also tags can be provided.
Presumably, this tag would only have an effect when Pinterest users "pin" your page and get a "Rich Pin" out of it, which is a feature you'd have to apply for.

Embedding videos from my site on Facebook profile

I own a video site. I need to share one video on my site on Facebook embedding it on the timeline, just like Youtube does. When a Facebook user clicks on the preview image on my Facebook profile my player should open into the timeline and the video should play without opening a new page.
I'm using flowplayer on a Wordpress site. Of course I used OG: tags. This is my <head> code:
<meta property="fb:app_id" content="123456789101112"/>
<meta property="og:type" content="video"/>
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="640">
<meta property="og:video:height" content="385">
<meta property="og:url" content="http://www.mysite.com/videogallery/title/"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="Some description"/>
<meta property="og:image" content="http://www.mysite.com/link-to-image.jpg"/>
<meta property="og:image:type" content="image/jpeg">
<meta property="og:video" content="http://www.mysite.com/flowplayer-3.2.16.swf?config={%22playerId%22:%22player%22,%22clip%22:{%22url%22:%22http://www.mysite.com/link-to-video.mp4%22},%22playlist%22:[{%22url%22:%22http://www.mysite.com/link-to-video.mp4%22}]}" />
I'm noticing a very strange thing: I have more than one Facebook account and I can see the embedded video just like I want it with one of these accounts. I only can see the preview image and the simple link to my site with the other ones.

LinkedIn and Facebook like buttons change images and title?

I am using the LinkedIn like button and the Facebook Like button.
On the LinkedIn when I click like, it works property, but I was wondering how I would change the name of the title on the pop dialog that comes up?.
For the Facebook Like button, how would I change the image thumbnail in the pop dialog box?.
Well I got the image thumbnail to work using
<meta property="og:image"
How ever I still have not been able to change the title for LinkedIn
I tried:
<meta property="og:title"
<meta property="og:site_name"
and none of those worked....is there a debugging site for LinkedIn, like Facebook does.
As fas as I know, it is not og:site_name, but og:title. The code below works perfectly for me so I am enclosing it (remember to change the content). Hopefully it'll fix your problem.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="fb:app_id" content="APP_ID" />
<meta property="og:type" content="website" />
<meta property="og:title" content="My cool website" />
<meta property="fb:admins" content="ADMINS_ID"/>
<meta property="og:image" content="http://mywebsite.com/images/mylogo.png" />