Subscribe & Social Share Buttons

index.html

<div class="container">
  <button id="sub" class="btn btn-warning btn-lg" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Subscribe Now! <i id="caret" class="fa fa-caret-down"></i></button>
  <a class="btn btn-primary btn-lg" href="javascript:fbShare('http://justincron.com', 'Fb Share', 'Facebook share popup', '', 520, 350)"><i class="fa fa-facebook fa-lg"></i> Share on Facebook</a>
  <a class="btn btn-info btn-lg tweet" title="Justin Cron" href="http://justincron.com" target="_blank"><i class="fa fa-twitter fa-lg"></i> Share on Twitter</a>
  
  
  
 <div class="collapse in" id="collapseExample">
   <div class="well well-sub">
    <div class="row">
     <div class="col-xs-12 col-sm-6">
        <p class="lead">First one is free... so are the rest. Daily.</p>
       <form class="form-inline">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
        <button type="submit" class="btn btn-success">I'm in!</button>
      </form>
       <small class="text-muted">By submitting above you agree to our privacy policy.</small>
     </div>
     <div class="col-xs-12 col-sm-6">
       <p class="lead">Like us on <span class="text-primary">Facebook</span></p>
       <div class="alert alert-info">
       <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.justincron.com&amp;width&amp;layout=button_count&amp;action=like&amp;show_faces=true&amp;share=false&amp;height=21&amp;appId=459463244209466" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowTransparency="true"></iframe>
       </div>
    </div>
   </div>
  </div>
</div>
  
</div>

script.js

// Animate caret on subscribe button
$('.collapse').on('show.bs.collapse', function(){
      var i = $(this).parent().find('#caret')
      i.toggleClass('fa-caret-down fa-caret-up');
    }).on('hide.bs.collapse', function(){
      var i = $(this).parent().find('#caret')
      i.toggleClass('fa-caret-up fa-caret-down');
    });



// Facebook Share button popup
    function fbShare(url, title, descr, image, winWidth, winHeight) {
        var winTop = (screen.height / 2) - (winHeight / 2);
        var winLeft = (screen.width / 2) - (winWidth / 2);
        window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + title + '&p[summary]=' + descr + '&p[url]=' + url + '&p[images][0]=' + image, 'sharer', 'top=' + winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
    }


// Twitter share button popup
$('a.tweet').click(function(e){
  //We tell our browser not to follow that link
  e.preventDefault();
  //We get the URL of the link
  var loc = $(this).attr('href');
  //We get the title of the link
  var title  = escape($(this).attr('title'));
  //We trigger a new window with the Twitter dialog, in the middle of the page
  window.open('http://twitter.com/share?url=' + loc + '&text=' + title + '&', 'twitterwindow', 'height=450, width=550, top='+($(window).height()/2 - 225) +', left='+$(window).width()/2 +', toolbar=0, location=0, menubar=0, directories=0, scrollbars=0');
});

style.css

body {
  margin:20px;
}
.container {
  width:870px;
}
.btn {
  border-radius:0;
}
.well-sub {
  background-color:#fff;
  border-radius:0;
  border: solid 2px #F0AD4E;
}

Subscribe-&-Social-Share-Buttons.markdown

Subscribe & Social Share Buttons

Subscribe and Social Sharing button created with Twitter Bootstrap.

A Pen by Justin Cron on CodePen.

License.