Extracting Information from a Link with Node.js & AngularJS

Published May 06, 2015Last updated Mar 07, 2017
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.

Output

Conclusion

I hope you guys like the article, please visit Github link to download all files for this implementation.

Discover and read more posts from Shahid Shaikh
get started
Enjoy this post?

Leave a like and comment for Shahid

1Reply
Nitin
2 years ago

Hello Shahid, Thanks. This works great for video URL. but this is not working for preview meta content for Link URL. any suggestion?

Get curated posts in your inbox

Read more posts to become a better developer