{"id":154,"date":"2020-02-28T16:00:17","date_gmt":"2020-02-28T16:00:17","guid":{"rendered":"http:\/\/wiki2.plumserver.com\/knowledge-base\/magento-2-social-login-pro-v2-x-developers-guide-and-api-reference"},"modified":"2021-09-24T07:45:54","modified_gmt":"2021-09-24T11:45:54","slug":"magento-2-social-login-pro-v2-x-developers-guide-and-api-reference","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide","title":{"rendered":"Magento 2 Social Login Pro v3.x Developer Guide and API Reference"},"content":{"rendered":"\n<h2 id=\"adding-social-buttons\">Adding Social Buttons<\/h2>\n\n\n\n<p>This <a href=\"\/magento-social-login-pro\">Magento 2 Social Login Pro Extension<\/a> can be set up to replace your customer login\/registration template with its own template, and display the social login buttons automatically. In case you want to keep your own template and install social buttons manually, you will need to modify the code.<\/p>\n\n\n\n<h2 id=\"adding-login-buttons-manually\">Adding Login Buttons Manually<\/h2>\n\n\n\n<p>If you want to add login buttons manually, you have a couple of options. Please select the most suitable one from below.<\/p>\n\n\n\n<h3>Option 1 &#8211; Adding code to any template (phtml) file<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Website Frontend &#8211; Login Form page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>The following code can be pasted and will be working in any template (html) file of your theme. The code is as follows:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">    &lt;?php echo $this->getLayout()->createBlock(\"Plumrocket\\SocialLoginPro\\Block\\Buttons\")->setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")->toHtml(); ?>\n                    <\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>Edit the file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">vendor\/magento\/module-theme\/view\/frontend\/templates\/html\/copyright.phtml<\/code><\/pre><\/div>\n\n    <p>add code with login buttons block:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"2\"><code class=\"language-php\">&lt;small class=\"copyright\"&gt;\n    &lt;?php echo $this-&gt;getLayout()-&gt;createBlock(\"Plumrocket\\SocialLoginPro\\Block\\Buttons\")-&gt;setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")-&gt;toHtml(); ?&gt;\n    &lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getCopyright() ?&gt;&lt;\/span&gt;\n    &lt;\/small&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Social Login Pro buttons in the footer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/1_login_developer_guide_social_login_pro_Magento_2.jpg\" alt=\"Magento 2 social login developer guide\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h3>Option 2 &#8211; Adding code to Content Pages or Content Blocks<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Login buttons on the Static Page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>If you&#8217;re adding or editing blocks from your backend ((via &#8220;Content&gt;Pages&#8221; or &#8220;Content&gt;Blocks&#8221;) &#8211; please use the following code for pasting into the editor in order to display login buttons:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">    {{block class=\"Plumrocket\\\\SocialLoginPro\\\\Block\\\\Buttons\" name=\"pslogin.login.buttons\" template=\"Plumrocket_SocialLoginPro::customer\/\/form\/\/login\/\/buttons.phtml\"}}\n                    <\/code><\/pre><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Code for Social Login Pro buttons pasted into the editor.<\/p>\n\n\n\n<p>2. Social Login Pro buttons on the static About Us Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/2_login_developer_guide_social_login_pro_Magento_2.jpg\" alt=\"Magento 2 social login developer guide\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n\n\n<h3>Option 3 &#8211; Adding code to any Layout XML file<\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Login buttons on the Forgot Password page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>If you&#8217;re familiar with Magento development and want to add login buttons block into the Layout XML file of your theme, the code will be as follows:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;block class=\"Plumrocket\\SocialLoginPro\\Block\\Buttons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" template=\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\" \/><\/code><\/pre><\/div>\n\n\n\n<p>To include social buttons block in phtml file please use the following code:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php echo $block>getChildHtml('pslogin_buttons'); ?><\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>For &#8220;Customer Forgot Password Form&#8221; page, please edit file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">        vendor\/magento\/module-customer\/view\/frontend\/layout\/customer_account_forgotpassword.xml (or layout in your theme)<\/code><\/pre><\/div>\n\n    <p>please add the Social Buttons block:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"12\"><code class=\"language-markup\">&lt;head&gt;\n     &lt;title&gt;Forgot Your Password&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n     &lt;referenceBlock name=\"root\"&gt;\n     &lt;action method=\"setHeaderTitle\"&gt;\n     &lt;argument translate=\"true\" name=\"title\" xsi:type=\"string\"&gt;Password forgotten&lt;\/argument&gt;\n     &lt;\/action&gt;\n     &lt;\/referenceBlock&gt;\n     &lt;referenceContainer name=\"content\"&gt;\n     &lt;block class=\"Magento\\Customer\\Block\\Account\\Forgotpassword\" name=\"forgotPassword\" template=\"form\/forgotpassword.phtml\"&gt;\n     &lt;container name=\"form.additional.info\" as=\"form_additional_info\"\/&gt;\n     &lt;block class=\"Plumrocket\\SocialLoginPro\\Block\\Buttons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" template=\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\" \/&gt;\n     &lt;\/block&gt;\n     &lt;\/referenceContainer&gt;\n    &lt;\/body&gt;<\/code><\/pre><\/div>\n\n    <p>Now edit the following file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">vendor\/magento\/module-customer\/view\/frontend\/templates\/form\/forgotpassword.phtml<\/code><\/pre><\/div>\n\n    <p>in the needed position please add the following block:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">&lt;form class=\"form password forget\"\n    action=\"&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getUrl('*\/*\/forgotpasswordpost') ?&gt;\"\n    method=\"post\"\n    id=\"form-validate\"\n    data-mage-init='{\"validation\":{}}'&gt;\n    \u2026\n   &lt;div class=\"actions-toolbar\"&gt;\n    &lt;div class=\"primary\"&gt;\n    &lt;button type=\"submit\" class=\"action submit primary\"&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __('Submit') ?&gt;&lt;\/span&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;?php echo $block-&gt;getChildHtml('pslogin_buttons'); ?&gt;\n    &lt;div class=\"secondary\"&gt;\n    &lt;a class=\"action back\" href=\"&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getLoginUrl() ?&gt;\"&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __('Go back') ?&gt;&lt;\/span&gt;&lt;\/a&gt;\n    &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;\/form&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Social Login Pro buttons on the Forgot Password Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/4_login_developer_guide_social_login_pro_Magento_2.jpg\" alt=\"Magento 2 social login developer guide\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n\n\n<h3><i>Option 4 &#8211; Adding code to any template (html) file<\/i><\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Website Frontend &#8211; Login on Shopping Cart page<\/strong><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>If you&#8217;re familiar with Magento development and want to add login buttons block into the Layout XML file of your theme, the code will be as follows:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-javascript\">&lt;div data-bind=\"html: window.psloginButtons\">&lt;\/div><\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>Edit the file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">   vendor\/magento\/module-checkout\/view\/frontend\/web\/template\/cart\/totals.html <\/code><\/pre><\/div>\n\n    <p>add code with login buttons block:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"10\"><code class=\"language-javascript\">&lt;div class=\"table-wrapper\" data-bind=\"blockLoader: isLoading\"&gt;\n    &lt;table class=\"data table totals\"&gt;\n    &lt;caption class=\"table-caption\" data-bind=\"text: $t('Total')\"&gt;&lt;\/caption&gt;\n    &lt;tbody&gt;\n    &lt;!-- ko foreach: elems() --&gt;\n    &lt;!-- ko template: getTemplate() --&gt;&lt;!-- \/ko --&gt;\n    &lt;!-- \/ko --&gt;\n    &lt;\/tbody&gt;\n    &lt;\/table&gt;\n    \n    &lt;div data-bind=\"html: window.psloginButtons\"&gt;&lt;\/div&gt;\n    &lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n\n\n\n<p><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Social Login Pro buttons on the Shopping Cart page.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/Magento_2_social_login_developer_guide-1.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h2 id=\"adding-registration-buttons-manually\">Adding Registration Buttons Manually<\/h2>\n\n\n\n<p>In case you need to add registration buttons manually in some specific place of your store &#8211; please select the most suitable option from below.<\/p>\n\n\n\n<h3><i>Option 1 &#8211; Adding code to any template (phtml) file<\/i><\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Website Frontend &#8211; Login Form page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>The following code can be pasted and will be working in any template (html) file of your theme. The code is as follows:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php echo $this->getLayout()->createBlock(\"Plumrocket\\SocialLoginPro\\Block\\Buttons\")->setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/register\/buttons.phtml\")->toHtml(); ?><\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>Edit the file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">vendor\/magento\/module-theme\/view\/frontend\/templates\/html\/copyright.phtml<\/code><\/pre><\/div>\n\n    <p>add code with login buttons block:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"2\"><code class=\"language-php\">&lt;small class=\"copyright\"&gt;\n    &lt;?php echo $this-&gt;getLayout()-&gt;createBlock(\"Plumrocket\\SocialLoginPro\\Block\\Buttons\")-&gt;setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/register\/buttons.phtml\")-&gt;toHtml(); ?&gt;\n    &lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getCopyright() ?&gt;&lt;\/span&gt;\n    &lt;\/small&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Social Login Pro buttons in the footer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/1_login_developer_guide_social_login_pro_Magento_2.jpg\" alt=\"Magento 2 social login developer guide\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h3><i>Option 2 &#8211; Adding code to Content Pages or Content Blocks<\/i><\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Registration buttons on the Static Page<\/strong><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>If you&#8217;re familiar witIf you&#8217;re adding or editing blocks from your backend (via &#8220;Content&gt;Pages&#8221; or &#8220;Content&gt;Blocks&#8221;) &#8211; please use the following code for pasting into the editor in order to display register buttons:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">{{block class=\"Plumrocket\\\\SocialLoginPro\\\\Block\\\\Buttons\" name=\"pslogin.register.buttons\" template=\"Plumrocket_SocialLoginPro::customer\/\/form\/\/register\/\/buttons.phtml\"}}<\/code><\/pre><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Code for Social Login Pro Registration buttons pasted into the editor.<\/p>\n\n\n\n<p>2. Social Login Pro Registration buttons on the static About Us Page.<\/p>\n<\/div><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/2_register_developer_guide_social_login_pro_Magento_2.jpg\" alt=\"\"\/><\/figure>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h3><i>Option 3 &#8211; Adding code to any Layout XML file<\/i><\/h3>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Registration buttons on the Forgot Password page<\/strong><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>If you&#8217;re familiar with Magento development and want to add login buttons block into the Layout XML file of your theme, the code will be as follows:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">    &lt;block class=\"Plumrocket\\SocialLoginPro\\Block\\Buttons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" template=\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\" \/><\/code><\/pre><\/div>\n\n\n\n<p>To include social buttons block in phtml file please use the following code:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php echo $block>getChildHtml('pslogin_buttons'); ?>    <\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>For &#8220;Customer Forgot Password Form&#8221; page, please edit file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">        vendor\/magento\/module-customer\/view\/frontend\/layout\/customer_account_forgotpassword.xml (or layout in your theme)<\/code><\/pre><\/div>\n\n    <p>please add the Social Buttons block:<\/p>\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"12\"><code class=\"language-markup\">&lt;head&gt;\n    &lt;title&gt;Forgot Your Password&lt;\/title&gt;\n   &lt;\/head&gt;\n   &lt;body&gt;\n    &lt;referenceBlock name=\"root\"&gt;\n    &lt;action method=\"setHeaderTitle\"&gt;\n    &lt;argument translate=\"true\" name=\"title\" xsi:type=\"string\"&gt;Password forgotten&lt;\/argument&gt;\n    &lt;\/action&gt;\n    &lt;\/referenceBlock&gt;\n    &lt;referenceContainer name=\"content\"&gt;\n    &lt;block class=\"Magento\\Customer\\Block\\Account\\Forgotpassword\" name=\"forgotPassword\" template=\"form\/forgotpassword.phtml\"&gt;\n    &lt;container name=\"form.additional.info\" as=\"form_additional_info\"\/&gt;\n    &lt;block class=\"Plumrocket\\SocialLoginPro\\Block\\Buttons\" name=\"pslogin.customer.form.register.buttons\" as=\"pslogin_buttons\" template=\"Plumrocket_SocialLoginPro::customer\/form\/register\/buttons.phtml\" \/&gt;\n    &lt;\/block&gt;\n    &lt;\/referenceContainer&gt;\n   &lt;\/body&gt;<\/code><\/pre><\/div>\n\n   <p>Now edit the following file:<\/p>\n\n   <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">vendor\/magento\/module-customer\/view\/frontend\/templates\/form\/forgotpassword.phtml<\/code><\/pre><\/div>\n\n    <p>and in the needed position please add the following block:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;form class=\"form password forget\"\n    action=\"&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getUrl('*\/*\/forgotpasswordpost') ?&gt;\"\n    method=\"post\"\n    id=\"form-validate\"\n    data-mage-init='{\"validation\":{}}'&gt;\n    \u2026\n   &lt;div class=\"actions-toolbar\"&gt;\n    &lt;div class=\"primary\"&gt;\n    &lt;button type=\"submit\" class=\"action submit primary\"&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __('Submit') ?&gt;&lt;\/span&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;?php echo $block-&gt;getChildHtml('pslogin_buttons'); ?&gt;\n    &lt;div class=\"secondary\"&gt;\n    &lt;a class=\"action back\" href=\"&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getLoginUrl() ?&gt;\"&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __('Go back') ?&gt;&lt;\/span&gt;&lt;\/a&gt;\n    &lt;\/div&gt;\n   &lt;\/div&gt;\n   &lt;\/form&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Social Login Pro buttons on the Forgot Password Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/12\/4_login_developer_guide_social_login_pro_Magento_2.jpg\" alt=\"Magento 2 social login developer guide\"\/><\/figure>\n<\/div><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h2 id=\"how-to-place-customer-photo-from-social-networks-manually\">How to place customer photo from social networks manually<\/h2>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<div class=\"wp-block-columns table-to-grid\">\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p><strong>Customer photo on My Account page<\/strong><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>Go to the needed phtml file and insert the following code in the place where customer&#8217;s photo from social network should appear:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php if ($photoPath = $this->helper('Plumrocket\\SocialLoginPro\\Helper\\Data')->getPhotoPath()) : ?>\n&lt;img src=\"&lt;?php echo $photoPath; ?>\" \/>\n&lt;?php endif; ?><\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <p>Please paste the above code into the file:<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-markup\">vendor\/magento\/module-theme\/view\/frontend\/templates\/html\/title.phtml<\/code><\/pre><\/div>\n    \n    <p>Result will be as follows:<\/p>\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"10-12\"><code class=\"language-php\">$cssClass = $block-&gt;getCssClass() ? ' ' . $block-&gt;getCssClass() : '';\n    $title = '';\n    if (trim($block-&gt;getPageHeading())) {\n    $title = '&lt;span class=\"base\" data-ui-id=\"page-title-wrapper\" ' . $block-&gt;getAddBaseAttribute() . '&gt;'\n     . $block-&gt;escapeHtml($block-&gt;getPageHeading()) . '&lt;\/span&gt;';\n    }\n    ?&gt;\n    &lt;?php if ($title): ?&gt;\n    \n    &lt;?php if ($photoPath = $this-&gt;helper('Plumrocket\\SocialLoginPro\\Helper\\Data')-&gt;getPhotoPath()) : ?&gt;\n    &lt;img src=\"&lt;?php echo $photoPath; ?&gt;\" \/&gt;\n    &lt;?php endif; ?&gt;\n    \n    &lt;div class=\"page-title-wrapper&lt;?php \/* @escapeNotVerified *\/ echo $cssClass; ?&gt;\"&gt;\n    &lt;h1 class=\"page-title\"\n     &lt;?php if ($block-&gt;getId()): ?&gt; id=\"&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getId();?&gt;\" &lt;?php endif; ?&gt;\n     &lt;?php if ($block-&gt;getAddBaseAttributeAria()): ?&gt;\n     aria-labelledby=\"&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getAddBaseAttributeAria(); ?&gt;\"\n     &lt;?php endif; ?&gt;&gt;\n     &lt;?php \/* @escapeNotVerified *\/ echo $title ?&gt;\n    &lt;\/h1&gt;\n    &lt;?php echo $block-&gt;getChildHtml(); ?&gt;\n    &lt;\/div&gt;\n    &lt;?php endif; ?&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\">\n<p>1. Social Login Pro buttons on the Forgot Password Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"\/docs\/wp-content\/uploads\/2020\/05\/1_developer_guide_facebook_twitter_1.jpg\" alt=\"Magento 2 social login developer guide\"\/><\/figure>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<h2 id=\"additional-options\">Additional options<\/h2>\n\n\n\n<h3 id=\"setting-full-buttons-count\">Setting Full Buttons Count<\/h3>\n\n\n\n<p>By default Social Login Extension for Magento 2 will display buttons as icons, if there are more than 6 buttons. In order to display more than 6 buttons in original size, specify their number. Use the code:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre data-line=\"1\"><code class=\"language-php\">setFullButtonsCount(6)<\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;div class=\"footer-container\"&gt;\n        &lt;div class=\"footer\"&gt;\n            &lt;?php echo $this-&gt;getLayout()\n                -&gt;createBlock(\"PlumrocketSocialLoginProBlockButtons\")\n                -&gt;setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")\n                -&gt;setFullButtonsCount(6) &gt;toHtml(); ?&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n\n\n\n<h3 id=\"adding-html-code-to-phtml-file\">Adding HTML code (to phtml file)<\/h3>\n\n\n\n<p>In order to show any HTML code only if social buttons are displayed, use the code while editing phtml file:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php if($this->helper('PlumrocketSocialLoginFreeHelperData')->hasButtons()): ?>\n    &lt;!-- Custom Html -->\n    &lt;?php echo $this->getLayout()\n        ->createBlock(\"PlumrocketSocialLoginProBlockButtons\")\n        ->setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")\n        ->toHtml(); ?>\n    &lt;!-- Custom Html -->\n&lt;?php endif; ?><\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-php\">&lt;?php if($this-&gt;helper('PlumrocketSocialLoginFreeHelperData')-&gt;hasButtons()): ?&gt;\n        &lt;div class=\"pslogin-spacer pslogin-clearfix\"&gt;\n            &lt;table&gt;\n                &lt;tr&gt;\n                    &lt;td&gt;&lt;div class=\"pslogin-border\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n                    &lt;td class=\"pslogin-bordertext w25\"&gt;&lt;?php echo __('OR'); ?&gt;&lt;\/td&gt;\n                    &lt;td&gt;&lt;div class=\"pslogin-border\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n                &lt;\/tr&gt;\n            &lt;\/table&gt;\n        &lt;\/div&gt;\n        &lt;?php echo $this-&gt;getLayout()\n            -&gt;createBlock(\"PlumrocketSocialLoginProBlockButtons\")\n            -&gt;setTemplate(\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\")\n            -&gt;toHtml(); ?&gt;\n     &lt;?php endif; ?&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n\n\n\n<h3 id=\"adding-html-code-to-html-file\">Adding HTML code (to html file)<\/h3>\n\n\n\n<p>In order to show any HTML code only if social buttons are displayed, use the code while editing html file:<\/p>\n\n\n\n<div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-javascript\">&lt;!-- Custom Html with attribute data-bind=\"if: window.psloginButtons\" -->\n&lt;div data-bind=\"html: window.psloginButtons\">&lt;\/div>\n&lt;!-- Custom Html with attribute data-bind=\"if: window.psloginButtons\" -->\n    <\/code><\/pre><\/div>\n\n\n\n<p><div class=\"example-block\">\n    <p class=\"example-block-title\">Code Example<\/p>\n\n    <div class=\"wp-block-prismatic-blocks\"><div><\/div><pre><code class=\"language-javascript\">&lt;div class=\"pslogin-spacer pslogin-clearfix\" data-bind=\"if: window.psloginButtons\"&gt;\n        &lt;table&gt;\n            &lt;tr&gt;\n                &lt;td&gt;&lt;div class=\"pslogin-border\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n                &lt;td class=\"pslogin-bordertext w25\" data-bind=\"i18n: 'OR'\"&gt;&lt;\/td&gt;\n                &lt;td&gt;&lt;div class=\"pslogin-border\"&gt;&lt;\/div&gt;&lt;\/td&gt;\n            &lt;\/tr&gt;\n        &lt;\/table&gt;\n    &lt;\/div&gt;\n    &lt;div data-bind=\"html: window.psloginButtons\"&gt;&lt;\/div&gt;<\/code><\/pre><\/div>\n<\/div><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Adding Social Buttons This Magento 2 Social Login Pro Extension can be set up to replace your customer login\/registration template with its own template, and display the social login buttons automatically. In case you want to keep your own template and install social buttons manually, you will need to modify the code. Adding Login Buttons &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Magento 2 Social Login Pro v3.x Developer Guide and API Reference&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[144],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v17.2 (Yoast SEO v17.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Magento 2 Social Login Pro v3.x Developer Guide and API Reference - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"Adding Social Buttons This Magento 2 Social Login Pro Extension can be set up to replace your customer login\/registration template with its own template,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Magento 2 Social Login Pro v3.x Developer Guide and API Reference\" \/>\n<meta property=\"og:description\" content=\"Adding Social Buttons This Magento 2 Social Login Pro Extension can be set up to replace your customer login\/registration template with its own template,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2020-02-28T16:00:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-09-24T11:45:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/12\/1_login_developer_guide_social_login_pro_Magento_2.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Plumrocket\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Magento 2 Social Login Pro v3.x Developer Guide and API Reference - Plumrocket Documentation","description":"Adding Social Buttons This Magento 2 Social Login Pro Extension can be set up to replace your customer login\/registration template with its own template,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide","og_locale":"en_US","og_type":"article","og_title":"Magento 2 Social Login Pro v3.x Developer Guide and API Reference","og_description":"Adding Social Buttons This Magento 2 Social Login Pro Extension can be set up to replace your customer login\/registration template with its own template,","og_url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide","og_site_name":"Plumrocket Documentation","article_published_time":"2020-02-28T16:00:17+00:00","article_modified_time":"2021-09-24T11:45:54+00:00","og_image":[{"url":"https:\/\/plumrocket.com\/docs\/wp-content\/uploads\/2020\/12\/1_login_developer_guide_social_login_pro_Magento_2.jpg"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/plumrocket.com\/docs\/#website","url":"https:\/\/plumrocket.com\/docs\/","name":"Plumrocket Documentation","description":"Extensions docs, troubleshootings etc.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plumrocket.com\/docs\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide#primaryimage","inLanguage":"en-US","url":"\/docs\/wp-content\/uploads\/2020\/12\/1_login_developer_guide_social_login_pro_Magento_2.jpg","contentUrl":"\/docs\/wp-content\/uploads\/2020\/12\/1_login_developer_guide_social_login_pro_Magento_2.jpg"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide","name":"Magento 2 Social Login Pro v3.x Developer Guide and API Reference - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide#primaryimage"},"datePublished":"2020-02-28T16:00:17+00:00","dateModified":"2021-09-24T11:45:54+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20"},"description":"Adding Social Buttons This Magento 2 Social Login Pro Extension can be set up to replace your customer login\/registration template with its own template,","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3\/devguide#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Magento 2 Extensions","item":"https:\/\/plumrocket.com\/magento-extensions"},{"@type":"ListItem","position":2,"name":"Magento 2 Social Login Pro","item":"https:\/\/plumrocket.com\/magento-social-login-pro"},{"@type":"ListItem","position":3,"name":"Documentation","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro"},{"@type":"ListItem","position":4,"name":"v3","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v3"},{"@type":"ListItem","position":5,"name":"Developer Guide"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/38b360639b934d6c984ee4f3ffce7d20","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/72392a92ae750c66560be284502b6676?s=96&d=mm&r=g","caption":"Plumrocket"},"sameAs":["https:\/\/plumrocket.com\/docs"]}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/154"}],"collection":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=154"}],"version-history":[{"count":21,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/154\/revisions"}],"predecessor-version":[{"id":24422,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/154\/revisions\/24422"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}