5
When making a comment on Facebook, for example, and adding a link to the video from youtube, Vimeo and others, notice that the video is automatically embed.
The same is true when we insert a link to an image or a website.
Note that in the comment is a picture of the website or video.
How this type of comment is done using php?
2
Here I will outline in a simplified way how I imagine the approach used.
This type of control uses a combination of different technologies, both client and server-side.
In the case of videos, it is possible that the process is done only with front-end technology.
When pasting a link, the browser performs a "collage" event. In this event a Javascript code can read the contents of this text and search "youtube.com","Vimeo.com", and, once the link is valid, create an Embedded player.
In the case of images, note that FB provides a list of the site images. Similarly to videos, when a user pastes a text, a Javascript code looks for "http://..." and " www." in the pasted text. If it is a valid link, the JS triggers a request to the server, so that it makes a Crawl on the link and returns: the title (looking for tags <h2>, <h3> or classes as .title, #title, etc.), the introduction (searching for tags <p>) and the page images (looking for tags <img>).
Note that this request is not instantaneous, it takes a few seconds for the server to return all information - and if the page is poorly structured, it will not always be possible to identify the title and introduction).
More information:
Detect pasted text
Perform Crawl on web pages with PHP
2
I have a plugin Wordpress that does something similar using the tags Open Graph inserted into many web pages today.
Example of a video on Youtube:
<meta property="og:site_name" content="YouTube">
<meta property="og:url" content="http://www.youtube.com/watch?v=aZMbTFNp4wI">
<meta property="og:title" content="No Woman, No Drive">
<meta property="og:image" content="https://i1.ytimg.com/vi/aZMbTFNp4wI/maxresdefault.jpg">
<meta property="og:description" content="Download directly from us: http://ldr.fm/tX6XP Download from iTunes: https://itun.es/i6F668z Follow: Hisham Fageeh: http://Twitter.com/HishamFageeh Fahad Alb...">
<meta property="og:type" content="video">
<meta property="og:video" content="http://www.youtube.com/v/aZMbTFNp4wI?version=3&autohide=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="1920">
<meta property="og:video:height" content="1080">
In addition to the OG, there are also the Twitter Cards and other social Meta Data :
<meta name="twitter:url" content="http://www.youtube.com/watch?v=aZMbTFNp4wI">
<meta property="al:android:url" content="http://www.youtube.com/watch?v=aZMbTFNp4wI">
<meta property="al:ios:app_name" content="YouTube">
The process in the plugin is:
<input> text where the user pastes the link,The following code is part of the function that AJAX invokes and that processes the results of the query to the URL. Wordpress does the REQUEST HTTP using the Curl extension or PHP Streams (depending on the case). But, anyway, I just need to call the function wp_remote_get, it returns the result to me and I process the $response['body]`:
if ( $data = wp_remote_retrieve_body( $response ) )
{
$rmetas = array(); // Array for JSON
libxml_use_internal_errors(true);
$doc = new DomDocument();
$doc->loadHTML($data);
$xpath = new DOMXPath($doc);
$query = '//*/meta[starts-with(@property, \'og:\')]';
$ogs = $xpath->query( $query );
foreach ( $ogs as $meta )
{
$property = $meta->getAttribute('property');
$content = $meta->getAttribute('content');
$rmetas[$property] = $content;
}
if( empty( $rmetas ) )
wp_send_json_error( array( 'error' => __( 'No OG data in the page.' ) ) );
/* Meta Data for the post */
if( $autor = $this->xpath_query( $xpath, 'meta', 'name', 'author', 'content' ) )
$rmetas['author'] = $autor;
if( $date = $this->xpath_query( $xpath, 'meta', 'name', 'dc.date', 'content' ) )
$rmetas['date'] = $date;
if( $url = $this->xpath_query( $xpath, 'link', 'rel', 'shorturl', 'href' ) )
$rmetas['shorturl'] = $url;
if( $aurl = $this->xpath_query( $xpath, 'meta', 'property', "article:author", 'content' ) )
$rmetas['authorurl'] = $aurl;
$twits = $xpath->query('//*/meta[starts-with(@property, \'twitter:\')]');
foreach ( $twits as $meta )
{
$property = $meta->getAttribute('property');
$content = $meta->getAttribute('value');
if( 'twitter:site' == $property )
$rmetas['twitter'] = $content;
}
wp_send_json_success( $rmetas ); // Esta função inclui um die(); o erro abaixo não roda
}
wp_send_json_error( array( 'error' => __( 'Undefined error.' ) ) );
As darlings of Domxpath I did with help of Stack Overflow, simply searching inside this advanced search until I find something suitable.
If the meta information is not present on the page, one could make a Scrape traditional, but I never got to that point. But I see interesting things here (----->) in the column Related:
I like the answer :). However, what prevents the user from linking to a malicious site? If it posts a link to a malicious site, my site can be indexed by google as a possible malicious site as well, because it contains links to malicious websites?
But that’s a problem general of the comment system, no? Regardless of image pulling or not, moderation of spam and abuse is another problem... And how is your comment system? At FB, if I’m not mistaken, there is a input unique to the URL you want to post along with the comment, that’s not it?
On facebook if you put the url in the field for the comment, it identifies whether it is an image, video, article, etc... and puts Thumb in the post. I never tried to insert a malicious link to see what happened. :)
Browser other questions tagged php
You are not signed in. Login or sign up in order to post.
Needs to be in PHP or can be in Javascript?
– Kazzkiq
@Kazzkiq has to be recorded in the database, I think only with Javascript will not give, it is necessary PHP.
– Filipe Moraes