{"componentChunkName":"component---src-templates-tag-js","path":"/tags/facebook/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":6,"edges":[{"node":{"fields":{"slug":"/engineering/login-with-facebook/"},"html":"

There are more than 1 million websites or apps are using \"SignIn with Facebook\" or \"Login with Facebook\". Do you know why they are using Facebook login and how it is beneficial in conversion?

\n

According to multiple surveys, there are more than 3 billion users worldwide are using social media and it is around 50% of the world's population.

\n

\n \n \n

\n

Step 2

\n

Select the My Apps as displayed on the below screen.

\n

\n \n \n

\n

Step 4

\n

Input display name and contact email. Once you have done so, click on Create App ID

\n

\n \n \n

\n

Step 6

\n

Once you land on the App dashboard, Select Facebook Login, and click Set Up.

\n

\n \n \n

\n

Data Selection

\n

When a user logs into your website or app via Facebook Login, you can access the user's data stored on Facebook. Facebook only allows the basic profile data permissions for a new Facebook app. To get more data according to your business requirement, you need to enable additional permissions on your Facebook app. Facebook is supporting around 42 permissions. You need to choose user data that you want to collect from Facebook.

\n

Submit Your Facebook Login App For Review

\n

To grab more than basic profile data points or asking for additional permissions from your users, your Facebook apps go through the review process. Sometimes businesses require some additional permissions on the Facebook app and for that, you need to submit your Facebook app for approval before starting to ask for additional information.

\n

The Facebook app review process is pretty much simple, Please refer to this document here for the Facebook App Review Process.

\n

Add Login with the Facebook button on Your Site

\n

Implement Facebook login to a web page is very easy using Facebook’s JavaScript SDK. Facebook is providing documentation and instructions along with code examples to implement the login system.

\n

Let's see how we can add the Facebook login interface. For this, we just need to copy and paste the code provided to us by Facebook. Here I have added some customization to the existing code

\n

Place this code in the body section of your HTML code.

\n
<!-- The JS SDK Login Button -->\n\n<fb:login-button scope="public_profile,email" onlogin="checkLoginState();">\n</fb:login-button>\n\n<!-- The JS SDK Login Button -->\n<div id="status">\n</div>
\n

Now you need to include the JavaScript section. It'll loads the Facebook SDK JavaScript asynchronously.

\n
<!-- Load the JS SDK asynchronously -->\n<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
\n

Next, we'll add the Facebook init function. We just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId: '{your-app-id}'.

\n
window.fbAsyncInit = function() {\n    FB.init({\n      appId      : '{your-app-id}',\n      cookie     : true,                     // Enable cookies to allow the server to access the session.\n      xfbml      : true,                     // Parse social plugins on this webpage.\n      version    : 'v7.0'           // Use this Graph API version for this call.\n    });
\n

Next, we need to add the function that handles the response and alters the page contents based on the type of response. I have added this function at the very top of the scripts section.

\n
function checkFacebookLoginStatusCallback(response) {  // Called with the results from FB.getLoginStatus().\n    console.log(' Checking Facebook Login Status');\n    console.log(response);                   // The current login status of the person.\n    if (response.status === 'connected') {   // Logged into your webpage and Facebook.\n      getUserProfile();  \n    } else {                                 // Not logged into your webpage or we are unable to tell.\n      document.getElementById('status').innerHTML = 'Please login with Facebook into this webpage.';\n    }\n  }
\n

As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. When the login is not authorized, this function changed the HTML on your page to ask you to log in.

\n
function checkLoginState() {               // Called when a person is finished with the Login Button.\n    FB.getLoginStatus(function(response) {   // See the onlogin handler\n      checkFacebookLoginStatusCallback(response);\n    });\n  }\n\n    FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.\n      checkFacebookLoginStatusCallback(response);        // Returns the login status.\n    });\n\n     function getUserProfile() {                      // Get User Profile using Facebook Graph API after login.\n    console.log('Welcome!  Fetching your profile information.... ');\n    FB.api('/me', function(response) {\n      console.log('Successful login for: ' + response.name);\n      document.getElementById('status').innerHTML =\n        'Thanks for logging in, ' + response.name + '!';\n    });\n  }
\n

Now if you save this page as login.html and open it in a browser you should see the Facebook Login button. You can also download this code from my GitHub Repo and I have customized it to make it a bit shorter for an explanation.

\n

Now just Log In and check the console output. You’ll now see some basic info including id, email, firstname, gender, lastname.

\n

This is all there is to it. Of course, there are many more options and features available in Facebook documentation to discover.

\n

Closing Thoughts

\n

Social Media platforms are growing day-by-day and simplifying the registration and login process. Consumers can use their existing social identities to register and log in. They don't need to create a separate username/password combination so it is simplifying the Sign in/Signup process.

\n

LoginRadius supports Sign with Facebook with more than 40 other popular social networks google, twitter, Linkedin, etc. You can implement all the popular social media providers on your website or mobile app in less than 60 seconds.

\n

Source

\n

statista

\n

netcraft

\n","frontmatter":{"date":"September 16, 2020","updated_date":null,"title":"How to implement Facebook Login","tags":["Login With Facebook","Facebook","Facebook Login","Login","Oauth"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.6666666666666667,"src":"/static/4e677331ecf5f923c5e08c812bca0026/1c1a5/index.png","srcSet":"/static/4e677331ecf5f923c5e08c812bca0026/69585/index.png 200w,\n/static/4e677331ecf5f923c5e08c812bca0026/497c6/index.png 400w,\n/static/4e677331ecf5f923c5e08c812bca0026/1c1a5/index.png 550w","sizes":"(max-width: 550px) 100vw, 550px"}}},"author":{"id":"Vijay Singh Shekhawat","github":"code-vj","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/facebook-authentication-using-node-and-passport/"},"html":"

Social login is the need for simplifying your registration process and increasing the conversion rates. Here we will be implementing Facebook Login using NodeJS and Passport.

\n

Passport is authentication middleware for Node, which authenticates requests and delegates all other functionality to the application. Considering the unique application requirements, passport has stuck to authentication mechanisms known as strategies. In the blog, we will be implementing a similar strategy for Login with Facebook.

\n

Pre -Requisites:

\n
    \n
  1. Basic Knowledge of NodeJS
    2. \n
  2. Node JS should be installed on your system.
    3. \n
\n

Steps to configure

\n
    \n
  1. Creating Facebook APP_ID and APP_SECRET
    2. \n
  2. Go to Facebook and login with your Facebook account.
    3. \n
  3. Once you have registered, click on the create app link and you will need to enter the details in the following pop-up
    4. \n
\n

\n \n \n

\n\n

\n \n \n

\n\n

\n \n \n

\n
    \n
  1. \n

    Now enough, let's move to code, First of all, create a directory named facebook-node-authentication

    \n
    mkdir facebook-node-authentication
    \n
    2. \n
  2. Move to the directory facebook-node-authentication/
    3. \n
\n
  cd facebook-node-authentication
\n
    \n
  1. In the root create a file package.json and copy the following code
    2. \n
\n

The dependencies, we are going to use in the projects are

\n\n
{\n  "name": "facebook_login_node",\n  "version": "1.0.0",\n  "description": "\\"Basic application for setting up Facebook logij using node and passport\\"",\n  "main": "index.js",\n  "scripts": {\n    "test": "echo \\"Error: no test specified\\" && exit 1",\n    "start": "node server.js"\n  },\n  "author": "",\n  "license": "ISC",\n  "dependencies": {\n    "ejs": "^3.1.2",\n    "express": "^4.17.1",\n    "express-session": "^1.17.1",\n    "passport": "^0.4.1",\n    "passport-facebook": "^3.0.0"\n  }\n}
\n
    \n
  1. \n

    After this run the following command in the terminal

    \n
    npm install
    \n
    2. \n
  2. Now create a file named server.js and paste the following code
    3. \n
\n
const express = require('express');\nconst app = express();\nconst session = require('express-session');\nconst passport = require('passport');\nconst FacebookStrategy = require('passport-facebook').Strategy;\nconst routes = require('./routes.js');\nconst config = require('./config')\n\napp.set('view engine', 'ejs');\n\napp.use(session({\n  resave: false,\n  saveUninitialized: true,\n  secret: 'SECRET'\n}));\n\napp.use(passport.initialize());\napp.use(passport.session());\n\npassport.serializeUser(function (user, cb) {\n  cb(null, user);\n});\n\npassport.deserializeUser(function (obj, cb) {\n  cb(null, obj);\n});\n\npassport.use(new FacebookStrategy({\n    clientID: config.facebookAuth.clientID,\n    clientSecret: config.facebookAuth.clientSecret,\n    callbackURL: config.facebookAuth.callbackURL\n  }, function (accessToken, refreshToken, profile, done) {\n    return done(null, profile);\n  }\n));\n\napp.use('/', routes);\n\nconst port = 3000;\n\napp.listen(port, () => {\n  console.log('App listening on port ' + port);\n});
\n
    \n
  1. Now create a file named route.js in the root directory and paste the following code
    2. \n
\n
const passport = require('passport');\nconst express = require('express');\nvar router = express.Router();\n\nrouter.get('/', function (req, res) {\n  res.render('pages/index.ejs'); // load the index.ejs file\n});\n\nrouter.get('/profile', isLoggedIn, function (req, res) {\n  res.render('pages/profile.ejs', {\n    user: req.user // get the user out of session and pass to template\n  });\n});\n\nrouter.get('/error', isLoggedIn, function (req, res) {\n  res.render('pages/error.ejs');\n});\n\nrouter.get('/auth/facebook', passport.authenticate('facebook', {\n  scope: ['public_profile', 'email']\n}));\n\nrouter.get('/auth/facebook/callback',\n  passport.authenticate('facebook', {\n    successRedirect: '/profile',\n    failureRedirect: '/error'\n  }));\n\nrouter.get('/logout', function (req, res) {\n  req.logout();\n  res.redirect('/');\n});\n\nfunction isLoggedIn(req, res, next) {\n  if (req.isAuthenticated())\n    return next();\n  res.redirect('/');\n}\n\nmodule.exports = router;
\n
    \n
  1. Create a directory views and under this create a directory named pages. Under this folder create two pages named profile.ejs and index.ejs
    2. \n
\n
// index.ejs\n<!doctype html>\n<html>\n\n<head>\n  <title>Facebook Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .facebook {\n      background-color: #3b5998 !important;\n      color: #fff !important;\n    }\n    .fa-facebook-f:before,\n    .fa-facebook:before {\n      content: "\\f09a";\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s6 offset-s3">\n          <div class="card">\n            <div class="card-content">\n              <span class="card-title">Facebook Login using Node and passport</span>\n            </div>\n            <div class="card-action">\n              <a href="/auth/facebook" class="waves-effect waves-light btn social facebook">\n                <i class="fa fa-facebook"></i> Sign in with facebook\n              </a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
<!- profile.ejs->\n<!doctype html>\n<html>\n\n<head>  \n  <title>Facebook Node Authentication</title>\n  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n  <link rel="stylesheet" type="text/css"\n    href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">\n  <style>\n    .card:hover {\n      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);\n      margin-bottom: 54px;\n    }\n  </style>\n</head>\n\n<body>\n  <nav class="light-blue lighten-1" role="navigation">\n    <div class="nav-wrapper container">\n      <a id="logo-container" href="#" class="brand-logo">Node Authentication</a>\n      <a href="/logout" class="right">Logout</a>\n    </div>\n  </nav>\n  <div class="section no-pad-bot" id="index-banner">\n    <div class="container">\n      <br><br>\n      <div class="row center">\n        <div class="col s12">\n          <div class="card">\n            <div class="card-content blue lighten-3">\n              <span class="card-title white-text"><strong><i class="large material-icons">person</i>\n                </strong></span>\n            </div>\n            <div class="card-action">\n              <h5><b><%= user.displayName %></b></h5>\n              <p><strong>Facebook id</strong>: <%= user.id %></p>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</body>\n\n</html>
\n
    \n
  1. Finally, when you are done with the above code you can now write all your app details gathered in step 1 to config.js file created in the root directory
    2. \n
\n
module.exports = {\n\t'facebookAuth': {\n\t\t'clientID':  '<APP_ID>', // your App ID\n\t\t'clientSecret':  '<APP_SECRET>', // your App Secret\n\t\t'callbackURL':  'http://localhost:3000/auth/facebook/callback'\n\t}\n}
\n
    \n
  1. Let's have a final check with the repository, aftre follwoing all the steps in the same pordr the directory structure of your code will look like below:
    2. \n
\n
// Final directory structure\nfacebook-node-authentication/\n  --|node_modules\n  --|views/\n    |--|pages/\n    |----|error.ejs\n    |----|profile.ejs\n    |----|index.ejs\n  --|config.js\n  --|package.json\n  --|package-lock.json\n  --|routes.js\n  --|server.js
\n
    \n
  1. Now run the server by executing below command in the directory facebook-node-authentication/
    2. \n
\n
npm start
\n
    \n
  1. Visit the browser with the URL http://localhost:3000
    2. \n
\n

\n \n \n

\n

\n \n \n

\n

You can found the complete code used in this tutorial on our Github Repo

\n","frontmatter":{"date":"June 01, 2020","updated_date":null,"title":"Facebook authentication using NodeJS and PassportJS","tags":["Facebook","NodeJs","Authentication","PassportJS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/e5b200d627ef5a68314069ffe94b984f/ee604/facebook_node_passport.png","srcSet":"/static/e5b200d627ef5a68314069ffe94b984f/69585/facebook_node_passport.png 200w,\n/static/e5b200d627ef5a68314069ffe94b984f/497c6/facebook_node_passport.png 400w,\n/static/e5b200d627ef5a68314069ffe94b984f/ee604/facebook_node_passport.png 800w,\n/static/e5b200d627ef5a68314069ffe94b984f/f3583/facebook_node_passport.png 1200w,\n/static/e5b200d627ef5a68314069ffe94b984f/e4d72/facebook_node_passport.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aman Agrawal","github":"aman-agrwl","avatar":null}}}},{"node":{"fields":{"slug":"/engineering/using-facebook-graph-api-after-login/"},"html":"

Facebooks Graph API gives you the ability to better understand and target content to your user. In this blog we go over some useful implementations of the Graph API that you can use to pull in user data as well as publish on your users behalf.

\n

Getting Your Site Ready

\n

The first thing you will need to do is implement an authorization interface that will allow your users to Login with there Facebook credentials and grant access to your application to handle the features that we will go over in this blog.

\n

You can refer to this article on setting up a Facebook Login integration: Implement Facebook Social Login

\n

While implementing the Login detailed in the above blog you can modify the scope included in the Facebook button to request the scopes that we will be using.

\n

Define your Facebook button as follows:

\n
<!-- -->
\n

This will cause your interface to request additional permissions that may require you to submit your app for review in order for your users to get access to these permissions.

\n

Managing your users login credentials.

\n

After your user has authenticated you can capture the users access token for use in your application or backend systems. During the Facebook login in the function function statusChangeCallback you can check the response for an active Facebook session and store the access token from this object as follows:

\n
if (response.authResponse) { var access_token = FB.getAuthResponse()['accessToken']; }
\n

This token is valid for 2 hours by default and can be upgraded to a long lived with a server-side call as detailed here: Access Tokens for Meta Technologies

\n

The long lived token will be valid for 60 days over which you will be able to access the users data or handle actions that they have granted your app permissions.

\n

If you have stored an access token or long lived token and wish to reinitialize the Facebook JavaScript graph API you can handle this by including the following parameter when making FB.api calls:

\n
FB.api( '/me', 'get', { access_token : 'access_token_for_some_user_fetched_from_your_database' } );
\n

\n

Getting User Data and Specific Fields

\n

The simplest way to get a copy of the User Profile object is to access the /me endpoint:

\n
FB.api('/me', function(response) { });
\n

This will this will return the users name and an ID by default. You can add additional field requests to the me endpoint in order to retrieve further data-points for the user. Below we request the users id, name, age_range, bio, birthday, and email using a stored access-token.

\n
<!--FB.api( '/me?fields=id,name,about,age_range,bio,birthday,email', 'get', { access_token :  },function(response) { //Handle Data Here it will arrive in a Json object in the response } );-->
\n

There are additional edge cases which can be accessed through the /me endpoint. A full list can be found here. A below sample details how you can retrieve the videos that the user is tagged in or has uploaded.

\n
<!--FB.api( '/me/videos', 'get', { access_token :  },function(response) { //Handle Data Here it will arrive in a Json object in the response } );-->
\n

\n

Publishing Content to a Users Wall

\n

In order to publish content to a users wall you will have to have requested the publish_actions permission during login which we have done in the first part of this article. You can then access the following endpoint to publish a status post to a users wall:

\n
<!--FB.api( '/me/feed?message=', 'Post', { access_token :  },function(response) { //Handle Response which will contain a Post ID if successful } );-->
\n

\n

Conclusion

\n

Facebook offers many options to integrate their API into your site and offers a variety of easy to use SDKs for multiple languages. Check out their documentation for details on the various SDKs and additional graph endpoints.

\n","frontmatter":{"date":"September 29, 2015","updated_date":null,"title":"Using Facebook Graph API After Login","tags":["Facebook","Graph API"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/eb14899edcba74a8eeaae71d14ebf399/6d161/fb-feat-img-150x150.png","srcSet":"/static/eb14899edcba74a8eeaae71d14ebf399/6d161/fb-feat-img-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/implement-facebook-social-login/"},"html":"

In this post I will show you how easy it is to implement Facebook social login to a web page using Facebook’s JavaScript SDK. The nice thing about Facebook social login is the great documentation and instructions already provided at  Facebook Login for the Web. There is also a code snippet that is provided to you by Facebook to implement their login system. I have gone ahead and customized this code and have provided a codepen here which I will explain.

\n

The first thing you’ll need to do is create a Facebook app since an app Id is required to implement login using Facebook. You can create a facebook app by going to  http://developers.facebook.com. You'll notice in the codepen nothing is displayed since I have not added a app Id. You'll need to remember to replace this placeholder with your own Facebook app Id once you have created your Facebook app.

\n

Next, we’ll implement login using Facebook. All we need to do is copy and paste the code provided to us by Facebook to create the Facebook social login and replace the placeholder with your own Facebook app id. I will be explaining the same code with my customization provided in the codepen below.

\n

Let's add the Facebook login interface. You'll want to place this code in the body section of your html code.

\n
<!--\n\n\n-->
\n

Next, you'll notice this section of code at the end of the JavaScript section. This code snippet loads the Facebook SDK JavaScript asynchronously. It also provides the JavaScript library which is used to render your Facebook login interface.

\n
// Load the SDK asynchronously\n(function(d, s, id) {\n    var js, fjs = d.getElementsByTagName(s)[0];\n    if (d.getElementById(id)) return;\n    js = d.createElement(s); js.id = id;\n    js.src = "//connect.facebook.net/en_US/sdk.js";\n    fjs.parentNode.insertBefore(js, fjs);\n}(document, 'script', 'facebook-jssdk'));
\n

Now we just need to replace the app id placeholder with the app id of your app you created in the beginning. You’ll find the placeholder in this line appId : '{your-app-id}'. This function is just above loading JavaScript asynchronously.

\n
window.fbAsyncInit = function() {\n    FB.init({\n        appId : '{your-app-id}',\n        cookie : true, // enable cookies to allow the server to access the session\n        xfbml : true, // parse social plugins on this page\n        version : 'v2.1' // use version 2.1\n    });\n\n    // Now that we've initialized the JavaScript SDK, we call FB.getLoginStatus().\n    // This function gets the state of the person visiting this page.\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n};
\n

Next we'll add the function that handles the response and alters the page contents based on the type of response. I have this function located at the very top of the scripts section.

\n
// This is called with the results from from FB.getLoginStatus().\nfunction statusChangeCallback(response) {\n    // The response object is returned with a status field that Let's the app know the current login status of the person.\n    if (response.status === 'connected') {\n        console.log('Welcome! Fetching your information.... ');\n        FB.api('/me', function(response) {\n            console.log('Successful login for: ' + response.name);\n            document.getElementById('status').innerHTML = 'Thanks for logging in, ' + response.name + '!';\n        });\n    } else if (response.status === 'not_authorized') {\n        // The person is logged into Facebook, but not your app.\n        document.getElementById('status').innerHTML = 'Please log ' + 'into this app.';\n    } else {\n       // The person is not logged into Facebook, so we're not sure if they are logged into this app or not.\n       document.getElementById('status').innerHTML = 'Please log ' + 'into Facebook.';\n    }\n}
\n

As you can see, the above function receives a response variable and checks it's status. If it is connected it fetches the logged in users info and outputs this information in the console of your browser, that area is where you could build more onto this script to handle the data. You'll also notice the not_authorized status. When the login is not authorized, this function changed the html on your page to ask you to log in. But how does this function get used? In this next function this is handled when someone clicked on the Facebook button on the page. Notice the onlogin=\"checkLoginState(); in your body html code for the Facebook button.

\n
// This function is called when someone finishes with the Login Button.\nfunction checkLoginState() {\n    FB.getLoginStatus(function(response) {\n        statusChangeCallback(response);\n    });\n}
\n

Now if you save this page as index.html and open it in a browser you should see the Facebook Login button. You can use the code provided by facebook at the link listed above or you can used the codepen code that I have altered to make it a bit shorter for explanation.

\n

Facebook Page example

\n

\n \n \n

\n

This will then crawl your page and display some useful information on the currently scraped details and warnings and error messages. It also give you the option at this point to refresh this scrapped data with any changes that you have made to our existing cached details.

\n

Google Structured Data Testing Tool

\n

Google uses a combination of a few different methods in order to define the customized sharing options:

\n\n

The structured data testing tool allows you to view what Google has interpreted from your webpage. Start by entering the URL of the page that you are sharing and click on preview.

\n

\n build a share button tool.

\n

Insert the URL in the \"URL to be shared field\" and click on Get Code. This will generate a sample share icon in the preview section.

\n

\n \n \n

\n

To test the share functionality click on the generated icon to display the share interface as determined by the provided URL.

\n

Twitter Button Generator Tool

\n

Twitter also uses multiple systems to determine the content that will be tweeted by the tweet buttons. The most commonly used meta tags, which allow you to set any of the available customizable fields in your tweet.

\n

To test the tweet you can use Twitters button generator. Select the \"Share a link\" option under \"Choose a button\".

\n

\n \n \n

\n

Input your site URL in the \"share URL\" field, This will cause the Tweet button under \"Preview and code\" to be updated.

\n

Click on the generated button to see a sample of the Tweet that has be defined by your URL.

\n","frontmatter":{"date":"February 09, 2015","updated_date":null,"title":"Social Provider Social Sharing Troubleshooting Resources","tags":["Engineering","SocialSharing","Facebook","Google","LinkedIn"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/ee604/social.png","srcSet":"/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/69585/social.png 200w,\n/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/497c6/social.png 400w,\n/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/ee604/social.png 800w,\n/static/ca57c9bd893c5ad9ae9e68ee6a62ddd8/f3583/social.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/social-media-colors-hex/"},"html":"

Are you tired of eye dropping (or worse… guessing) the colors of every social network you like? Fear not my friend, I have searched the webs to find our beloved social media colors and listed it out in hex form.

\n

Facebook #3b5998

\n

Google Plus #F90101

\n

Linkedin #007bb6

\n

Twitter #55acee

\n

Yahoo #400090

\n

Amazon #FF9900

\n

Aol #066cb1

\n

Delicious #67b6e3

\n

Digg #486ca3

\n

Disqus #35a8ff

\n

Foursquare #1cafec

\n

Github #181616

\n

Google #0266C8

\n

Hyves #f9a539

\n

Instagram #406e94

\n

Kaixin #bb0e0f

\n

Live #004C9A

\n

Livejournal #3770a3

\n

Mixi #d1ad5a

\n

Myspace #313131

\n

Odnoklassnikki #f69324

\n

Orange #ff6600

\n

Paypal #13487b

\n

Persona #e0742f

\n

Pinterest #cb2128

\n

QQ #009BD9

\n

Reddit #ff5700

\n

Renren #005baa

\n

Salesforce #219CDF

\n

Stackexchange #4ba1d8

\n

Steam Community #666666

\n

Tumblr #32506d

\n

Verisign #0261a2

\n

Virgilio #eb6b21

\n

Vkontakte #45668e

\n

Sinaweibo #bb3e3e

\n

WordPress #21759c

\n

Mailru #1897e6

\n

Xing #007072

\n

Openid #f7921c

\n

Did I miss anything? Add it in the comments and help build this awesome list.

\n","frontmatter":{"date":"February 06, 2015","updated_date":null,"title":"Social Media Colors in Hex","tags":["SocialMedia","Facebook","Google","Color"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/d2cb1d5026eb68986f33462424c006a3/6d161/darrylblog1-150x150.png","srcSet":"/static/d2cb1d5026eb68986f33462424c006a3/6d161/darrylblog1-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]}},"pageContext":{"tag":"Facebook"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}