Social Media Solutions

Integrating social into your site can drastically improve user engagement with your platform. Below are a few useful solutions and implementation instructions.

Social Login

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.

The following guides go over setting up Social Login with a few common Social Providers:
Facebook: How to Implement Facebook Social Login
Twitter: Integrating Twitter Social Login
LinkedIn: Integrating LinkedIn Social Login on a Website

Social Sharing

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:

  1. Include the Facebook JavaScript SDK on your page:
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20window.fbAsyncInit%20%3D%20function()%20%7B%0A%20%20%20%20FB.init(%7B%0A%20%20%20%20%20%20appId%20%20%3A%20'your-app-id'%2C%0A%20%20%20%20%20%20xfbml%20%20%3A%20true%2C%0A%20%20%20%20%20%20version%3A%20'v2.3'%0A%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%0A%20%20%20%20%20%20(function(d%2C%20s%2C%20id)%7B%0A%20%20%20%20%20var%20js%2C%20fjs%20%3D%20d.getElementsByTagName(s)%5B0%5D%3B%0A%20%20%20%20%20if%20(d.getElementById(id))%20%7Breturn%3B%7D%0A%20%20%20%20%20js%20%3D%20d.createElement(s)%3B%20js.id%20%3D%20id%3B%0A%20%20%20%20%20js.src%20%3D%20%22%2F%2Fconnect.facebook.net%2Fen_US%2Fsdk.js%22%3B%0A%20%20%20%20%20fjs.parentNode.insertBefore(js%2C%20fjs)%3B%0A%20%20%20%20%20%20%20%7D(document%2C%20'script'%2C%20'facebook-jssdk'))%3B%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
     
  2. Next include the div that will contain the sharing button on your page with the following data attributes:
    1. data-href – Set this to the URL that you want to share.
    2. data-layout – Set this to one of the following to control the style of button that is displayed:
      a. box_count
      b. button_count
      c. button
      d. icon_link
      e. icon
      f. link

Sample Div:

 
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button"> 

You can find information on generating sharing links with other providers in the following locations:
LinkedIn- https://developer.linkedin.com/plugins/share
Twitter: https://about.twitter.com/resources/buttons
Google: https://developers.google.com/+/web/share/

Or you can contribute to our open source project on github-https://github.com/social9

Follow Company

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.

Below is an example of setting up a Twitter follow button:

  1. Include Twitters JavaScript SDK using their provided script:
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3Ewindow.twttr%20%3D%20(function(d%2C%20s%2C%20id)%20%7B%0A%20%20%20%20%20%20var%20js%2C%20fjs%20%3D%20d.getElementsByTagName(s)%5B0%5D%2C%0A%20%20%20%20t%20%3D%20window.twttr%20%7C%7C%20%7B%7D%3B%0A%20%20%20%20%20%20if%20(d.getElementById(id))%20return%20t%3B%0A%20%20%20%20%20%20js%20%3D%20d.createElement(s)%3B%0A%20%20%20%20%20%20js.id%20%3D%20id%3B%0A%20%20%20%20%20%20js.src%20%3D%20%22https%3A%2F%2Fplatform.twitter.com%2Fwidgets.js%22%3B%0A%20%20%20%20%20%20fjs.parentNode.insertBefore(js%2C%20fjs)%3B%0A%20%20%20%20%20%0A%20%20%20%20%20%20t._e%20%3D%20%5B%5D%3B%0A%20%20%20%20%20%20t.ready%20%3D%20function(f)%20%7B%0A%20%20%20%20t._e.push(f)%3B%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%0A%20%20%20%20%20%20return%20t%3B%0A%20%20%20%20%7D(document%2C%20%22script%22%2C%20%22twitter-wjs%22))%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    
  2. Include a link tag in the location that you would like to display your follow button:
     <a class="twitter-follow-button" href="https://twitter.com/LoginRadius" data-size="large" data-show-count="true" data-show-screen-name="true"> Follow @TwitterDev 

You can set the data attributes in the above link to control various aspects of the follow button.

Find information on generating follow buttons for other social providers in the following locations:
Facebook- https://developers.facebook.com/docs/archive/docs/plugins/follow-button/
LinkedIn- https://developer.linkedin.com/plugins/follow-company
Google- https://developers.google.com/+/web/follow/

Social Linking

One of the most common and easy to configure social integrations is setting up links to your companies Social profiles.
All you need to do is create a link tag on your page:

 <a href="https://www.facebook.com/loginradius" target="_blank">Facebook</a> 

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 here.
You can store the image locally and include it in the a tag:

 <a href="https://www.facebook.com/loginradius" target="_blank"><img src="<Your Stored Facebook Image>" alt="Facebook"> </a>

Conclusion

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.

Karl Wittig

About 

Karl is a Software Developer at LoginRadius, the rapidly-expanding social login and sharing provider. He graduated from NAIT with a diploma in Computer Engineering Technologies. He enjoys snowboarding, watching TV series and gaming.