add fb button, add shouldUpdate to social tag so it doesn't update

unnecessarily

src/scripts/post.tag

@@ -10,7 +10,7 @@
       next={this.next}
     >
     </div>
-    <loading if={this.loading && !this.parent.state.loaded}></loading>
+    <loading if={this.loading && this.opts.state.loaded}></loading>
     <div class="text-break">
       <div class={"animated " + (this.loading ? "invisible" : "fadeIn")}>
         <social

src/scripts/social.tag

@@ -1,7 +1,11 @@
 <social>
   <div class="social-wrapper">
-    <raw ref="button" content={this.tweetHtml}>
-    </raw>
+      <div class="btn-group">
+        <raw ref="twitter-button" content={this.tweetHtml}>
+        </raw>
+        <raw ref="facebook-button" content={this.fbHtml}>
+        </raw>
+      </div>
   </div>
 <script>
 
@@ -11,6 +15,7 @@ var self = this;
 self.tweetHtml = "";
 
 self._id = "";
+self.old_id = self._id;
 
 updateButton(_id, title) {
   if (_id == undefined) {
@@ -18,7 +23,8 @@ updateButton(_id, title) {
   }
   if (_id != self._id) {
 
-    self.tweetHtml = `<a style="display:none;" data-size="large" class="btn twitter-share-button" data-text="${title}" data-via="weskerfoot" data-show-count="false" data-url="https://primop.me/blog/#!posts/${_id}" ref="tweet">Tweet ${_id}</a>`;
+    self.tweetHtml = `<a style="display:none;" data-size="small" class="twitter-share-button btn" data-text="${title}" data-via="weskerfoot" data-show-count="false" data-url="https://primop.me/blog/#!posts/${_id}" ref="tweet">Tweet ${_id}</a>`;
+    self.fbHtml = `<div class="fb-share-button" data-href="https://primop.me/blog/#!posts/${_id}" data-layout="button_count"></div>`;
     self._id = _id;
     self.update();
   }
@@ -26,10 +32,18 @@ updateButton(_id, title) {
 
 self.on("updated", () => {
   if (window.twttr.widgets !== undefined) {
-
     window.twttr.widgets.load();
   }
+
+  if (FB.XFBML.parse !== undefined) {
+    FB.XFBML.parse();
+  }
+  self.old_id = self._id;
 });
 
+shouldUpdate() {
+  return self.old_id != self.parent._id
+}
+
 </script>
 </social>

src/styles/riotblog.scss

@@ -191,7 +191,7 @@ p, h6, h4 {
     max-width: 90%;
   }
   @media (max-width: 400px) {
-    max-width: 100%;
+    max-width: 93%;
   }
 }
 

src/templates/index.html

@@ -33,6 +33,16 @@
     return t;
   }(document, "script", "twitter-wjs"));
   </script>
+  <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.8";
+    fjs.parentNode.insertBefore(js, fjs);
+  }(document, 'script', 'facebook-jssdk'));
+  </script>
+
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script type="text/javascript" src="/scripts/riotblog.min.js"></script>
   </body>