Add Facebook share button ✨

wwang721 · Dec 8, 2023 · bfab498 · bfab498
1 parent a1bc4a7
commit bfab498
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 6 deletions.
diff --git a/1news.md b/1news.md
@@ -12,6 +12,9 @@ permalink: /news.html
     <div>&nbsp;</div>
 
     <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+    <div id="fb-root"></div>
+    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"
+    nonce="bvIXSjwe"></script>
     <ul class="post-list">
         {% for post in site.posts %}
             {% assign date_format = "%Y-%m-%d" %}
@@ -42,9 +45,19 @@ permalink: /news.html
 
                 <span>{{ post.excerpt | markdownify | truncatewords: 30 }}
 
-                <p style="margin:-5px 0 0 0px;">
-                <a href="https://twitter.com/intent/tweet" class="twitter-share-button" data-show-count="false" data-text="{{post.title}} via @{{site.twitter_username}}" data-url="{{ post.url | absolute_url}}">Tweet</a>
+                <div class="row" style="margin:-5px 0 0 0px; overflow:hidden">
+                <div class="column" style="float:left; width:75px;">
+                <p style="">
+                <a href="https://twitter.com/intent/tweet" class="twitter-share-button" data-show-count="false" data-text="{{post.title}} via @{{site.twitter_username}}" data-url="{{ post.url | absolute_url}}" data-size="small">Tweet</a>
                 </p>
+                </div>
+
+                <div class="column" style="float:left; width:75px">
+                <div class="fb-share-button" data-href="{{post.url | absolute_url}}" data-layout="button" data-size="small" style="display: flex;">
+                </div>
+                </div>
+
+                </div>
 
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
                 {% assign date_format = "%Y-%m-%d" %}

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -25,13 +25,27 @@ <h1 class="post-title" itemprop="name headline">{{ page.title | escape }}</h1>
     {% include disqus_comments.html %}
   {% endif %}
 
-<p style="margin: 100px 0 0 0;">
+<div class="row" style="margin:100px 0 0 5px; ">
+<div class="column" style="float:left; width:95px">
+<p style="margin: 0px 0 0 0;">
 <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false"
     data-text="{{page.title}} via @{{site.twitter_username}}" data-size="large">Tweet</a>
 </p>
 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+</div>
 
-    <div style="margin: 40px 0px 0px 0px">
-        <a href="/"><b><u>Back to the Home page</u></b></a>
-    </div>
+<div class="column" style="float:left">
+<div id="fb-root"></div>
+<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v18.0"
+    nonce="bvIXSjwe"></script>
+
+<div class="fb-share-button" data-href="{{page.url | absolute_url}}" data-layout="button" data-size="large">
+</div>
+</div>
+<p>&ensp;</p>
+</div>
+
+<div style="margin: 40px 0px 0px 0px">
+    <a href="/"><b><u>Back to the Home page</u></b></a>
+</div>
 </article>