Adjust widgets

assets/scss/bloggy.scss

@@ -19,6 +19,7 @@
 @import 'widgets/slack-box';
 @import 'widgets/ghost-love';
 @import 'widgets/twitter-box';
+@import 'widgets/facebook-box';
 @import 'widgets/popular-posts';
 @import 'widgets/blog-subscribe';
 @import 'widgets/subscribe-banner';

assets/scss/widgets/facebook-box.scss

@@ -1,12 +1,6 @@
 .facebook-box {
-  min-height: 280px;
   padding: 3px 0 0;
 
-  text-align: center;
-
-  border: #eee 1px solid;
-  border-top: $blue 3px solid;
-
   @include breakpoint(1000px) {
     display: none;
   }

assets/scss/widgets/twitter-box.scss

@@ -25,10 +25,10 @@
   text-align: center;
 
   border-radius: 100%;
-  background: $lightgrey;
+  background: $white;
 
   img {
-    width: 90px;
+    width: 80%;
     height: auto;
     margin-top: 6px;
   }

default.hbs

@@ -42,6 +42,7 @@
     {{> footer}}
     {{ghost_foot}}
     {{> google-analytics}}
-    {{!> share/default}}
+    {{> share/scripts/facebook}}
+    {{> share/scripts/twitter}}
   </body>
 </html>

partials/share/scripts/facebook.hbs

@@ -0,0 +1,10 @@
+{{! Facebook buttons }}
+
+<div id="fb-root"></div>
+<script>(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id)) return;
+  js = d.createElement(s); js.id = id;
+  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=1704459529784952";
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));</script>

partials/share/scripts/gplus.hbs

@@ -0,0 +1,3 @@
+{{! Google+ buttons }}
+
+<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

partials/share/scripts/twitter.hbs

@@ -0,0 +1,3 @@
+{{! Twitter buttons }}
+
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

partials/widgets/facebook-box.hbs

@@ -1,4 +1,5 @@
 {{! TODO: Extract facebook page slug as Ghost variable }}
+
 <section class="facebook-box widget">
-    <div class="fb-like-box" data-href="https://www.facebook.com/zombts" data-width="290" data-height="300" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
+  <div class="fb-page" data-href="https://www.facebook.com/zombts/" data-width="299.375" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/zombts/"><a href="https://www.facebook.com/zombts/">Zombeats</a></blockquote></div></div>
 </section>

partials/widgets/feature-post.hbs

@@ -1,6 +1,6 @@
 <section class="popular-posts widget">
   <h3>Próximo Evento</h3>
-  <a href="volvemos_a_tope_con_la_murcia_urban_sup_2015/">
-    <img src="http://3.bp.blogspot.com/-1YWpZDBcjag/VecxCz5U_eI/AAAAAAAADEA/EVPPJL0zhbw/s640/CartelMurciaUrbanSUP%2B2015%2BINFO.jpg" style="width: 60%;">
+  <a href="/#">
+    <img src="{{asset "images/event.jpg"}}" style="width: 60%;">
   </a>
 </section>

partials/widgets/twitter-box.hbs

@@ -1,12 +1,12 @@
-
 {{! TODO: Extract twitter handle slug as Ghost variable }}
 {{! TODO: Extract twitter description as Ghost variable }}
+
 <section class="twitter-box twitter-box-main widget">
     <a class="twitter-box-profilepic" href="http://twitter.com/zombeats_es"><img src="{{asset "images/logo.png"}}" alt="Twitter profile picture" /></a>
     <img class="twitter-box-coverpic" src="{{asset "images/twitterbg.jpg"}}" alt="Twitter cover image" nopin="nopin" />
     <div class="twitter-box-content">
         <h4>Zombeats</h4>
-        <p>Tu comunidad de beatbox en español. Campeonatos, Historias, Quedadas, Vídeos...</p>
+        <p>Tu Comunidad de Beatbox en Español. Campeonatos, Historias, Quedadas, Vídeos...</p>
         <a href="https://twitter.com/zombeats_es" class="twitter-follow-button" data-show-count="true">Seguir @zombeats_es</a>
     </div>
 </section>