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
Related
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"/>
What's the trick with Open Graph tags to get Facebook to let you to choose from a list of thumbnails?
Facebook auto-chooses the first image I output in my og tags and doesn't give me the ability to choose a second (or third, etc) from the post. The "Choose a thumbnail" control is not enabled and says 1 of 1.
When I debug the page using the Facebook debugger, it successfully shows me all the images and doesn't report any errors.
As an example, here are my og tags:
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page Description">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.test.com/index.cfm">
<meta property="og:image" content="http://www.test.com/images/og-3.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image" content="http://www.test.com/images/og-4.png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
Put <img src="image.jpg" /> in your object page's <body> for each of your images.
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 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>
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/