Skip to main content

How can I add a Facebook post / Email forward option to the social share message?

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

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">&times;</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

How would you tag this suggestion?
Please check your e-mail for a link to activate your account.