Last active
January 31, 2018 19:30
-
-
Save robincornett/650fd8c3d22a832c5cc84a16c9a22e3e to your computer and use it in GitHub Desktop.
Example for adding Scriptless Social Sharing buttons to an AMP page (requires the Automattic AMP plugin).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
add_action( 'pre_amp_render_post', 'prefix_add_scriptless_amp' ); | |
/** | |
* Add Scriptless Social Sharing buttons to AMP posts | |
* (using the Automattic AMP plugin: https://wordpress.org/plugins/amp/). | |
*/ | |
function prefix_add_scriptless_amp() { | |
if ( ! function_exists( 'scriptlesssocialsharing_do_buttons' ) ) { | |
return; | |
} | |
add_filter( 'the_content', 'prefix_do_scriptless_buttons_amp', 99 ); | |
add_action( 'amp_post_template_css', 'prefix_add_scriptless_amp_style' ); | |
} | |
/** | |
* Append the Scriptless Social Sharing buttons to the content. | |
* @param $content | |
* | |
* @return string | |
*/ | |
function prefix_do_scriptless_buttons_amp( $content ) { | |
return $content . scriptlesssocialsharing_do_buttons(); | |
} | |
/** | |
* Add the Scriptless Social Sharing styles to AMP. Has to be done inline. | |
* https://github.com/Automattic/amp-wp/wiki/Customization-and-Templating | |
* | |
* @param $amp_template | |
*/ | |
function prefix_add_scriptless_amp_style( $amp_template ) { | |
$output = ''; | |
foreach ( array( 'style', 'fontawesome' ) as $file ) { | |
$response = wp_remote_get( plugins_url() . "/scriptless-social-sharing/includes/css/scriptlesssocialsharing-{$file}.css" ); | |
if ( ! is_wp_error( $response ) ) { | |
$output .= $response['body']; | |
} | |
} | |
$enqueue = new ScriptlessSocialSharingEnqueue( scriptlesssocialsharing_get_setting(), array() ); | |
$output .= $enqueue->get_inline_style(); | |
echo sanitize_text_field( $output ); | |
} |
If your server won't allow you to pull the contents of the stylesheets for the plugin, you can replace the prefix_add_scriptless_amp_style
plugin with this instead:
function prefix_add_scriptless_amp_style( $amp_template ) {
$output = '.scriptlesssocialsharing{box-sizing:border-box;margin:18px auto}.scriptlesssocialsharing-buttons{border-collapse:separate;border-spacing:3px;display:table;table-layout:fixed}.scriptlesssocialsharing-buttons a.button{border:none;border-radius:0;color:white;display:table-cell;text-align:center;text-decoration:none}.scriptlesssocialsharing-buttons a.button:hover{color:#fff}.scriptlesssocialsharing-buttons .sss-name{position:absolute;clip:rect(1px, 1px, 1px, 1px);height:1px;width:1px;border:0;overflow:hidden}.scriptlesssocialsharing-buttons .button.email{background-color:#333;background-color:rgba(51,51,51,0.8)}.scriptlesssocialsharing-buttons .button.email:hover{background-color:#333}.scriptlesssocialsharing-buttons .button.twitter{background-color:#55acee;background-color:rgba(85,172,238,0.8)}.scriptlesssocialsharing-buttons .button.twitter:hover{background-color:#55acee}.scriptlesssocialsharing-buttons .button.facebook{background-color:#3b5998;background-color:rgba(59,89,152,0.8)}.scriptlesssocialsharing-buttons .button.facebook:hover{background-color:#3b5998}.scriptlesssocialsharing-buttons .button.linkedin{background-color:#0077b5;background-color:rgba(0,119,181,0.8)}.scriptlesssocialsharing-buttons .button.linkedin:hover{background-color:#0077b5}.scriptlesssocialsharing-buttons .button.pinterest{background-color:#bd081c;background-color:rgba(189,8,28,0.8)}.scriptlesssocialsharing-buttons .button.pinterest:hover{background-color:#bd081c}.scriptlesssocialsharing-buttons .button.google{background-color:#dc4e41;background-color:rgba(220,78,65,0.8)}.scriptlesssocialsharing-buttons .button.google:hover{background-color:#dc4e41}.scriptlesssocialsharing-buttons .button.reddit{background-color:#ff4500;background-color:rgba(255,69,0,0.8)}.scriptlesssocialsharing-buttons .button.reddit:hover{background-color:#ff4500}';
$output .= '.scriptlesssocialsharing-buttons .button .sss-name{margin-left:8px}.scriptlesssocialsharing-buttons .button:before{display:inline-block;font:normal normal normal 20px FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);vertical-align:middle}.scriptlesssocialsharing-buttons .twitter:before{content:\'\f099\'}.scriptlesssocialsharing-buttons .facebook:before{content:\'\f09a\'}.scriptlesssocialsharing-buttons .google:before{content:\'\f0d5\'}.scriptlesssocialsharing-buttons .pinterest:before{content:\'\f0d2\'}.scriptlesssocialsharing-buttons .linkedin:before{content:\'\f0e1\'}.scriptlesssocialsharing-buttons .email:before{content:\'\f0e0\'}.scriptlesssocialsharing-buttons .reddit:before{content:\'\f281\'}';
$enqueue = new ScriptlessSocialSharingEnqueue( scriptlesssocialsharing_get_setting(), array() );
$output .= $enqueue->get_inline_style();
echo sanitize_text_field( $output );
}
This is the CSS copied/pasted directly from the plugin's two stylesheets.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
To show buttons before the content, change line 23 to:
To show buttons both before and after the content, change it to: