Lets give an explanation and examples about this widget.
Github profile (you get this using this widget and link https://github.com/username)
Linkedin profile (you get this using this widget and link http://uk.linkedin.com/in/username)
and more website profiles ...
Download the files from github (or clone/fork) and in root directory of this project you can find ./demo folder inside where is index.html to run !put the link and click the button!
you dont need to change just copy: ./css/ folder with file "widget.links.meta.css" ./js/ folder with files "jsonlib.js" and "widget.links.meta.js" and if you don't use in your website jQuery also add "jquery.min.js"open index.html file in project root dir:
don't forget to add the url here
html data-url="ADD_URL_YOU_WANT_TO_EXTRACT_INFO"
look in code below
<html>
<head>
<meta charset="utf-8">
<title>Website meta tags widget</title>
<!-- begin header to copy -->
<!-- need to have own jQuery lib (any here I am using mini) -->
<script src="js/jquery.min.js"></script>
<!-- css file which need to get the shape of the box of website -->
<link rel="stylesheet" type="text/css" href="css/widget.links.meta.css">
<!-- this is lib which is called for request of link meta tags data (cross domain append) -->
<script src="js/jsonlib.js"></script>
<!-- end header to copy -->
</head>
<body>
<h1> Website meta tags widget</h1>
<!-- begin body to copy -->
<!-- this box need to put any you want in body of you website -->
<div id="widget-profile" style=""></div>
<!-- this script can be added to before </body> tag or next to this-->
<!-- i.e. data-url="https://github.com/astux7" here you can change the url of the website
which meta info you want to extract and show in box -->
<script src="js/widget.links.meta.js" id="widget-script" data-url="ADD_URL_YOU_WANT_TO_EXTRACT_INFO"></script>
<!-- end body to copy -->
</body>
</html>
Good Luck!
Mostly I strugle to get the meta tags info from client scripts (js, jQuery) of ..cross domain JS Uncaught SyntaxError: Unexpected token < I find amazing JS lib to make my life so easy! Moreover when i get the meta tags I parse them with simple regular expression and I found amazing JS simulator for testing. But regular expression is not good way cause meta tags property name.. can change possition in tag - thats the problem! the other thing would be nice to find the image via website tag! Lets keep working!