Agregar Facebook Open Graph y Twitter Cards en tu sitio WordPress sin Plugins

Agregar Facebook Open Graph y Twitter Cards en tu sitio WordPress es algo que sin duda tendras que hacer tarde o temprano, como lo he comentado el uso de plugins no me es del todo de mi agrado y por lo tanto les voy a dejar una forma de agregar Facebook Open Graph y Twitter Cards sin el uso de ningún extra.

Todo lo que tenemos que haces es abrir nuestro el administrador y editar nuestro archivo functions.php de nuestro tema y realizar los cambios en necesarios para su sitio les puedo listar los siguientes.

• og:site_name:
• twitter:card
• twitter:creator
• twitter:site

function insertar_opengraph_doctype( $output ) {
        return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';


    }
add_filter('language_attributes', 'insertar_opengraph_doctype');

//Lets add Open Graph Meta Info

function insertar_meta() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
 
if (is_single() || is_page() ) : if (have_posts() ) : while (have_posts() ) : the_post(); 
        echo '<meta property="og:description" content="'.get_the_excerpt().'">';
        echo '<meta name="twitter:description" content="'.get_the_excerpt().'" />';
        endwhile; endif; elseif (is_home() ): 
        echo '<meta property="og:description" content="Sitio web personal donde trato temas de tecnologia en general y pragramación principalmente php, mysql,css y jquery ">';
        endif;
        echo '<meta property="fb:admins" content="532138163535147"/>';

        echo '<meta property="og:title" content="' .get_the_title(). '"/> ';

        echo '<meta property="og:type" content="article"/> ';

        echo '<meta property="og:url" content="' . get_permalink() . '"/> ';

        echo '<meta property="og:site_name" content="Emanuel Paxtian"/> ';

        echo '<meta name="twitter:card" content="summary_large_image" />';

echo '<meta name="twitter:title" content="'.get_the_title().'" />';
echo '<meta name="twitter:site" content="@psolucionesnet" />';

echo '<meta name="twitter:creator" content="@psolucionesnet" />';
       

    if(!has_post_thumbnail( $post->ID )) { 
        $default_image="https://emanuelpaxtian.com/avatar.jpg";
        echo '<meta property="og:image" content="' . $default_image . '"/> ';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );
        echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/> ';
        echo '<meta name="twitter:image" content="' . esc_attr( $thumbnail_src[0] ). '" />';
    }
    echo "
";
}
add_action( 'wp_head', 'insertar_meta', 5 );

Espero te haya gustado este articulo y espero que lo usen y lo modifiquen ya que es un ejemplo básico pero se puede mejorar.

Articulos Relacionados

Redireccionar Blogspot Blogger a dominio propio

Poner pagina web en mantenimiento con htaccess

Como hacer que la imagen de fondo se adapte al tamaño de la pantalla con CSS3

Mi nombre es Emanuel Paxtian, soy Ingeniero en sistemas computacionales, antes de conocer una computadora quería ser ingeniero civil pero eso cambio cuando use una computadora por primera vez.
Me decidí a crear este blog por que para mi sirve como una biblioteca y aparte ayudo a otros que tienen problemas al igual que yo con algunos temas.
Me gusta programar y encontrar nuevos retos día con día me considero autodidacta mi mayor maestro ha sido sin duda el internet ya que aquí puedes encontrar casi todo.