I was looking at how Facebook makes external websites previews given on a URL shared by the user. The result is not just a thumbnail but actual text, an embedded video or an image depending on the link given. For example, if you post a link from a Wikipedia article, it displays text. If you post the link of a video from Dailymotion, it embeds it.
Is there a PHP/Javascript-Ajax approach to accomplish this? Any specific library for this purpose?
If there isn't, what's the best way server-side (in PHP if possible) solution for web scraping and displaying a thumbnail preview?
Facebook does this by looking for Open Graph meta tags. In the case of embedded videos, it's looking for the og:video tag.
If there aren't OG tags, it'll make a best guess.
Related
If you share a definition page on Facebook from UrbanDictionary.com, the preview image is a screenshot of the definition itself. The same image appears on Google Images. The URL of the image is http://urbandictionary.com/render_definition.php?defid=[the same id as the post]
My question is, how do I make my website do that? I have a website with quotes and would like each quote to be indexed in Google Images as well as display as preview image when shared on social media. I use Wordpress, if that is relevant.
You should be able to use OpenGraph og:image to set an image URL for your page. You need to have a page that will render the image for you.
<meta content="<page_image_url>" property="og:image">
AFAIK, WordPress has a service called mShots that can take snapshots of your page for you. I couldn't find terms of service for it; but if you want to take that route, the following URL will generate a snapshot of http://example.com:
http://s.wordpress.com/mshots/v1/http://example.com/
I'm building an image library site. It will be mostly private but I'd like users to be able to directly use certain images in facebook posts by special URLs.
The URLs look plain enough: http://example.com/some/path/image.jpg although they're actually generated on demand by a script.
But when I paste that URL (the URL of the image, not a page with the image on) to Facebook it just comes up with the domain name; it does not thumbnail the image.
There are many questions about open graph meta tags - but that's to do with pages, and this question is about the case of a post with a direct image URL. I notice that it works for images from imgur, for example.
Is there something in the way the image is served, or something about the quality of the image itself that I can change to get facebook to work? Or is it just something like facebook knows to treat certain image sites a different way?
Thanks.
I think Facebook grabs the image using some kind of OpenGraph "Browser". So you need to serve it meta information depending on the User-Agent, which is
facebookexternalhit/1.1 (+https://www.facebook.com/externalhit_uatext.php)
for Facebook.
So when a user browser hits your URL you serve the image, when it's facebook you serve it open-graph meta-data.
The only thing, off the top of my head, that I can think of is your favicon for that page.
Visit http://www.w3.org/2005/10/howto-favicon for information on favicons in html.
I have various video hosts that I like to use on my website. I am trying to code a way to retrieve their video thumbnails.
Most of these video hosts actually have a frame of the video on display before the video starts to play. If it's possible to even get that frame as the thumbnail, that would be great. Most if not all of these video hosts use iframes for embedding.
I am looking for a fairly generic way of retrieving thumbnails for all video hosts that display some type of frame from the video once the video is embedded. If that frame can somehow be retrieved and then turned into an image that can be used that would be amazing. However, I am not exactly sure how to go about doing that.
You'd have to have the actual binary file data. If you have that access, install ffmpeg-php on your server and use this question for further direction: ffmpeg to get screenshot
Depends on the site.
For example, if you have a youtube video
http://www.youtube.com/watch?v=AC2FKbyC28k
then its thumbnail is at
http://i2.ytimg.com/vi/AC2FKbyC28k/mqdefault.jpg
I found this out by right clicking the image thumbnail, opening it in a tab and inspecting the url, so I'm sure you can do this exhaustively for every site ;)
It sounds like what you want is oEmbed, which is supported by most popular video hosting sites (Youtube, Vimeo, ...). There are several PHP oEmbed libraries, which come preconfigured with oEmbed endpoints.
What oEmbed allows you to do is to make a request to the provider (Youtube for example) with the video URL. It will return a JSON response with information about the video. Both Youtube and Vimeo return a thumbnail_url element in the JSON.
Now, I am encountering some difficulties when I have to scan or crawl a video URL link. This web page is using the Flash-based technology to embed the video and stream video.
In order to understand more clearly, this is a link example:
http://vnexpress.net/gl/the-gioi/tu-lieu/2012/11/bai-phat-bieu-thua-nhan-that-bai-cua-romney/
The above link has below content (HTML code for Flash embedded video):
<div id="flashContent" style="text-align:center;width:100%;">
<span id="FlashPlayer79237" class="Normal" align="center">Bạn cần cài Flash Player để xem được Clip này.</span>
</div>
In this above article, there is a above video. However, when I tried to scan or crawl the content, the video could not run properly (because it could not load correct video link) and only show Install Flash Player plugin words (Certainly, the real web page needs to run some Javascript script or Flash script to obtain the real video link and stream this video for users)
Therefore, how can I render Flash and Javascript script through PHP or ASP.NET or Java? How can I get the correct video link when I crawl the web page? In this case, how can I obtain the correct Flash embedded video (HTML code)?
Thank you so much.
Before I answer, I want to make a note that if you need this information to do anything shady... please don't.
Disclaimer aside, for that particular site it is relatively easy.
The flashvars param (which is probably put there by Javascript) contains a value called xmlPath, which is a url encoded path (relative to their domain name). If you grab that and decode it, you get something like:
/Service/FlashVideo/PlayListVideoPage.asp?id=79237&f=108&t=1
which points to
http://vnexpress.net/Service/FlashVideo/PlayListVideoPage.asp?id=79237&f=108&t=1
If you read that, it's an XML file which contains the URL of the actual video.
I'm not quite sure where that value is generated from. If you needed to do this fully server-side, you could use a headless browser to process it.
I am attempting to create some functionality on beta.peaksneak.com where users can basically journalize. To do this I want them to be able to add images, videos, quotes, and links to a journal entry.
I found out that you can use oEmbed to embed videos, and images/quotes are easy.
Is there a script for embedding links and auto-capturing a large image from the link to use for embed purposes? For example, on Facebook, when I paste a link into a comment, it automatically generates an image and text (probably from meta tags and the first large image it can find).
You can also try https://github.com/starfishmod/jquery-oembed-all for your oembed stuff - it has a lot of providers and is client side only if that is what you are looking for?