Hi here I don't know exact title for this, but I will try explain you what exact I want.
1.In my attached screen contains Email compose Box, in that I pasted just
https://www.iconfinder.com/. link. with that link title, Some description, Top border, Bottom border , Close button showing.(Highlighted with red border ) Same with https://mail.google.com/mail/u/0/#inbox/15971ff43d0599ff?compose=15971d7b6a9fc3d3
Here I want to know that, how to generate that extra content same to my Website.
Start using og meta tags (Open Graph) such as:
<meta name="description" content="Your Desc">
<meta property="og:title" content="Sample Title">
<meta property="og:site_name" content="Your Site">
<meta property="og:description" content="Your Desc">
<meta property="og:image" content="Image, if any">
<meta property="og:url" content="http://www.mywebsite.com/">
Add them in the head section of your HTML
You can find the details about it here: http://ogp.me/
Related
My site contain all the meta tags required to share on facebook. image, url, site_name, app_id, title , description etc. all the necessary things.
But when somebody share the page, it doesnot show full preview of the image on some phone. On web and some other phone its working fine.
I tried everything. I read full documentation of facebook about web sharing. I tried recommended size of 1200x630 pixel, also the minimum size of 600x315 pixel. Issue is still there. Setting og:image:width and height manually don't really make any change also.
``` <meta property="fb:app_id" content="<<PAGE ID>>" />
<meta property="og:site_name" content="<<Site Name>>" />
<meta property="og:url" content="<<URL>>" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Some title" />
<meta property="og:description" content="Play now" />
<meta property="og:image" content="<<image url>>" />
```
I'm trying to implement a basic Facebook like functionality to a site. I've triple-checked & more the meta tags, but the og:description -text doesn't show up in the FB news feed. The title and the image work fine.
Here's the code:
<meta property="og:type" content="article" />
<meta property="og:title" content="SOG – VEITSIÄ VIIDAKOSTA ARKITÖIHIN" />
<meta property="og:url" content="http://www.finnprotec.fi/webshop/news/2" />
<meta property="og:description" content="Kunhan kirjoitan vaan jotain tekstia nyt." />
<meta property="og:site_name" content="Finnprotec.fi" />
<meta property="og:image" content="http://www.finnprotec.fi/webshop/kuvat/kuva517a8539a91f1.jpg" />
<meta property="fb:admins" content="6700009220" />
<meta property="fb:app_id" content="348235131938688" />
When I click on the link on the page, the description shows up nicely under the title:
But when I click on the send button, this shows up on my FB feed:
This is what I'm trying to get:
The url of the current page is: http://www.finnprotec.fi/webshop/news/2
I have tried to clear facebook's cache with the facebook linter, but that hasn't helped.
I just ran into this. I found that the description is actually there - you have to hover over the image to see it. It shows it in the format you want sometimes, depending on the size of the post where you're viewing it.
For example, after I've liked my post, I don't see the description in the post shown when I click on my name and view my wall (where the posts are smaller).
But I do see it when I just go to facebook.com and I view the larger version shown in my stream.
I realize this isn't really answering the question; I couldn't find a way to get it to show the description consistently.
add this two lines to your code after og:image
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
it must work
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" />
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 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/