Cum adaugi butoanele de partajare în paginile AMP?

În cazul în care folosiți WordPress și modulul AMP oferit de Automattic, puteți să adăugați butoane pentru a distribui articolul modificând câteva fișiere ale acestui modul.

Mai întâi de toate trebuie să găsiți fișierul responsabil cu afișarea paginii AMP, acesta este localizat în folderul modulului aici: “…/wp-content/plugins/amp/templates/single.php”

Introduceți chiar deasupra etichetei “<footer>” următorul cod:


<?php $thumb_id = get_post_thumbnail_id( $post->ID );
$img = wp_get_attachment_image_src( $thumb_id, $size );
$img_src = $img[0];
?>
<div class="amp-share">
<h3>Did you like it?</h3><br/>
<span>Share on:</span>
<a href="https://twitter.com/share?text=<?php echo wp_kses_data( $this->get( 'post_title' ) );?>&amp;url=<?php echo urlencode(get_permalink($this->ID)); ?>" target="_blank" class="as-twitter" title="Tweet">Twitter</a>
<a target="_blank" href="http://www.facebook.com/sharer.php?u=<?php echo urlencode(get_permalink($this->ID)); ?>" class="as-facebook" title="Share on Facebook">Facebook</a>
<a target="_blank" href="https://plus.google.com/share?url=<?php echo urlencode(get_permalink($this->ID)); ?>" class="as-gplus" title="Share on G+" rel="nofollow">Google Plus</a>
<a href="http://www.pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($this->ID)); ?>&media=<?php echo $img_src; ?>&description=<?php echo wp_kses_data( $this->get( 'post_title' ) );?>" class="as-pinterest" target="_blank" rel="nofollow">Pinterest</a>
</div>


Pentru a face ca legăturile de partajare să fie afișate într-un mod mai plăcut, adăugați în fișierul css al modulului(“/wp-content/plugins/amp/templates/style.php”), chiar la sfârșitul acestuia , următorul cod:



.amp-share{
        margin: 36px 16px;
padding:8px 16px;
border:1px solid #aaa;
border-radius:8px;
background-color:#fefefe;
 
    }
    .amp-share a {
        margin:10px 5px;
        line-height: 1;
        color:#fff;
        padding:3px 6px;
        text-decoration:none;
        font-family: Verdana, Geneva, "Bitstream Vera Sans", sans-serif;
 
        /* border-radius: 3px; */
        /* box-shadow: 1px 1px 3px #888; */
 
    }
    .amp-share a:hover{
        color:#fff;
        text-decoration:none;
    }
   
    .amp-share .as-facebook {
        background-color: #3B5998;
    }
    .amp-share .as-twitter {
        background-color:#00aced;
    }
    .amp-share .as-gplus {
        background-color:#dd4b39;
    }
    .amp-share .as-pinterest {
        background-color:#cb2027;
    }


Multă baftă și la cât mai multe distribuiri!

Leave a Reply