when sharing a page on facebook using addthis, image aren't shown on the facebook.
the sharing link on facebook shown as this
You can define an image using Open Graph Meta Tags in your HTML code. Facebook will then use this image as preview for your post.
You can read more about Open Graph at their website: http://ogp.me
Use the tag "og:image" to properly link your image:
<head>
...
<meta property="og:title" content="Title of webpage"/>
<meta property="og:description" content="A description of your page"/>
<meta property="og:image" content="previewimage.png" />
...
</head>
Related
Just wondering what HTML5 element is shown as the image for a Facebook post which contains a preview of the URL mentioned in the post?
I want to post a link to my website and have my logo appear in the image box of the URL preview...
Hopefully my question makes sense.
You can achieve that by adding Facebook specific OpenGraph meta tags in the header of your webpage.
Here are the meta tags you need to add
<meta property="og:url" content="WEBSITE LINK" />
<meta property="og:type" content="article" />
<meta property="og:title" content="IT WILL APPEAR IN BIG FONTS" />
<meta property="og:description" content="THIS WILL BE SUBTEXT" />
<meta property="og:image" content="LINK OF THE IMAGE" />
you can check out meta tags in details here
Also to verify how it will look and what actually Facebook sees through meta tags you can go to the Open Graph Object Debugger
Example shows what will be seen once you try to share https://images.google.com
Hope this is what you are looking for.
I have this meta tag for an image to pull when the link to an article is posted on FB:
`<meta property="og:image" content="http://crossfit954.com/photos/t-316.jpg"/>`
However its pulling 3 other images not including the t-316.jpg I need. Running it through
the FB debugger says Can't Download Could not retrieve data from URL.
I'm not sure what else I need to get that image to be the thumbnail that posts on FB when I paste the link, any thought?
The debugger has all errors you need!
Use a bigger image to show the thumbnail you want and add the reuqired OGP tags
<meta property="og:title" content="Example" />
<meta property="og:url" content="http://example.com" />
<meta property="og:image" content="http://example.com/example.jpg" />
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 added the tag in my page but it not fetching the image while LinkedIn sharing .
I want to know to how to customize a image while share in LinkedIn using.
http://www.linkedin.com/shareArticle?mini=true'+'&url='+articleUrl+'&title='+articleTitle+ '&summary='+articleSummary+'&source='+articleSource
please let me know what to do fetch the image while sharing on LinkedIn.
http://www.linkedin.com/cws/share?token&isFramed=false&url=http%3A%2F%2Fwpsites.net%2Fweb-design%2Fstyle-jetpacks-social-sharing-sharedaddy-buttons%2F
use this on browser its work with image.
in url that you like to share that page required image then and then only image will display on share tabs
URL that you like to share that must be live on net.
image auto fetch from given URL. please try with some valid url that have image tag
Use the metatags on your html page to indicate the crawler how to present the link, there's an image property too:
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
…
</body>
</html>
Source: https://developer.linkedin.com/docs/share-on-linkedin#methods
I am using the following script to share links with Facebook:
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script>Share on Facebook
When facebook share screen popup opens it displayes title and description. I want to provide my own title and description of share are there parameters available for this?
Create a Facebook Application at http://developers.facebook.com/
Then embed Open Graph metatags in your document that describe to the Facebook document linter which title, image, description, and URL to use when shared.
Open Graph Documentation
Open Graph Debugger
Here is an example copied from the Facebook documentation that shows the Open Graph meta tags used to describe a website.
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#
website: http://ogp.me/ns/website#">
<meta property="fb:app_id" content="YOUR_APP_ID">
<meta property="og:type" content="website">
<meta property="og:url" content="URL of this object">
<meta property="og:image" content="URL to an image">
<meta property="og:title" content="Name of blog">
<meta property="og:description" content="Description of object">
</head>
<body>
<!--a wonderful website -->
</body>
</html>
See http://developers.facebook.com/docs/share/ for more detailed view of the Facebook Share.
I think you can change the t= parameter to change the title of your share post on Facebook, not sure if you can change the description, I think the description comes from the meta Description of the page you are sharing.