In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below:
How to do that?
you need to fetch that URL and read the meta tags which will give you some information such as title, description etc. If you need to fetch the image weather read the image meta tag (exists if any) or read the first available image from the web page.
It's just a post/comment like any other. Only thing you need is info about that page. You can use curl for example to fetch page's data. Info you are looking for are in head of document in meta tags.
<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon#2.png?v=fde65a5a78c6"/>
<meta name="og:title" content="Post a link and show thumbails from that link - php" />
<meta name="og:description" content="In some websites like facebook, when we post some link it show us thumbnails from that website, Like this in Picture below: How to do that?" />
Take those info and make your post/comment/whatever.
EDIT:
You don`t even need curl, you can use file_get_contents check out this answer
Related
Our support pages contains link to our videos on youtube with additional instructions. I've a requirement that when a link to our support pages are shared, the thumbnail should be displayed. i.e., link is to our website, but the thumbnail should be from our youtube video. The share can happen on social sites or email, etc. I've tried sending sharable link and something like below, but it does not work:
<img src="https://i.ytimg.com/vi/f3Synm4U4Uk/hqdefault.jpg"">
How does youtube do that? When you share their sharable link, the thumbnail and video button shows up. It is almost like the receiver(WhatsApp/telegram/etc) sends a get request to youtube to get the thumbnail upon receiving the YouTube link and display that.
You can't always control how a third-party client displays a link to your website, but a standard way of doing this is via the Open Graph protocol. This allows your website to contain metadata that robots can use to categorize your website and add metadata to links.
To tell a robot which image to show with your link, you can use the og:image tag, like so:
<meta property="og:image" content="https://c7.uihere.com/files/293/500/890/adorable-animal-cat-cute-thumb.jpg" />
Along with the thumnail you can add a lot of other metadata, such as a title and a description:
<meta property="og:title" content="Your link title" />
<meta property="og:description" content="Some description of your webpage" />
Hi All I integrated the Reddit sharing in my project.
While going to the Reddit share page image share option shown below is not coming.
I need that option along with other existing option as shown below.
Can anyone give an idea how can I fix this one.
You need to fill out meta tags, compatible with Open Graph Protocol. Read more on their website: http://ogp.me/
Sample code:
<meta property="og:image" content="URL" />
<meta property="og:image:type" content="image/jpeg" />
I'm attempting to set a custom thumbnail for when people share my website on Facebook. I followed this post here: How does Facebook Sharer select Images and other metadata when sharing my URL?
It seems this info may be outdated because I am unable to get it to work. Can anyone advise if there has been a change and how to handle this now?
I currently have this in my head but It is not working:
<head>
<meta property="og:image" content="http://placehold.it/350x150"/>
<meta property="og:image:secure_url" content="https://placehold.it/350x150" />
</head>
Figured it out. Facebook simply had not refreshed my images yet. I found this tool to help with this process:
https://developers.facebook.com/tools/debug/
I have a web page that is dynamically built and am trying to get links that are shared on Google+ to show snippets and look nice, an example snippet for article rendering and documentation can be found here:
https://developers.google.com/+/web/snippet/article-rendering
When I follow the documentation my links do not render with everything I set in google plus, they show up like this:
The head of my page looks like this:
<head>
<div id="replaceGoogle"></div>
</head>
In my javascript I have this to insert the open graph tags once generated:
//replace google
var google = '<meta property="og:type" content="article" /><meta itemprop="og:headline" content="'+ data[0].name+'" /> <meta itemprop="og:description" content="View beer on Beer Portfolio" /> <meta property="og:image" content="'+ data[0].icon +'" />';
$("#replaceGoogle").replaceWith(google);
The data is taken from json read in from an ajax call. Can I not do this dynamically?
I think that question is similar to Generating Open Graph meta tags dynamically. The main reason of your problem is that google+ and facebook will not execute your javascript so none of them will see your dynamic og tags.
Basic solution to this problem is :
create unique url for each dynamic page and save dynamic params for this url into database.
when your user try to share pages with this unique url you will find saved dynamic params
create page with og tags filled with found dynamic params
Use server side scripting (ask for details in the comments)
Trying to implement the example from here.
Facebook Share passes along the URL of
your page to our servers, which in
turn looks up certain HTML tags within
it. Those tags are used to display a
preview of the page. In order to
provide this preview, we always look
for the title of the page, a summary
of the main content and an image.
http://developers.facebook.com/docs/share
I added the share button to my site as described on the share page linked above.
<a name="fb_share"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
In the header I added the tags it requires to create the preview in the news feed.
(I used the example tags, just to see if it would work.)
<meta property="og:title" content="Smith hails 'unique' Wable legacy" />
<meta property="og:description" content="John Smith claims beautiful football
is the main legacy of Akhil Wable's decade at the club. " />
<meta property="og:image" content="http://www.onjd.com/design05/images/PH2/WableAFC205.jpg" />
</script>
When the shared button is clicked it takes me to small shared window and I hit share.
However, when I navigate to my news feed, no preview of the page shows and none of the header tag information. It just shows:
Greg McNulty http://localhost:2259/iState/Shared.aspx?id=a051fc1b-4f51-485b-a07d-0f378528974e localhost 7 minutes ago · LikeUnlike · Comment · Share
Why isn't the preview working? (I get this same result without the header tags.)
Thank You.
(FYI - I am using the share because it allows for multiple shares of the same page whenever needed, compared to the like that allows it once and then the button physically changes saying the page is already liked.)
You can test how Facebook servers see your webpage by feeding the URL to this service.
http://developers.facebook.com/tools/lint/
In order for OpenGraph to work a facebook server must be able to visit the URL without a session or cookie. This means "localhost" web pages cannot pass open graph data.