"botão" com imagem e compartilhar link

krvaM · 18/08/2017

hola gente, queria saber como hago para hacer lo siguiente

estoy probando una cosa en wordpress, y necesito saber que codigo usar para que en esta imagen cuando clickean se abra la ventana popup de facebook y comparta el link en el que estan actualmente en mi pagina

este es el codigo que tengo por ahora

PHP:

echo '<img src="http://i.imgur.com/1JIAvpS.png">';

marjuanm · 18/08/2017

necesitas varias cosas:

poner el ancla a esa imagen para que al presionarla te abra el link de facebook (o el que quieras)
especificar el target de ese link
si va a abrir un popup necesitas definir el código javascript para abrir ese popup primero y luego que el target apunte a ese popup

Federico99 · 18/08/2017

Un ejemplo sencillo...

HTML:

Inserir CODE, HTML ou PHP:

 <a href="http://www.facebook.com/sharer.php?u=TU_URL" onclick="link_popup(this); return false" target="_blank" title="Compartir en Facebook"><img src="http://i.imgur.com/1JIAvpS.png" /></a>

JS:

Inserir CODE, HTML ou PHP:

function link_popup(enlace) {
      features='width=400, height=400,status=0, menubar=0,toolbar=0, scrollbars=0';
      window.open(enlace.getAttribute('href'), '', features);
}

Son Lux · 18/08/2017

A ver si te sirve esto:

PHP:

echo: '<a target="_blank"  href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://i.imgur.com/1JIAvpS.png"></a>

Así deberías de abrir el enlace en otra ventana :encouragement: intenta imprimir eso en tu sitio y si funciona me dices

krvaM · 18/08/2017

Gracias gente, creo que los codigos que comparten estan bien, pero el problema es que es un archivo php, y cuando puse los codigos que me pasaron, actualice la web y me tiro error 500, y cuando los quito funciona bien.. debe ser la sintaxis o algo de eso que jode

Federico99 · 18/08/2017

krvaM disse:
Gracias gente, creo que los codigos que comparten estan bien, pero el problema es que es un archivo php, y cuando puse los codigos que me pasaron, actualice la web y me tiro error 500, y cuando los quito funciona bien.. debe ser la sintaxis o algo de eso que jode

Hace una cosa, probá poniendo primero el código JS. Debe ir justo antes del cierre del body, es decir, ponelo antes de </body>

Dsp probá si anda la página, si va bien avisame y pasamos al siguiente paso.

Son Lux · 18/08/2017

krvaM disse:
Gracias gente, creo que los codigos que comparten estan bien, pero el problema es que es un archivo php, y cuando puse los codigos que me pasaron, actualice la web y me tiro error 500, y cuando los quito funciona bien.. debe ser la sintaxis o algo de eso que jode

Ups, cometí un error con una comilla simple :sorrow: te paso el código correcto:

PHP:

echo: '<a target="_blank"  href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://i.imgur.com/1JIAvpS.png"></a>';

krvaM · 18/08/2017

Son Lux disse:
Ups, cometí un error con una comilla simple :sorrow: te paso el código correcto:

PHP:

echo: '<a rel="nofollow" target="_blank" href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"><img src="http://i.imgur.com/1JIAvpS.png"></a>';

Perfecto, sabes que al echo: le saque los : y funciono.. ahora hay otro problema, cuando hago click quiere abrir esta pagina "https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"

Son Lux · 18/08/2017

krvaM disse:
Perfecto, sabes que al echo: le saque los : y funciono.. ahora hay otro problema, cuando hago click quiere abrir esta pagina "https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>"

Ubica el archivo fuctions.php de tu theme y coloca esto hasta el último:

PHP:

function the_permalink( $post = 0 ) {
    /**
     * Filters the display of the permalink for the current post.
     *
     * @since 1.5.0
     * @since 4.4.0 Added the `$post` parameter.
     *
     * @param string      $permalink The permalink for the current post.
     * @param int|WP_Post $post      Post ID, WP_Post object, or 0. Default 0.
     */
    echo esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) );
}

De esta manera funcionará la url :encouragement:

krvaM · 18/08/2017

Son Lux disse:

Ubica el archivo fuctions.php de tu theme y coloca esto hasta el último:

PHP:

function the_permalink( $post = 0 ) {
    /**
     * Filters the display of the permalink for the current post.
     *
     * @since 1.5.0
     * @since 4.4.0 Added the `$post` parameter.
     *
     * @param string      $permalink The permalink for the current post.
     * @param int|WP_Post $post      Post ID, WP_Post object, or 0. Default 0.
     */
    echo esc_url( apply_filters( 'the_permalink', get_permalink( $post ), $post ) );
}

De esta manera funcionará la url :encouragement:

Nop, lo coloco y tira error 500 😕

Son Lux · 18/08/2017

krvaM disse:
Nop, lo coloco y tira error 500 😕

mmm, que raro, podrías compartir el archivo que contiene la info que nos compartiste al inicio del post? así te puedo ayudar mejor :encouragement:

krvaM · 18/08/2017

Son Lux disse:
mmm, que raro, podrías compartir el archivo que contiene la info que nos compartiste al inicio del post? así te puedo ayudar mejor :encouragement:

PHP:

get_header(); ?>

	<div id="primary" class="content-area">


		<main id="main" class="site-main" role="main">

		<?php

echo '<a target="_blank"  href="https://www.facebook.com/sharer.php?u=<?php post_permalink(); ?>"><img src="http://i.imgur.com/1JIAvpS.png"></a>';
		while ( have_posts() ) : the_post();


			get_template_part( 'template-parts/content', 'single' );



			if ( true == get_theme_mod( 'relatedposts_sw', true ) ) :
				get_template_part( 'template-parts/related-posts' );
			endif;

			if ( true == get_theme_mod( 'postsnav_sw', true ) ) :
				the_post_navigation( array(
					'next_text' => '<span class="meta-nav" aria-hidden="true">' . esc_html__( 'Next Article', 'hitmag' ) . '</span> ' .
						'<span class="post-title">%title</span>',
					'prev_text' => '<span class="meta-nav" aria-hidden="true">' . esc_html__( 'Previous Article', 'hitmag' ) . '</span> ' .
						'<span class="post-title">%title</span>',
				) );
			endif;

			if ( true == get_theme_mod( 'authorbox_sw', true) ) :
				get_template_part( 'template-parts/authorbox' );
			endif;

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) :
				comments_template();
			endif;

		endwhile; // End of the loop.
		?>

		</main><!-- #main -->
	</div><!-- #primary -->

<?php
get_sidebar();
get_footer();

"botão" com imagem e compartilhar link

krvaM

marjuanm

Federico99

Son Lux

krvaM

Federico99

Son Lux

krvaM

Son Lux

krvaM

Son Lux

krvaM

Tópicos similares