Duas das postagens mais populares deste blog são Tags META do Facebook Open Graph e Como criar um cartão do Twitter. Não estou surpreso porque nós, como criadores de conteúdo, queremos ter algum controle visual sobre como nosso site é representado e compartilhado em sites de terceiros, especialmente sites de mídia social. Recentemente, publiquei um link no Tech.pro e eles obtêm instantaneamente informações de gráficos abertos sobre a página, preenchendo previamente informações conhecidas, assim como o Facebook e o Twitter, e isso me fez pensar sobre o outro lado dos dados de gráficos abertos: a extração de dados de um site. Não é preciso ir além do open-graph-scraper Módulo JavaScript!


Após instalar o módulo do NPM ou GitHub, é fácil obter informações do Open Graph a partir de um determinado URL:



var ogs = require('open-graph-scraper');

ogs(
	{ url: 'https://davidwalsh.name' }, // Settings object first
	function(er, res) { console.log(er, res); }  // Callback 
);

/*  Result:
	
	{ data:
	   { success: 'true',
	     ogImage: 'https://davidwalsh.name/wp-content/themes/punky/images/logo.png',
	     ogTitle: 'David Walsh - JavaScript, HTML5 Consultant',
	     ogUrl: 'https://davidwalsh.name/',
	     ogSiteName: 'David Walsh Blog',
	     ogDescription: 'David Walsh Blog features tutorials about MooTools, jQuery, Dojo, JavaScript, PHP, CSS, HTML5, MySQL, and more!' },
	  success: true }
	
*/


API simples e resultado simples – adorável. É claro que toda linguagem de programação terá uma biblioteca equivalente, mas todos sabemos que o JavaScript é o rei! Bom compartilhamento a todos!

  • Animações JS responsivas e infinitamente dimensionáveis

    No final de 2012, não era fácil encontrar projetos de código aberto usando requestAnimationFrame() – Esse é o gancho que permite que o código Javascript seja sincronizado com o loop de pintura nativo de um navegador da Web. As animações que usam esse método podem ser executadas a 60 fps e proporcionar…

  • Animação CSS 3D Folding