{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/simple-social-media-solutions/","result":{"data":{"markdownRemark":{"id":"f731b19f-36fd-5ff7-adb6-36798681f830","excerpt":"Integrating social into your site can drastically improve user engagement with your platform. Below are a few useful solutions and implementation instructions…","html":"<p>Integrating social into your site can drastically improve user engagement with your platform. Below are a few useful solutions and implementation instructions.</p>\n<h2 id=\"social-login\" style=\"position:relative;\"><a href=\"#social-login\" aria-label=\"social login permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Social Login</h2>\n<p>Social Login, also known as Social Sign On, Allows you to bypass traditional registration forms and utilize the systems in place by social providers in order to retrieve a copy of the users data and a unique identifier for the user that can be used to identify that user in your system.</p>\n<p>The following guides go over setting up Social Login with a few common Social Providers:<br>\nFacebook: <a href=\"/implement-facebook-social-login/\">How to Implement Facebook Social Login</a><br>\nTwitter: <a href=\"/integrating-twitter-social-login/\">Integrating Twitter Social Login</a><br>\nLinkedIn: <a href=\"/integrate-linkedin-social-login-website/\">Integrating LinkedIn Social Login on a Website</a></p>\n<h2 id=\"social-sharing\" style=\"position:relative;\"><a href=\"#social-sharing\" aria-label=\"social sharing permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Social Sharing</h2>\n<p>Most major social providers offer an easy tool to formulate and include sharing buttons on your pages. Below is an example of setting up an easy to use social sharing button with Facebook:</p>\n<ol>\n<li>Include the Facebook JavaScript SDK on your page:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!----&gt;</span></span></code></pre>\n<ol start=\"6\">\n<li>\n<p>Next include the div that will contain the sharing button on your page with the following data attributes:</p>\n<ol>\n<li>data-href - Set this to the URL that you want to share.</li>\n<li>data-layout - Set this to one of the following to control the style of button that is displayed:<br>\na. box_count<br>\nb. button_count<br>\nc. button<br>\nd. icon_link<br>\ne. icon<br>\nf. link</li>\n</ol>\n</li>\n</ol>\n<p>Sample Div:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- --&gt;</span></span></code></pre>\n<p>You can find information on generating sharing links with other providers in the following locations:<br>\n<a href=\"https://about.twitter.com/resources/buttons\">Twitter</a>  </p>\n<p>Or you can contribute to our open source project on github- <a href=\"https://github.com/social9\">Github-Social9</a></p>\n<h2 id=\"follow-company\" style=\"position:relative;\"><a href=\"#follow-company\" aria-label=\"follow company permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Follow Company</h2>\n<p>Follow buttons work very much the same as the social sharing buttons above. Simply include the relevant SDK and div with some customizations and users will be able to follow(and un-follow) your brand directly from your page.</p>\n<p>Below is an example of setting up a Twitter follow button:</p>\n<ol>\n<li>Include Twitters JavaScript SDK using their provided script:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!----&gt;</span></span></code></pre>\n<ol start=\"6\">\n<li>Include a link tag in the location that you would like to display your follow button:</li>\n</ol>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!-- </span><span class=\"mtk12\">Follow</span><span class=\"mtk1\"> @</span><span class=\"mtk12\">TwitterDev</span><span class=\"mtk1\"> --&gt;</span></span></code></pre>\n<p>You can set the data attributes in the above link to control various aspects of the follow button.</p>\n<p>Find information on generating follow buttons for other social providers in the following locations:<br>\n<a href=\"https://developers.facebook.com/docs/archive/docs/plugins/follow-button/\">Facebook</a>  </p>\n<h2 id=\"social-linking\" style=\"position:relative;\"><a href=\"#social-linking\" aria-label=\"social linking permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Social Linking</h2>\n<p>One of the most common and easy to configure social integrations is setting up links to your companies Social profiles.<br>\nAll you need to do is create a link tag on your page:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!--</span><span class=\"mtk12\">Facebook</span><span class=\"mtk1\">--&gt;</span></span></code></pre>\n<p>You can improve upon this by utilizing one of the Social providers branded icons to better display the linking UX. Get a copy of Facebooks Branded Icon.<br>\nYou can store the image locally and include it in the a tag:</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"js\" data-index=\"5\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!--&lt;</span><span class=\"mtk12\">img</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">alt</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;Facebook&quot;</span><span class=\"mtk1\">&gt; --&gt;</span></span></code></pre>\n<h2 id=\"conclusion\" style=\"position:relative;\"><a href=\"#conclusion\" aria-label=\"conclusion permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Conclusion</h2>\n<p>Now that you have setup the above social features your users will have a variety of touch-points to keep them active and interacting with your site, seamlessly driving user conversions and making brand ambassadors of your users.</p>\n<style class=\"grvsc-styles\">\n  .grvsc-container {\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n    padding-top: 1rem;\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\n    padding-bottom: 1rem;\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\n    border-radius: 8px;\n    border-radius: var(--grvsc-border-radius, 8px);\n    font-feature-settings: normal;\n  }\n  \n  .grvsc-code {\n    display: inline-block;\n    min-width: 100%;\n  }\n  \n  .grvsc-line {\n    display: inline-block;\n    box-sizing: border-box;\n    width: 100%;\n    padding-left: 1.5rem;\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\n    padding-right: 1.5rem;\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\n  }\n  \n  .grvsc-line-highlighted {\n    background-color: var(--grvsc-line-highlighted-background-color, transparent);\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, transparent);\n  }\n  \n  .dark-default-dark {\n    background-color: #1E1E1E;\n    color: #D4D4D4;\n  }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n</style>","headings":[{"value":"Social Login","depth":2},{"value":"Social Sharing","depth":2},{"value":"Follow Company","depth":2},{"value":"Social Linking","depth":2},{"value":"Conclusion","depth":2}],"fields":{"slug":"/engineering/simple-social-media-solutions/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"Social Media Solutions","canonical":null,"date":"October 08, 2015","updated_date":null,"tags":["Social Media","Social Login"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/b3a4226418ae955228bf1bc38289c30a/03979/social-media.png","srcSet":"/static/b3a4226418ae955228bf1bc38289c30a/f5f11/social-media.png 200w,\n/static/b3a4226418ae955228bf1bc38289c30a/6d133/social-media.png 400w,\n/static/b3a4226418ae955228bf1bc38289c30a/03979/social-media.png 800w,\n/static/b3a4226418ae955228bf1bc38289c30a/104b3/social-media.png 960w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"bio":"Karl is the AVP of Customer Success at LoginRadius, the industry leading Consumer IAM provider. He thrives in fast paced high tech environments working closely with Customers to overcome complex Identity related challenges as part of their digital transformations. Outside of work, he spends his time with his family in and around Vancouver hiking, snowboarding and exploring.","avatar":null}}}},"pageContext":{"id":"f731b19f-36fd-5ff7-adb6-36798681f830","fields__slug":"/engineering/simple-social-media-solutions/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}