{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/160","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"What are they? cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is…","fields":{"slug":"/engineering/intro-curl-fsockopen/"},"html":"<p><strong>What are they?</strong></p>\n<p>cURL and Fsock are both methods used to communicate with different types of servers using communication protocols. Fsock is included in PHP and cURL is a library that can be installed on a server or utilized on many different platforms.</p>\n<p><strong>Example:</strong></p>\n<p><a href=\"http://php.net/manual/en/book.curl.php\">cURL</a>-</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!----&gt;</span></span></code></pre>\n<p><a href=\"http://php.net/manual/en/function.fsockopen.php\">Fsock</a>-</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!--&lt;?php</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">$fp</span><span class=\"mtk1\"> = </span><span class=\"mtk11\">fsockopen</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&quot;www.example.com&quot;</span><span class=\"mtk1\">, </span><span class=\"mtk7\">80</span><span class=\"mtk1\">, </span><span class=\"mtk12\">$errno</span><span class=\"mtk1\">, </span><span class=\"mtk12\">$errstr</span><span class=\"mtk1\">, </span><span class=\"mtk7\">30</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">if</span><span class=\"mtk1\"> (!</span><span class=\"mtk12\">$fp</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&quot;</span><span class=\"mtk12\">$errstr</span><span class=\"mtk8\"> (</span><span class=\"mtk12\">$errno</span><span class=\"mtk8\">)</span><span class=\"mtk6\">\\n</span><span class=\"mtk8\">&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">} </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">$out</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&quot;GET / HTTP/1.1</span><span class=\"mtk6\">\\r\\n</span><span class=\"mtk8\">&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">$out</span><span class=\"mtk1\"> .= </span><span class=\"mtk8\">&#39;Host: www.example.com\\r\\n&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">$out</span><span class=\"mtk1\"> .= </span><span class=\"mtk8\">&quot;Connection: Close</span><span class=\"mtk6\">\\r\\n\\r\\n</span><span class=\"mtk8\">&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">fwrite</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$fp</span><span class=\"mtk1\">, </span><span class=\"mtk12\">$out</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">while</span><span class=\"mtk1\"> (!</span><span class=\"mtk11\">feof</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$fp</span><span class=\"mtk1\">)) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk11\">fgets</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$fp</span><span class=\"mtk1\">, </span><span class=\"mtk7\">128</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">fclose</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$fp</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">?&gt;--&gt;</span></span></code></pre>\n<p><strong>How to check if you have cURL enabled</strong></p>\n<p>Run phpinfo() to see if cURL is enabled on your server then navigate to the cURL section. You will see the setting cURL support - enabled or disabled.</p>\n<p>Or use the php script below to create a curl_check.php file</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!--&lt;?php</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Script to test if the cURL extension is installed on this server</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Define function to test</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">_is_curl_installed</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk11\">in_array</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;curl&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk11\">get_loaded_extensions</span><span class=\"mtk1\">())) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">return</span><span class=\"mtk1\"> </span><span class=\"mtk4\">false</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk3\">// Output text to user based on test</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk11\">_is_curl_installed</span><span class=\"mtk1\">()) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;cURL is installed on this server&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">} </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">echo</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;cURL is NOT installed on this server&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">?&gt;--&gt;</span></span></code></pre>\n<p>After saving this file as curl_check.php load it on a server installed with PHP and run the path yourpath/curl_check.php you will see a message shown that notifies you if cURL is enabled or disabled</p>\n<p>Check if fsockopen function exists</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk1\">&lt;!----&gt;</span></span></code></pre>\n<p>Normally, by default your server will have cURL enabled and ready to use on your server. It is the most commonly used method to communicate to different types of servers. If you're ever having a problem communicating with a server run one of the above checks to verify your cURL and Fsock is working correctly.</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 .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk6 { color: #D7BA7D; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n</style>","frontmatter":{"date":"March 09, 2015","updated_date":null,"description":null,"title":"An Intro to Curl & Fsockopen","tags":["curl","Fsock"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/7fe25a24548797c9b1e2356441746e19/630fb/fsock-and-curl.png","srcSet":"/static/7fe25a24548797c9b1e2356441746e19/69585/fsock-and-curl.png 200w,\n/static/7fe25a24548797c9b1e2356441746e19/630fb/fsock-and-curl.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing…","fields":{"slug":"/engineering/enqueuing-scripts-wordpress/"},"html":"<p>In this tutorial I want to explain the different methods to enqueue scripts and style sheets in WordPress. This can be a really confusing process for new WordPress developers.</p>\n<p>There are three different areas that a developer can enqueue scripts for; the first is the client side, the second is the admin side and the third is the login pages.</p>\n<p>Each of these areas uses a specific hook to enqueue scripts to use in that area. For example, if a script was enqueued using the <a href=\"http://codex.wordpress.org/Plugin_API/Action_Reference/login_enqueue_scripts\">login_enqueue_scripts</a> hook that script would not be loaded in the admin area. This allows WordPress to load only the scripts needed for that specific section. Optimization!</p>\n<p>When you don’t enqueue scripts using these hooks and instead use the <code>&#x3C;script></code> tag, it can cause the script to be loaded every time you load the site, admin area or login page. This can cause conflicts with other scripts, plugins or themes. WordPress takes care of these problems when you use the hooks intended.</p>\n<p>An example of the three enqueuing hooks are below:</p>\n<p><strong>wp_enqueue_scripts hook – Front End</strong></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">themeslug_enqueue_style</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_style</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;core&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;style.css&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">false</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">themeslug_enqueue_script</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_script</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;my-js&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;filename.js&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">false</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;wp_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;themeslug_enqueue_style&#39;</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;wp_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;themeslug_enqueue_script&#39;</span><span class=\"mtk1\"> );</span></span></code></pre>\n<p><strong>admin_enqueue_scripts hook – Admin area</strong></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">load_custom_wp_admin_style</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_register_style</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;custom_wp_admin_css&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk11\">get_template_directory_uri</span><span class=\"mtk1\">() . </span><span class=\"mtk8\">&#39;/admin-style.css&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">false</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;1.0.0&#39;</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_style</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;custom_wp_admin_css&#39;</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">my_enqueue</span><span class=\"mtk1\">(</span><span class=\"mtk12\">$hook</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> ( </span><span class=\"mtk8\">&#39;edit.php&#39;</span><span class=\"mtk1\"> != </span><span class=\"mtk12\">$hook</span><span class=\"mtk1\"> ) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk15\">return</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_script</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;my_custom_script&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk11\">plugin_dir_url</span><span class=\"mtk1\">( </span><span class=\"mtk4\">__FILE__</span><span class=\"mtk1\"> ) . </span><span class=\"mtk8\">&#39;myscript.js&#39;</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;admin_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;load_custom_wp_admin_style&#39;</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;admin_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;my_enqueue&#39;</span><span class=\"mtk1\"> );</span></span></code></pre>\n<p><strong>login_enqueue_scripts hook – Login pages</strong></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">themeslug_enqueue_style</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_style</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;core&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;style.css&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">false</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">themeslug_enqueue_script</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_script</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;my-js&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;filename.js&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">false</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;login_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;themeslug_enqueue_style&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk7\">10</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;login_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;themeslug_enqueue_script&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk7\">1</span><span class=\"mtk1\"> );</span></span></code></pre>\n<p>If you are calling the same script in many different areas you can register the script or stylesheet first and then use it when needed in your plugin. In the above examples you’ll notice the function being called is enqueuing a script or a style only and not registering a script or a style. When you register first it allows that script or style to be called in the area it was registered in when you enqueue it. Here’s an example of registering scripts first.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"php\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk11\">add_action</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;admin_enqueue_scripts&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;my_plugin_admin_scripts&#39;</span><span class=\"mtk1\"> );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">my_plugin_admin_scripts</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">/* Register our script. */</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_register_script</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;my-plugin-script&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk11\">plugins_url</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;/script.js&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">__FILE__</span><span class=\"mtk1\"> ) );</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk11\">wp_enqueue_script</span><span class=\"mtk1\">( </span><span class=\"mtk8\">&#39;my-plugin-script&#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>In the example above you can see first I have registered the script then used wp_enqueue_script to enqueue it. You don’t need to enqueue the script directly after registering as a practice, however after registering the script you can enqueue it on pages you require it. If you have registered the script or style using wp_enqueue_scripts it will only be available on the front end of your site and not the admin pages or the login pages.</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 .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk1 { color: #D4D4D4; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk3 { color: #6A9955; }\n</style>","frontmatter":{"date":"March 02, 2015","updated_date":null,"description":null,"title":"Enqueuing Scripts in WordPress","tags":["WordPress","PHP"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/1337250d37d50d7e6e06d9a2e5f59cbd/d8815/wordpress.png","srcSet":"/static/1337250d37d50d7e6e06d9a2e5f59cbd/69585/wordpress.png 200w,\n/static/1337250d37d50d7e6e06d9a2e5f59cbd/497c6/wordpress.png 400w,\n/static/1337250d37d50d7e6e06d9a2e5f59cbd/d8815/wordpress.png 750w","sizes":"(max-width: 750px) 100vw, 750px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"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…","fields":{"slug":"/engineering/implement-facebook-social-login/"},"html":"<p>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  <a href=\"https://developers.facebook.com/docs/facebook-login/login-flow-for-web/v2.2\">Facebook Login for the Web</a>. 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 <a href=\"http://codepen.io/zoie-loginradius/pen/JoLYrJ\">here</a> which I will explain.</p>\n<p>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  <a href=\"http://developers.facebook.com/\">http://developers.facebook.com</a>. 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.</p>\n<p>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.</p>\n<p>Let's add the Facebook login interface. You'll want to place this code in the body section of your html code.</p>\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;!--</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">--&gt;</span></span></code></pre>\n<p>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.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"1\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// Load the SDK asynchronously</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">d</span><span class=\"mtk1\">, </span><span class=\"mtk12\">s</span><span class=\"mtk1\">, </span><span class=\"mtk12\">id</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk4\">var</span><span class=\"mtk1\"> </span><span class=\"mtk12\">js</span><span class=\"mtk1\">, </span><span class=\"mtk12\">fjs</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">d</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementsByTagName</span><span class=\"mtk1\">(</span><span class=\"mtk12\">s</span><span class=\"mtk1\">)[</span><span class=\"mtk7\">0</span><span class=\"mtk1\">];</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">d</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk12\">id</span><span class=\"mtk1\">)) </span><span class=\"mtk15\">return</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">js</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">d</span><span class=\"mtk1\">.</span><span class=\"mtk11\">createElement</span><span class=\"mtk1\">(</span><span class=\"mtk12\">s</span><span class=\"mtk1\">); </span><span class=\"mtk12\">js</span><span class=\"mtk1\">.</span><span class=\"mtk12\">id</span><span class=\"mtk1\"> = </span><span class=\"mtk12\">id</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">js</span><span class=\"mtk1\">.</span><span class=\"mtk12\">src</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&quot;//connect.facebook.net/en_US/sdk.js&quot;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">fjs</span><span class=\"mtk1\">.</span><span class=\"mtk12\">parentNode</span><span class=\"mtk1\">.</span><span class=\"mtk11\">insertBefore</span><span class=\"mtk1\">(</span><span class=\"mtk12\">js</span><span class=\"mtk1\">, </span><span class=\"mtk12\">fjs</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}(</span><span class=\"mtk12\">document</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;script&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk8\">&#39;facebook-jssdk&#39;</span><span class=\"mtk1\">));</span></span></code></pre>\n<p>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.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"2\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk12\">window</span><span class=\"mtk1\">.</span><span class=\"mtk11\">fbAsyncInit</span><span class=\"mtk1\"> = </span><span class=\"mtk4\">function</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">init</span><span class=\"mtk1\">({</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">appId :</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;{your-app-id}&#39;</span><span class=\"mtk1\">,</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">cookie :</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">, </span><span class=\"mtk3\">// enable cookies to allow the server to access the session</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">xfbml :</span><span class=\"mtk1\"> </span><span class=\"mtk4\">true</span><span class=\"mtk1\">, </span><span class=\"mtk3\">// parse social plugins on this page</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">version :</span><span class=\"mtk1\"> </span><span class=\"mtk8\">&#39;v2.1&#39;</span><span class=\"mtk1\"> </span><span class=\"mtk3\">// use version 2.1</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    });</span></span>\n<span class=\"grvsc-line\"></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// Now that we&#39;ve initialized the JavaScript SDK, we call FB.getLoginStatus().</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// This function gets the state of the person visiting this page.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getLoginStatus</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk11\">statusChangeCallback</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">};</span></span></code></pre>\n<p>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.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"3\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// This is called with the results from from FB.getLoginStatus().</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">statusChangeCallback</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk3\">// The response object is returned with a status field that Let&#39;s the app know the current login status of the person.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">status</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;connected&#39;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Welcome! Fetching your information.... &#39;</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">api</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;/me&#39;</span><span class=\"mtk1\">, </span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk10\">console</span><span class=\"mtk1\">.</span><span class=\"mtk11\">log</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;Successful login for: &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">name</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">            </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;status&#39;</span><span class=\"mtk1\">).</span><span class=\"mtk12\">innerHTML</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;Thanks for logging in, &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">name</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&#39;!&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> </span><span class=\"mtk15\">if</span><span class=\"mtk1\"> (</span><span class=\"mtk12\">response</span><span class=\"mtk1\">.</span><span class=\"mtk12\">status</span><span class=\"mtk1\"> === </span><span class=\"mtk8\">&#39;not_authorized&#39;</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk3\">// The person is logged into Facebook, but not your app.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;status&#39;</span><span class=\"mtk1\">).</span><span class=\"mtk12\">innerHTML</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;Please log &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&#39;into this app.&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    } </span><span class=\"mtk15\">else</span><span class=\"mtk1\"> {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">       </span><span class=\"mtk3\">// The person is not logged into Facebook, so we&#39;re not sure if they are logged into this app or not.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">       </span><span class=\"mtk12\">document</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getElementById</span><span class=\"mtk1\">(</span><span class=\"mtk8\">&#39;status&#39;</span><span class=\"mtk1\">).</span><span class=\"mtk12\">innerHTML</span><span class=\"mtk1\"> = </span><span class=\"mtk8\">&#39;Please log &#39;</span><span class=\"mtk1\"> + </span><span class=\"mtk8\">&#39;into Facebook.&#39;</span><span class=\"mtk1\">;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    }</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>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.</p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"javascript\" data-index=\"4\"><code class=\"grvsc-code\"><span class=\"grvsc-line\"><span class=\"mtk3\">// This function is called when someone finishes with the Login Button.</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk4\">function</span><span class=\"mtk1\"> </span><span class=\"mtk11\">checkLoginState</span><span class=\"mtk1\">() {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    </span><span class=\"mtk12\">FB</span><span class=\"mtk1\">.</span><span class=\"mtk11\">getLoginStatus</span><span class=\"mtk1\">(</span><span class=\"mtk4\">function</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">) {</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">        </span><span class=\"mtk11\">statusChangeCallback</span><span class=\"mtk1\">(</span><span class=\"mtk12\">response</span><span class=\"mtk1\">);</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">    });</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">}</span></span></code></pre>\n<p>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.</p>\n<p><strong>Facebook Page example</strong></p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 66.15384615384615%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAIAAAAmMtkJAAAACXBIWXMAAAsTAAALEwEAmpwYAAABpklEQVQoz41SXU/bMBTlH/MPeOGJIU2kbKA+VGnawjRtE6N7AglooZSJj4mhCqQW+pWI0dAojuO0tuMPbtIJCQQF6/j6+spHxz7XMzv11v5xm5BQcNZwSbbhFjrYvEa5y4HZuLUu/1lXA+vqDpJCyyv1SbHt727ttLuO1npGilgKQSnTWp31htmv+9kvB59L1dW1SsbaM6zKUn43k68Y+SQ3rGqmUF3I7R02BwlZKwWLSuNfB5XK5+a3E/PHaXHjz+r6749mzbAOl1IYKZYL9Q+5g6OWm5AntGRq3cdMyEk6bXCpHMJfIMdAVv+HkDLEmHNOGYdcKiXTOhUSTr6qrKSEaN80P83Nfl8rbm7X3Xvv8XWgbL9KBk0hYOt02yuL85s/f5W3akPPf5sM1w5QMHBdhILReDwaM99HlNIoIhjjMAwjEoGCHbI3DIuF9gn3gghFgosnhtmYvdftZyUaTzUskY1jzsBpzhhLA5NCTFPuBBTaAP0QSrE4pnwCPonQLije3aPaeb85jJ6TbwnvYgpmAOAbPEHI7ZB30ejC8convR4aw/kHCSvQB6PazaAAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"zoie-facebookblog\"\n        title=\"zoie-facebookblog\"\n        src=\"/static/1342c83d19182e08db1a63a67c1c364f/e5715/Zoie-FacebookBlog.png\"\n        srcset=\"/static/1342c83d19182e08db1a63a67c1c364f/a6d36/Zoie-FacebookBlog.png 650w,\n/static/1342c83d19182e08db1a63a67c1c364f/e5715/Zoie-FacebookBlog.png 768w,\n/static/1342c83d19182e08db1a63a67c1c364f/3cd52/Zoie-FacebookBlog.png 857w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Log In and look at the console output. You’ll now see some basic info including id, email, first_name, gender, last_name, link, locale, name, timezone, updated_time, verified</p>\n<p>That is all there is to it. Of course, there are many more scopes you can use which allow you to collect more data currently this script has a scope of public_profile and email, features and API calls you can play with to create your desired app just explore the Facebook documentation to discover all these features.</p>\n<p>Want to extend your social systems with additional provider functionality check out these posts on <a href=\"/integrate-linkedin-social-login-website/\" title=\"Integrating LinkedIn Social Login on a Website\">LinkedIn social login</a> and <a href=\"/integrating-twitter-social-login/\" title=\"Integrating Twitter Social Login\">Twitter social login</a>.</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 .mtk3 { color: #6A9955; }\n  .dark-default-dark .mtk4 { color: #569CD6; }\n  .dark-default-dark .mtk12 { color: #9CDCFE; }\n  .dark-default-dark .mtk11 { color: #DCDCAA; }\n  .dark-default-dark .mtk7 { color: #B5CEA8; }\n  .dark-default-dark .mtk15 { color: #C586C0; }\n  .dark-default-dark .mtk8 { color: #CE9178; }\n  .dark-default-dark .mtk10 { color: #4EC9B0; }\n</style>","frontmatter":{"date":"February 24, 2015","updated_date":null,"description":null,"title":"How to Implement Facebook Social Login","tags":["Facebook","SocialLogin"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/4b7ae02dddefcf40eee22303babb5a22/630fb/fb-feat-img.png","srcSet":"/static/4b7ae02dddefcf40eee22303babb5a22/69585/fb-feat-img.png 200w,\n/static/4b7ae02dddefcf40eee22303babb5a22/630fb/fb-feat-img.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Zoie Carnegie","github":null,"avatar":null}}}},{"node":{"excerpt":"If you have stored a GUID through the C# driver to mongoDB and now you want to run a query by GUID, you can't query directly because mongoDB…","fields":{"slug":"/engineering/guid-query-mongo-shell/"},"html":"<p>If you have stored a GUID through the C# driver to mongoDB and now you want to run a query by GUID, you can't query directly because mongoDB doesn't recognize GUID so when we query through mongo shell no result will be returned. To use the power of mongo shell for querying data on mongo by GUID, you should follow these steps.</p>\n<p><strong>1. Convert GUID data to Base64</strong></p>\n<p>Convert you GUID data to base64 , you can use any online tool for this. </p>\n<p>So suppose your GUID is: 00112233-4455-6677-8899-aabbccddeeff</p>\n<p>Then the base 64 version will be: MyIRAFVEd2aImaq7zN3u/w==</p>\n<p><strong>2. Query by BinData object in mongo shell</strong></p>\n<pre class=\"grvsc-container dark-default-dark\" data-language=\"\" data-index=\"0\"><code class=\"grvsc-code\"><span class=\"grvsc-line\">db.Users.find({&quot;useUniqueId&quot;: new BinData(3,&quot;MyIRAFVEd2aImaq7zN3u/w==&quot;)}).limit(1)</span></code></pre>\n<p>Actually BinData constructor takes 2 parameters:</p>\n<p>New BinData(subtype,data)</p>\n<ul>\n<li>Subtype: represent subdata type like we pass 3 for UUID or GUID</li>\n<li>Data: base64 encoded string data</li>\n</ul>\n<p>mongoDB's C# driver stores data to mongo by converting it into binary data rather than string.</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</style>","frontmatter":{"date":"February 23, 2015","updated_date":null,"description":null,"title":"GUID Query Through Mongo Shell","tags":["Engineering","GUID","Mongo"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/ea7595df20b2f7c29ed276dc27b05c9b/630fb/mongo-db-guid.png","srcSet":"/static/ea7595df20b2f7c29ed276dc27b05c9b/69585/mongo-db-guid.png 200w,\n/static/ea7595df20b2f7c29ed276dc27b05c9b/630fb/mongo-db-guid.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience…","fields":{"slug":"/engineering/integrate-linkedin-social-login-website/"},"html":"<p>It is important nowadays to allow your user to sign in to your website with their social network account. It provides a better experience for your user and also lets you obtain more information about your user. The most welcomed social platforms are Facebook, Twitter, LinkedIn and Google. In this article, we will cover how to integrate LinkedIn social login authentication into your website.</p>\n<h2> Create a LinkedIn App </h2>\n<p>Creating an app for the social platform is always the first step, no matter which platform you are working with. In this case, the created app will service the LinkedIn social login. Basically, you are creating a gate to let your user go through this gate and access the service, and in this gate, you can specify the permissions and the preferences you want to grant to your user. You can refer to the instructions <a href=\"https://www.loginradius.com/docs/api/v2/admin-console/social-provider/app-reviews/linkedin-app-review/\">here</a> for clear instructions on how to create a LinkedIn social login app.</p>\n<h2> Set your App </h2>\n<p>After creating the app, you need to set the \"JavaScript API domain\" field for your app.  In that field, fill in your website URL. Here we have used <code>http://localhost</code> for this article.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 56.769230769230774%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABLElEQVQoz3VSS26FMAzk/teo1EVP0mWX1eu2lXh8QsjPSQih40AorfoGsAL22GObJqXFGGOtE0JIKYnIFVh8co4KQgieQWzKMca4bVuzLIvRxlk3FVyZ5cAZ/E6l4xBOcs55T4woVEZ9pBiFGMdhLMDrfEDhQRjiDzIeyEYQHCCD03f9JIQ2DARB2vYADeRYZ6mo0lqj8jD0yFLF881zIAd1+QImBz8L8azUi1JP1ryp2aEHONaKlNJZ6so8ZJ9AXGWwyZktZP8p+FMZPmsslgV5aLu93/uhB7quk3LSBVR3VjZAaMUXdQ2q8Q5wkV9jSIEwJ4TwuLQuv4DBeP8fWG2G7edk31sZ05p/B8F7SM0Z01fWO19XtdUebu30+vG1b/LRejAKH5e48BS/AQlsfxPcUy0zAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"luciusblog2-1\"\n        title=\"luciusblog2-1\"\n        src=\"/static/357c8cb91c4575f5f4f4947f81c6ee60/e5715/luciusblog2-1.png\"\n        srcset=\"/static/357c8cb91c4575f5f4f4947f81c6ee60/a6d36/luciusblog2-1.png 650w,\n/static/357c8cb91c4575f5f4f4947f81c6ee60/e5715/luciusblog2-1.png 768w,\n/static/357c8cb91c4575f5f4f4947f81c6ee60/36c33/luciusblog2-1.png 946w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<h2>Implement the script in your html file</h2>\n<p>Now you are ready to code! First, put this JavaScript code snippet inside your head tag:</p>\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;!--&lt;</span><span class=\"mtk12\">script</span><span class=\"mtk1\"> </span><span class=\"mtk12\">type</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;text/javascript&quot;</span><span class=\"mtk1\"> </span><span class=\"mtk12\">src</span><span class=\"mtk1\">=</span><span class=\"mtk8\">&quot;http://platform.linkedin.com/in.js&quot;</span><span class=\"mtk1\">&gt;</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">api_key: </span><span class=\"mtk12\">your_api_key_goes_here</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">--&gt;</span></span></code></pre>\n<p>You can find your API key inside your application, the first entry under OAuth Keys \"Consumer Key / API Key.\"  This script is used to load the LinkedIn script into your website, and it will not display anything on your page, at least not the frontend.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 43.69230769230769%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAIAAAC9o5sfAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA7ElEQVQoz4VQy07DMBDM/39JD6CC4Ae49UChEqpUgUQjcohRYyd2bK/f7lJDUSlK57Ae2zv2zlT5B6D1KARjTI6jt+YPUkr5DFVZvPdCCACDRBsDPhwQnQ+FxhjTGb7FyDpK25ZwRldE3Dew7i0e50lUR6a1Zqwfut1jQ6+28rYeF0Qtqe/M1xNpWozGBs6tli+EzzbdzSu9ex8ePl0L8YIYXVlr0SHyN9JfP23nz/Wy3uXJ0X/FSilKafPRKCVzcMHoGDxeOecwyxI4AEgpsfkksGNsWDFYqTQYW7YHMcdarOEf/3g+nfBCzgV7IgEMx8Lgr7cAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"luciusblog2-2\"\n        title=\"luciusblog2-2\"\n        src=\"/static/35eb48de141166a71e21d580a6aaf5ce/e5715/luciusblog2-2.png\"\n        srcset=\"/static/35eb48de141166a71e21d580a6aaf5ce/a6d36/luciusblog2-2.png 650w,\n/static/35eb48de141166a71e21d580a6aaf5ce/e5715/luciusblog2-2.png 768w,\n/static/35eb48de141166a71e21d580a6aaf5ce/34e70/luciusblog2-2.png 1053w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Next, you will need to add another script inside your body tag. It is actually used to display the sign-in button.</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;!--</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk12\">Hello</span><span class=\"mtk1\">, ; .</span></span>\n<span class=\"grvsc-line\"><span class=\"mtk1\">--&gt;</span></span></code></pre>\n<p>If everything has been implemented correctly, load your page, and you will see this lovely button appear on your site.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 143px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 19.58041958041958%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAECAIAAAABPYjBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA2klEQVQI1z3I72uCQBzHcf/mQX9Bf8Ce92wDQ8hGLSJya0ZFRr8f1GS5lkPFO0/vLgd1MvXSe9D7Cy8+fKXRF5oe0CX555xnWZbnuUDIy4qdpqn4cUFZKpKq7f2DvN0f3d8fKwgjCFAAIfABxthzbOv76HoQRyGC/ulkez5wHNc0P8MwujImPXZ3leelsTb7r02l0ehp4/nMmOh64Yui9N8Hw6GxmRuz8aDZ7qiq2upocl1eL1ZXlki1t8PTh+UH+EwpAICQMy2uLL6LEMKExvEfpYSWIyaYMMZu7nLSNStwqCAAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"luciusblog2-3\"\n        title=\"luciusblog2-3\"\n        src=\"/static/9acfd927f44d45c20bb5213ecbb81e3f/a6b04/luciusblog2-3.png\"\n        srcset=\"/static/9acfd927f44d45c20bb5213ecbb81e3f/a6b04/luciusblog2-3.png 143w\"\n        sizes=\"(max-width: 143px) 100vw, 143px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Want to extend your social systems with additional provider functionality? Check out this post on <a href=\"https://www.loginradius.com/blog/engineering/integrating-twitter-social-login/\" title=\"Integrating Twitter Social Login\">Twitter social login</a>.</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>","frontmatter":{"date":"February 11, 2015","updated_date":null,"description":null,"title":"Integrating LinkedIn Social Login on a Website","tags":["LinkedIn","SocialLogin"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/a4e74ae24ffd6c107fe96587b9ac68eb/630fb/linkedin-feat-img.png","srcSet":"/static/a4e74ae24ffd6c107fe96587b9ac68eb/69585/linkedin-feat-img.png 200w,\n/static/a4e74ae24ffd6c107fe96587b9ac68eb/630fb/linkedin-feat-img.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Lucius Yu","github":null,"avatar":null}}}},{"node":{"excerpt":"Social Sharing is an extremely powerful tool to expand your user base and product recognition, customizing and implementing this to be…","fields":{"slug":"/engineering/social-provider-social-sharing-troubleshooting-resources/"},"html":"<p>Social Sharing is an extremely powerful tool to expand your user base and product recognition, customizing and implementing this to be efficient on your site can be quiet difficult. Most of the most relevant Social Providers have setup testing and troubleshooting tools that can help to identify where you have gone astray. Below is a brief overview of some useful tools that have been setup to assist with implementing custom Social Sharing options.</p>\n<p><strong>Facebook Open Graph Object Debugger</strong></p>\n<p>Setting up custom sharing with Facebook uses Facebook Open Graph meta tags, which are cached on Facebooks end and can lead to some confusion when making updates to your customizations. In order to identify the cached details that are being used for your implementation Facebook provides the <a href=\"https://developers.facebook.com/tools/debug/\">Open Graph Debugger tool</a>. All you need to do is input your sites URL and click on Debug.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 33.23076923076923%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsTAAALEwEAmpwYAAABEUlEQVQY031OzUoDMRjMYwp6UevFalkQFaXIVj316mUREW89aGmFevIhfAAvxUtpu7v52fxsNsnGL7vFi+gwmY9MmMmH4rv38+Hb0WACenw9PR3Oejev3Xi8e3Lf7T91zh6i2+lhPNm/fDnoj/cunrd6yXaU7ETJ1eARzb8Wi2XOComJoFRgGpRQjgnPcQEKPgGT/VACGZMZ4UgIriQgiFJKSAm01vraA+s/4L2vqgotUyaVts4aYyAT1BjnXP0vIKx1hUazj8/5Cn6xAc66hg1M6NqUbnobbY0QpgFsnWas4AKWD5srISRcwChLXcLRupnhptoBhDDEMGVpTlcpyQnDpGh1nRF4gAqpSmj8Tcb5N7DNejePYCDlAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"karlblog1-1_001\"\n        title=\"karlblog1-1_001\"\n        src=\"/static/d11e7e649e1674275bddfee5448235a1/e5715/karlblog1-1_001.png\"\n        srcset=\"/static/d11e7e649e1674275bddfee5448235a1/a6d36/karlblog1-1_001.png 650w,\n/static/d11e7e649e1674275bddfee5448235a1/e5715/karlblog1-1_001.png 768w,\n/static/d11e7e649e1674275bddfee5448235a1/09e48/karlblog1-1_001.png 974w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>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.</p>\n<p><strong>Google Structured Data Testing Tool</strong></p>\n<p>Google uses a combination of a few different methods in order to define the customized sharing options:</p>\n<ul>\n<li>Structured Data Markup- HTML markup detailed on <a href=\"http://schema.org/\">Schema.org</a>.</li>\n<li>Open Graph Tags- Turn your page into a rich data object, commonly used to customize Facebook sharing details. Information on the markup is available on <a href=\"http://ogp.me/\">ogp.me</a></li>\n<li>Title or Meta Description- HTML attributes that provide details on the site.</li>\n<li>Googles best guess- If none of the above are included, Google will crawl your page and try to interpret the most suitable details to include in the share.</li>\n</ul>\n<p>The <a href=\"http://www.google.com/webmasters/tools/richsnippets\">structured data testing tool</a> 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.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 34%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAoUlEQVQY05WOQQ7CMAwE8/93cOUXnHgDSCCEKGqD1MTBjh0nJC0CbrQjH6y1V7vmernfb53zMI5u7RgCwIdl74RZ8xtVTQswEknxWYRLzkQUPAQIhFQW0JLBWt/36H2MXJ1VEBb9krQUcSOej7HvWGpFngua+Zw0z48izZZ/0eoteDoM243f7wK2uCq3ZAAabJj21RhJGSn9/ZsqpDK1+PAC4g+ZJ6XuOd4AAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"karlblog1-2\"\n        title=\"karlblog1-2\"\n        src=\"/static/dd1f70043ff6d04f5929ee89bc99618a/e5715/karlblog1-2.png\"\n        srcset=\"/static/dd1f70043ff6d04f5929ee89bc99618a/a6d36/karlblog1-2.png 650w,\n/static/dd1f70043ff6d04f5929ee89bc99618a/e5715/karlblog1-2.png 768w,\n/static/dd1f70043ff6d04f5929ee89bc99618a/cec12/karlblog1-2.png 1187w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>You will be able to view the scrapped data as well as a listing of the meta tags that have been included on the page.</p>\n<p><strong>LinkedIn Share Generator Tool</strong></p>\n<p>LinkedIn also uses Open Graph Tags to determine the content that will be shared with your sharing interface. You can view the relevant tags and details <a href=\"https://developer.linkedin.com/documents/setting-display-tags-shares\">here</a>.</p>\n<p>You can view the details that will be shared by generating out the sharing button on LinkedIn's <a href=\"https://docs.microsoft.com/en-us/linkedin/consumer/integrations/self-serve/plugins/share-plugin\">build a share button tool</a>.</p>\n<p>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.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 70.61538461538463%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAOCAIAAACgpqunAAAACXBIWXMAAAsTAAALEwEAmpwYAAABUUlEQVQoz5VS7W7CMAzs+7/RXoM/SIUNxqS2tE3aJP5okibM0D+og41Zp5Pl5OSLnUIrtdmW5ampq7rrlHVoAawDYecAAJFoBWJSo221KeTQAI4OtHEOaXS4sAEyDoE4XMMLfPDTLSQ1iB+NLghaMlu2BzLvOOxx2IHwuAddwrBzunR6Z+2XNQepM3zG2MRQx1D5qS2sHc/NsamPdX1kGoN3c0SlKnAqJ04zXSHJkifKmReEgIU879x2bdt3veq6vu+1uE/pkvPl94hxLugWiDIe673POSeRrkPK+Yc4Fswso1iObso/W96JrbN1VbHMn+nZvXmeHeDjztMkRBOTXEpJaL63K9waftucYsprsXSslCyVBwuyUG1BNvmqbfGrjOsMDMAU4kj+vvPKwlosfXzKPYXKkGCc4j8Gxq+ZfGKbOcQof3fyt+8b1giP8qvE+28+tDAIk2yrEQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"karlblog1-3\"\n        title=\"karlblog1-3\"\n        src=\"/static/76bff32aa54cddfeea81c47168b6afb4/e5715/karlblog1-3.png\"\n        srcset=\"/static/76bff32aa54cddfeea81c47168b6afb4/a6d36/karlblog1-3.png 650w,\n/static/76bff32aa54cddfeea81c47168b6afb4/e5715/karlblog1-3.png 768w,\n/static/76bff32aa54cddfeea81c47168b6afb4/12bff/karlblog1-3.png 1032w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>To test the share functionality click on the generated icon to display the share interface as determined by the provided URL.</p>\n<p><strong>Twitter Button Generator Tool</strong></p>\n<p>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.</p>\n<p>To test the tweet you can use Twitters <a href=\"https://about.twitter.com/resources/buttons\">button generator</a>. Select the \"Share a link\" option under \"Choose a button\".</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 768px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 36.15384615384615%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAHCAIAAACHqfpvAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA9klEQVQY05WNS0vFMBCF+///jgu116vowq0Lb6kVRQThNk3a0DwmzeTl9FYE0Y3DmTOHA19SleS5AS6njJDDktGV4CmUsCTvtvDluJToS8LoQU8De3+tbp7Hu47vDsfrTuxadn7o90+iboa6YWcPH5cN23Tx2F+1fN+JuuWE3L7I+7e5ki5NELlBYVGYMGh/EjLl+cm/G2FwhEQiZFNVSgmISk5GzWA0udVqAQtaUSAHa6h31pDKz1nhGKNzDgBCCOU/s8IpZzZO1mjtlp4NYK2y7siYlNJ7z+U88MFa+ze8fp7oBdqCIcQYKNBBxExtzhRiiL/hT/LYj6oTuH1qAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"karlblog1-4\"\n        title=\"karlblog1-4\"\n        src=\"/static/5b35f749339283559e53a994e2647b96/e5715/karlblog1-4.png\"\n        srcset=\"/static/5b35f749339283559e53a994e2647b96/a6d36/karlblog1-4.png 650w,\n/static/5b35f749339283559e53a994e2647b96/e5715/karlblog1-4.png 768w,\n/static/5b35f749339283559e53a994e2647b96/1ff84/karlblog1-4.png 1040w\"\n        sizes=\"(max-width: 768px) 100vw, 768px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n    </span></p>\n<p>Input your site URL in the \"share URL\" field, This will cause the Tweet button under \"Preview and code\" to be updated.</p>\n<p>Click on the generated button to see a sample of the Tweet that has be defined by your URL.</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</style>","frontmatter":{"date":"February 09, 2015","updated_date":null,"description":null,"title":"Social Provider Social Sharing Troubleshooting Resources","tags":["Engineering","SocialSharing","Facebook","Google","LinkedIn"],"pinned":null,"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}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"<p>Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.</p>\n<p>We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the <a href=\"https://www.loginradius.com/\">LoginRadius website</a>—to be faster, more intuitive, and developer-first in every way.</p>\n<p>The goal? Having them spend less time searching and more time building.</p>\n<h2 id=\"whats-new-and-improved-on-the-loginradius-website\" style=\"position:relative;\"><a href=\"#whats-new-and-improved-on-the-loginradius-website\" aria-label=\"whats new and improved on the loginradius website 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>What’s New and Improved on the LoginRadius Website?</h2>\n<p>LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.</p>\n<p>Here’s a closer look at what’s new and why it’s important:</p>\n<h3 id=\"a-developer-friendly-dark-theme\" style=\"position:relative;\"><a href=\"#a-developer-friendly-dark-theme\" aria-label=\"a developer friendly dark theme 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>A Developer-Friendly Dark Theme</h3>\n<p><img src=\"/f46881583c7518a93bb24e94c32320de/a-developer-friendly-dark-theme.webp\" alt=\"This image shows how LoginRadius offers several authentication methods like traditional login, social login, passwordless login, passkeys and more in a dark mode.\">    </p>\n<p>Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.</p>\n<p>The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.</p>\n<p>So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.</p>\n<h3 id=\"clear-categorization-for-loginradius-capabilities\" style=\"position:relative;\"><a href=\"#clear-categorization-for-loginradius-capabilities\" aria-label=\"clear categorization for loginradius capabilities 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>Clear Categorization for LoginRadius Capabilities</h3>\n<p><img src=\"/e5358b82be414940f3fb146013845933/capabilities.webp\" alt=\"This image shows a breakdown of all the LoginRadius CIAM capabilities, including authentication, security, UX, scalability and multi-brand management.\"></p>\n<p>We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:</p>\n<ul>\n<li>Authentication: Easily understand <a href=\"https://www.loginradius.com/blog/identity/authentication-option-for-your-product/\">how to choose the right login method</a>, from traditional passwords and OTPs to social login, federated SSO, and passkeys with few lines of code.</li>\n<li>Security: Implement no-code security features like bot detection, IP throttling, breached password alerts, DDoS protection, and adaptive MFA to safeguard user accounts.</li>\n<li>User Experience: Leverage AI builder, hosted pages, and drag-and-drop workflows to create smooth, branded sign-up and login experiences.</li>\n<li>High Performance &#x26; Scalability: Confidently scale with sub-100ms API response times, 100% uptime, 240K+ RPS, and 28+ global data center regions.</li>\n<li>Multi-Brand Management: Efficiently manage multiple identity apps, choosing isolated or shared data stores based on your brand’s unique needs.</li>\n</ul>\n<p>This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.</p>\n<h3 id=\"developer-first-navigation\" style=\"position:relative;\"><a href=\"#developer-first-navigation\" aria-label=\"developer first navigation 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>Developer-First Navigation</h3>\n<p><img src=\"/a8c155c2b6faf3d5f4b4de4e2b14d763/developers-menu.webp\" alt=\"This image shows the LoginRadius menu bar, highlighting the developer dropdown.\">   </p>\n<p>We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.</p>\n<p>The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.</p>\n<h3 id=\"quick-understanding-of-integration-benefits\" style=\"position:relative;\"><a href=\"#quick-understanding-of-integration-benefits\" aria-label=\"quick understanding of integration benefits 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>Quick Understanding of Integration Benefits</h3>\n<p><img src=\"/b2f9a964a2da0ea83e2f8596b833bba7/we-support-your-tech-stack.webp\" alt=\"This image shows a list of popular programming languages and frameworks offered by LoginRadius.\"></p>\n<p>Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.</p>\n<p>Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.</p>\n<h2 id=\"over-to-you-now\" style=\"position:relative;\"><a href=\"#over-to-you-now\" aria-label=\"over to you now 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>Over to You Now!</h2>\n<p>Check out our <a href=\"https://www.loginradius.com/\">revamped LoginRadius website</a> and see how the improved experience makes it easier to build, scale, and secure your applications.</p>\n<p>Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!</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</style>","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.jpg"}}}},"pageContext":{"limit":6,"skip":954,"currentPage":160,"type":"///","numPages":161,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}