diff --git a/src/theme/BlogPostItem/Footer/LikesAndComments/index.js b/src/theme/BlogPostItem/Footer/LikesAndComments/index.js
deleted file mode 100644
index af8562e..0000000
--- a/src/theme/BlogPostItem/Footer/LikesAndComments/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, {useState, useEffect} from 'react';
-import './style.css';
-
-export default function LikesAndComments(props) {
-  const [webmentionCount, setWebmentionCount] = useState(0);
-
-  useEffect(() => {
-    fetch(`https://webmention.io/api/count?target=${window.location.href}`)
-      .then(response => response.json())
-      .then(data => setWebmentionCount(data.count))
-      .catch(error => console.log(error))
-  }, [])
-
-  return (
-    <>
-      <p className='webmention-counter'>{webmentionCount}</p>
-    </>
-  )
-}
diff --git a/src/theme/BlogPostItem/Footer/Webmentions/index.js b/src/theme/BlogPostItem/Footer/Webmentions/index.js
new file mode 100644
index 0000000..f5983b5
--- /dev/null
+++ b/src/theme/BlogPostItem/Footer/Webmentions/index.js
@@ -0,0 +1,44 @@
+import React, {useState, useEffect} from 'react';
+import './style.css';
+
+function Spacer() {
+  return <p></p>;  
+}
+export default function Webmentions(props) {
+  const [webmentions, setWebmentions] = useState({});
+  const baseUrl = 'https://webmention.io/api';
+  const countEndpoint = (target) => `${baseUrl}/count?target=${target}`;
+  const mentionEndpoint = (target) => `${baseUrl}/mentions.jf2?target=${target}`;
+  const postUrl = window.location.href;
+
+  useEffect(() => {
+    const webmentionCount = fetch(countEndpoint(postUrl))
+      .then(response => response.json())
+      .then(data => data.count)
+      .catch(error => console.log(error))
+ 
+    const webmentionAuthors = fetch(mentionEndpoint(postUrl))
+      .then(response => response.json())
+      .then(data => data.children)
+      .then(mentions => mentions.map(mention => mention.author))
+      .catch(error => console.log(error))
+
+    Promise.all([webmentionCount, webmentionAuthors])
+      .then(([count, authors]) => setWebmentions({
+        'count': count, 
+        'authors': authors
+      }))
+      .catch(error => console.log(error))
+  }, [])
+
+  return (
+    <>
+      <Spacer />
+      {webmentions.count > 0 && (
+        <div className='webmentions'>
+          <p className='webmention-counter'>Mentioned by <b>{webmentions.authors[0].name}</b></p>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/theme/BlogPostItem/Footer/LikesAndComments/style.css b/src/theme/BlogPostItem/Footer/Webmentions/style.css
similarity index 100%
rename from src/theme/BlogPostItem/Footer/LikesAndComments/style.css
rename to src/theme/BlogPostItem/Footer/Webmentions/style.css
diff --git a/src/theme/BlogPostItem/Footer/index.js b/src/theme/BlogPostItem/Footer/index.js
index 0aaa9f7..7ab9bb0 100644
--- a/src/theme/BlogPostItem/Footer/index.js
+++ b/src/theme/BlogPostItem/Footer/index.js
@@ -1,12 +1,14 @@
 import React from 'react';
 import Footer from '@theme-original/BlogPostItem/Footer';
-import LikesAndComments from '@site/src/theme/BlogPostItem/Footer/LikesAndComments';
+import Webmentions from '@site/src/theme/BlogPostItem/Footer/Webmentions';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
 
 export default function FooterWrapper(props) {
+  const {metadata, isBlogPostPage} = useBlogPost();
   return (
     <>
       <Footer {...props} />
-      <LikesAndComments {...props} />
+      {isBlogPostPage && (<Webmentions />)}
     </>
   );
 }