Right now there's only a Tweet option in the default social share prompt supporters see after taking action on my NationBuilder website. It'd be great if there were also button to share on Facebook and/or via Email.
Official response from Alex Stevens
If you're using one of our stock themes, you'll first need to create a custom theme, so that you can edit the Flash + Share template. Once that's done, head to Theme > Current custom theme and open up the _flash_share.html
file. From there, you can replace all the code in that template with one of the following snippets, based on a few of our stock themes.
Publish
<div class="flash-share"> <div class="share"> <button class="flash-close">×</button> <h3 class="headline">{{ flash.message }}</h3> Please Share: <div class="row-fluid padbottom"> <div class="span4"> <a class="button center" style="display:block" href="mailto:?subject={{ flash.page.headline }}%20on%20{{ site.name }}&body={{ flash.page.default_face_tweet_text }}%0A%0A{{ flash.page.full_url_with_recruiter }}" target="_blank"><i class="fa fa-envelope"></i> Email</a> </div> <div class="span4"> <a class="button center" style="background:#3b5998;display:block" href="http://www.facebook.com/share.php?u={{ flash.page.full_url_with_recruiter | urlencode }}" target="_blank"><i class="fa fa-facebook"></i> Facebook</a> </div> <div class="span4"> <a class="button center" style="background:#00aced;display:block" href="{{ flash.page.tweet_url }}" target="_blank"><i class="fa fa-twitter"></i> Twitter</a> </div> </div> </div> </div>
Action
<div id="flashModal" class="flash-share modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="share-left"> <img src="share.png"> <h2 class="headline">{{ flash.message }}</h2> Please share: </div> <div class="share-right"> <div class="row"> <div class="col-md-12"> <a class="submit-button btn btn-block btn-default margintopmore used" href="mailto:?subject={{ flash.page.headline }}%20on%20{{ site.name }}&body={{ flash.page.default_face_tweet_text }}%0A%0A{{ flash.page.full_url_with_recruiter }}" target="_blank"><i class="icon-user"></i> Email</a> </div> </div> <div class="row"> <div class="col-md-12"> <a class="submit-button btn btn-block btn-default margintopmore used facebook" href="http://www.facebook.com/share.php?u={{ flash.page.full_url_with_recruiter | urlencode }}" target="_blank"><i class="icon-facebook"></i> Facebook</a> </div> </div> <div class="row"> <div class="col-md-12"> <a class="submit-button btn btn-block btn-default margintopmore used twitter" href="{{ flash.page.tweet_url }}" target="_blank"><i class="icon-twitter"></i> Twitter</a> </div> </div> <div class="row margintopless"> <div class="col-xs-12"> <button type="button" class="h6 close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">Close</span></button> </div> </div> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <script type="text/javascript"> $(window).load(function(){ $('#flashModal').modal('show'); }); </script>
Bootstrap
<div class="flash-share panel panel-default"> <div class="panel-heading share"><h3 class="panel-title">{{ flash.message }}</h3></div> <div class="panel-body"> <p>Please share:</p> <div class="row-fluid"> <div class="col-sm-4 padtop"> <a class="btn btn-block btn-primary" href="mailto:?subject={{ flash.page.headline }}%20on%20{{ site.name }}&body={{ flash.page.default_face_tweet_text }}%0A%0A{{ flash.page.full_url_with_recruiter }}" target="_blank">Email</a> </div> <div class="col-sm-4 padtop"> <a class="btn btn-block btn-primary" style="background:#3b5998" href="http://www.facebook.com/share.php?u={{ flash.page.full_url_with_recruiter | urlencode }}" target="_blank">Facebook</a> </div> <div class="col-sm-4 padtop"> <a class="btn btn-block btn-info" style="background:#00aced" href="{{ flash.page.tweet_url }}" target="_blank">Twitter</a> </div> </div> <div class="row-fluid"> <div class="col-sm-12"> <a class="flash-close padtop" style="float:right;"><small>No thanks</small></a> </div> </div> </div> <!-- /.panel-heading share --> </div> <!-- /.flash-share panel panel-primary -->
Share this post
Showing 4 reactions
Sign in with
Certified Architect
Certified Architect