How to add social share buttons on AMP pages

Adds:

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];
?>
<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>


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!

Leave a Reply