Twitter Cards Meta Tags

in Dev

Reading Twitter Meta and Open Graph Tags with Jquery and PHP

Below example shows how you can parse and render Twitter Meta Tags (also known as Twitter Cards) or Open Graph Meta tags using jQuery (Ajax mainly) and a PHP proxy using
file_get_contents() Read more Here.

Twitter Meta Tags:

Twitter Cards Meta Tags

Twitter Cards Meta Tags

Above are three main meta tags: description, image and title. You can read more about them at Twitter Dev.

Open Graph Meta Tags:

A similar set of meta tags apply for Open Graph as well which are mainly:

open graph metaRead more here.

A few things to keep in mind:

  • Some web servers do not allow file_get_contents() due to security concerns.
  • You will need a PHP server (either local or hosted)

Lets begin with the PHP code which I will be naming “getUrl.php

<?php

header("Access-Control-Allow-Origin: *");
header("Content-Type: text/plain");
header("User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36");

if(isset($_GET['url']) && !empty($_GET['url'])) {
    $url = $_GET['url'];
	$html = file_get_contents($url);
	echo $html;
}
else{
	echo "Invalid URL";
}

?>

The HTML (Note: I am including Jquery.js file and Bootstrap.css in the final demo)

 

<body>
	<div class="container-fluid">
	<div class="row">
		<div class="col-md-6">
			<h3>Meta Tags Reader</h3>
			<h4>Input Website URL</h4>
			<input type="text" class="form-control" id="url" name="url" autocomplete="on"></input><br>
			<button class="btn btn-primary" type="submit" id="go">Fetch Meta Content</button>
			<br/><br/>
				<div class="panel panel-default hide" id="panel">
				  <div class="panel-body">
				   	<h2 id="title"></h2>
					<h4 id="description"></h4>
					<img id="image" src="#" class="hide img-responsive" />
				  </div>
				</div>
			</div>
		</div>
	  </div>
</body>

The Javascript

<script type="text/javascript">

	$("#go").click(function(e) {
  		e.preventDefault();
  		getSource();
	});

	//Get Raw Html
	function getSource(){
		var sourceUrl = $("#url").val();

		$.ajax({
    		url: "http://siddharthakumar.com/web/demos/getUrl.php?url="+sourceUrl,
    		type: 'GET',
    			success: function(data) {
					//Store all meta tags in an array
    				var metaArray = $(data).filter("meta")

    				//Filtering the meta tags we are interested in.
        			var title = $(data).filter("meta[name='twitter:title']").attr("content");
        			var image = $(data).filter("meta[name='twitter:image']").attr("content");
        			var description = $(data).filter("meta[name='twitter:description']").attr("content");

        			if(title == undefined){
        				//Look for og:title instead
        				title = $(data).filter("meta[property='og:title']").attr("content");
        			}
        			if(description == undefined){
        				//Look for og:title instead
        				description = $(data).filter("meta[property='og:description']").attr("content");
        			}

        			if(image == undefined){
        				image = $(data).filter("meta[name='twitter:image:src']").attr("content");
        				if(image == undefined){
        					//Try opengraph
        					image = $(data).filter("meta[property='og:image']").attr("content");
        				}
        			}

        			$("#title").html(title);
        			$("#description").html(description);
        			$("#image").attr('src',image);
        			$("#image").removeClass("hide");
        			$("#panel").removeClass("hide");
    			},
    			error: function(XMLHttpRequest,textStatus){
    				alert("An error occured");
    			}
		});

	};
</script>

Sample Output:

sample meta tags

DEMO

All images used in this post belong to the original sourced articles mentioned above.

  • John Francis

    Similar to Twitter is there for Facebook post ?