Extracting Information from a Link with Node.js & AngularJS
Introduction
Have you ever noticed how Facebook extracts the information from a link the minute you paste one, or how Quora extracts the title of the link once you pasted the URL? In one form or another, they both use the technology of open embedding, which is also called Oembed.
In this tutorial, I am going to demonstrate to you how to retrieve the information from a link, just as Facebook and some popular websites do it.
Our Project
To demonstrate this scenario, I have built a simple application that takes URL as an input (you can add text and other information too), and extracts information from a link to show it right away on your console.
I have used Node.js on the back-end to provide the web service, and AngularJS on the front-end to make Ajax call.
About Oembed-auto
Oembed-auto is a node-module that helps us retrieve Oembed information from a link. You can download and install this package in
your project using following command:
npm install --save oembed-auto
Implementation
Directory Structure
├── index.html
├── node_modules
├── js
│ ├── angular.js
│ ├── app.js
│ └── core.js
├── package.json
└── server.js
Package.json
{
"name": "oembed-api",
"version": "1.0.0",
"dependencies": {
"express": "~4.9.3",
"oembed-auto": "0.0.3",
"body-parser": "^1.12.3"
}
}
Switch to the project directory and install dependencies by running following command:
npm install
Here is what your index.html should look like:
<html>
<head>
<title>OEmbed</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="app.js"></script>
<script src="core.js"></script>
</head>
<body>
<div ng-app='status_app' ng-controller='status_controller'>
<textarea id="status" cols="50" rows="5" ng-model='status_box'></textarea><br><br>
<input type="button" value="submit" ng-click="add_status()"><br>
<div ng-bind-html="response_data"></div>
</div>
</body>
</html>
Here is your app.js:
var app=angular.module('status_app',[]);
And your core.js:
app.controller('status_controller',function($scope,$http,$sce){
$scope.add_status=function(){
var url=$scope.status_box;
var request = $http({
method: "post",
url: "/get_meta",
data: {
data: url
},
headers: { 'Content-Type': 'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
if(data.error) {
$scope.response_data = $sce.trustAsHtml(data.link);
} else {
$scope.response_data = $sce.trustAsHtml("<h3>"+data.title+"</h3>" + data.html);
}
});
};
});
Here is what the server file should look like:
var express = require("express");
var app =express();
var oembed=require("oembed-auto");
var bodyParser = require("body-parser");
app.use(express.static(__dirname + '/js'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/',function(req,res,next){
res.sendFile(__dirname + '/index.html');
});
app.post('/get_meta',function(req,res){
oembed(req.body.data, function(error, result) {
if (error)
res.json({"error" : true,"link" :req.body.data});
else
res.json(result);
});
});
app.listen(3000,function(){
console.log("We are listening at 3000");
});
How to Run The App
Go to project directory and run the app using
node server.js
Go to localhost:3000 to view the app. Copy paste any YouTube link and hit the submit button to see the extracted link information.
Conclusion
I hope you guys like the article, please visit Github link to download all files for this implementation.
Hello Shahid, Thanks. This works great for video URL. but this is not working for preview meta content for Link URL. any suggestion?
You are right. This article is helpful, but I don’t understand why author didn’t mention that.