star btn

package-lock.json

@@ -9757,6 +9757,11 @@
         "parse-url": "^5.0.0"
       }
     },
+    "github-buttons": {
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.11.1.tgz",
+      "integrity": "sha512-RMPwA6Zqqxu/P5jXeW02zuuPaChztG4ASHTKrzSlHgWiFg0crQQTp2E1kBRCGV+/9Bo99ziU+ggmVptLhu8k6A=="
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -16675,6 +16680,14 @@
       "resolved": "https://registry.npmjs.org/react-frame-component/-/react-frame-component-4.1.2.tgz",
       "integrity": "sha512-gWTtpOoi8Mgxayj0iWLL3SXRu2jW4eW4oim6B/FycaOH9HHIsCTPulC9u7CZ2BwY0CtqA+v8FsINp6qPuaN6qQ=="
     },
+    "react-github-btn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.2.0.tgz",
+      "integrity": "sha512-/b2TGTeek5Ky+KtuP5BxOaXgb1FGhbwgZNI6rkwkGk7+xtCtsNMkdchOcCnC3qU1JGTWPKzYZWpPBIouVhXAoQ==",
+      "requires": {
+        "github-buttons": "^2.8.0"
+      }
+    },
     "react-helmet": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",

package.json

@@ -37,6 +37,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-github-btn": "^1.2.0",
     "react-helmet": "^6.1.0"
   },
   "devDependencies": {

src/components/Footer/Footer.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import './Footer.scss'
 
+import GitHubButton from 'react-github-btn'
 import LogoIcon from '../../images/logo-icon.svg'
 import GatsbyIcon from '../../images/gatsby-icon.svg'
 import NetlifyIcon from '../../images/netlify-icon.svg'
@@ -43,12 +44,15 @@ const Footer = () => {
             </div>
           </div>
           <div className="footer-nav__helpers">
-            <a href="https://www.gatsbyjs.org/" rel='noreferrer' target="_blank">
+            <GitHubButton href="https://github.com/sergeyyarkov/devthread.ru" data-icon="octicon-star" aria-label="Start devthread.ru">Star</GitHubButton>
-              <GatsbyIcon />
+            <div className="helpers-icons">
-            </a>
+              <a href="https://www.gatsbyjs.org/" rel='noreferrer' target="_blank">
-            <a href="https://www.netlify.com/" rel='noreferrer' target="_blank">
+                <GatsbyIcon />
-              <NetlifyIcon />
+              </a>
-            </a>
+              <a href="https://www.netlify.com/" rel='noreferrer' target="_blank">
+                <NetlifyIcon />
+              </a>
+            </div>
           </div>
         </div>
         <div className="footer-content__copy">

src/components/Footer/Footer.scss

@@ -51,11 +51,17 @@ footer {
       & .footer-nav__helpers {
         display: flex;
         align-items: flex-end;
-        & a {
+        & span {
-          text-decoration: none;
+          margin-right: 10px;
         }
-        & a:nth-child(1) {
+        & .helpers-icons {
-          margin-right: 15px;
+          display: flex;
+          & a {
+            text-decoration: none;
+          }
+          & a:nth-child(1) {
+            margin-right: 10px;
+          }
         }
       }
     }
@@ -113,6 +119,14 @@ footer {
           margin-bottom: 20px;
         }
       }
+      & .footer-nav__helpers {
+        align-items: center;
+        flex-direction: column;
+        & span {
+          margin-bottom: 15px;
+          margin-right: 0;
+        }
+      }
     }
   }
 }

src/components/SEO/SEO.js

@@ -22,6 +22,8 @@ const SEO = ({ title, description, image, type }) => {
       <meta name="description" content={seo.description} />
       <meta property='og:locale' content='ru_RU' />
       <meta property="og:url" content={seo.url} />
+      <meta property='og:title' content={seo.title}
+      />
       <meta property='og:site_name' content={seo.siteName}
       />
       {seo.type && (