How to add social share buttons on AMP pages


If you use WordPress and AMP plugin by Automattic, you can add social share buttons by modifying some files for this module.

First of all, you must find the file responsible for displaying your amp, it is located in the module‘s folder „… / wp-content / plugins / amp / templates / single.php”

Enter just above the label „<footer>” following code:


<?php $thumb_id = get_post_thumbnail_id( $post->ID );
$img = wp_get_attachment_image_src( $thumb_id, $size );
$img_src = $img[0];
?>



To make sharing links to be displayed in a nice way, add in the end of plugin’s css file („/wp-content/plugins/amp/templates/style.php”), the following code:

.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;
    }
.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;
    }


Good luck and as many shares!

Anunțuri

Ai ceva de spus?

Completează mai jos detaliile tale sau dă clic pe un icon pentru a te autentifica:

Logo WordPress.com

Comentezi folosind contul tău WordPress.com. Dezautentificare / Schimbă )

Poză Twitter

Comentezi folosind contul tău Twitter. Dezautentificare / Schimbă )

Fotografie Facebook

Comentezi folosind contul tău Facebook. Dezautentificare / Schimbă )

Fotografie Google+

Comentezi folosind contul tău Google+. Dezautentificare / Schimbă )

Conectare la %s