QR Consultor

  • Bio
  • Blog
  • Contacto
Inicio » Code Snippets » Embed GitHub Gists

Embed GitHub Gists

Por Cristhian Martínez Ochoa

De esta manera podemos insertar Gists de GitHub en nuestro blog sin necesidad de usar Javascript y haciéndolo mas amigable para los buscadores.

Embedding GitHub gists SEO friendly – WordPress

<?php
// Embed gist without JavaScript in WordPress
wp_embed_register_handler( 'gist', '/https?:\/\/gist\.github\.com\/([a-z0-9\/]+)([\?\#]file[=-].*)?/i', 'qr_embed_gist' );
function qr_embed_gist( $matches, $attr, $url, $rawattr ) {
if(empty($matches[1])){$matches[1]=null;}
if(empty($matches[2])){$matches[2]=null;} // Query single file
$file = wp_remote_get( esc_url_raw( 'https://gist.github.com/' . esc_attr($matches[1]) . '.json' ) );
if ( !is_wp_error($file) && 200 == $file['response']['code'] ) {
$giton = $file['body'];
$giton = json_decode($giton, true);
$embed = '<pre><code class="gist-embed">' . preg_replace( "/^\s+|\n|\r|\s+$/m", "", $giton["div"] ) . '</code></pre>';
wp_enqueue_style( 'gist', esc_url_raw( $giton["stylesheet"] ) );
}else{
$embed = 'Error: ' . $file['response']['code'] . ' - Invalid Gist URL';
}
return apply_filters( 'embed_gist', $embed, $matches, $attr, $url, $rawattr );
}
view rawfunctions.phphosted with ❤ by GitHub
<?php
// Another way to Embed gist with <noscript> as fallback - WordPress
wp_embed_register_handler( 'gist', '/https?:\/\/gist\.github\.com\/([a-z0-9\/]+)([\?\#]file[=-].*)?/i', 'qr_embed_gist' );
function qr_embed_gist( $matches, $attr, $url, $rawattr ) {
if(empty($matches[1])){$matches[1]=null;}
if(empty($matches[2])){$matches[2]=null;} // Query single file
$urlx = esc_url_raw( 'https://gist.github.com/' . esc_attr($matches[1]) );
$file = wp_remote_get( $urlx . '.json' );
if ( !is_wp_error($file) && 200 == $file['response']['code'] ) {
$giton = $file['body'];
$giton = json_decode($giton, true);
$giton = strip_tags($giton["div"], '<a>');
$embed = '<script src="' . $urlx . '.js' . '"></script>';
$embed .= '<noscript><pre><code class="gist-embed">' . preg_replace( "/ |\s+$/m", "", $giton ) . '</code></pre></noscript>';
}else{
$embed = 'Error: ' . $file['response']['code'] . ' - Invalid Gist URL';
}
return apply_filters( 'embed_gist', $embed, $matches, $attr, $url, $rawattr );
}
view rawfunctions2.phphosted with ❤ by GitHub
Ejemplo:

En el código anterior se muestran dos métodos distintos, el primero inserta el HTML de manera directa en la página y el segundo utiliza el método tradicional con Javascript, pero con <noscript> como respaldo.

Tags: SEO, WordPress

Genesis Framework for WordPress

Blog & Tutoriales

  • Moprosoft (2)
  • Search Engine Optimization (4)
  • Tutoriales (2)
    • Ubuntu (Linux WEB Server) (1)
    • WordPress (1)
Namecheap Domains

Cristhian Martínez Ochoa

Consultor de TI y mejora de procesos con más de 10 años de experiencia en la industria de desarrollo de software en México... [Leer más]

Currículum: Ver | Descargar

¿Que puedo hacer por ti?

  • Mejora de Procesos
  • Consultoría Web

Siempre son bienvenidas nuevas propuestas de colaboración.

Contáctame

  • Facebook
  • GitHub
  • Instagram
  • LinkedIn
  • Twitter

cristhian@qrokes.com
+52 33.1344.3771

¡Deja un mensaje aquí!

© unCopyright 2012-2019 QROkes · Powered by: WordPress · Genesis Framework · Webinoly
Condiciones de Uso | Política de Privacidad | Aviso Legal