{"id":26026,"date":"2022-08-19T09:58:44","date_gmt":"2022-08-19T13:58:44","guid":{"rendered":"https:\/\/plumrocket.com\/docs\/?p=26026"},"modified":"2024-12-12T12:04:47","modified_gmt":"2024-12-12T17:04:47","slug":"how-to-add-magento-2-social-buttons-manually","status":"publish","type":"post","link":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons","title":{"rendered":"How to Add Magento 2 Social Buttons Manually"},"content":{"rendered":"\n<p>This&nbsp;<a href=\"\/magento-social-login-pro\">Magento 2 Social Login Pro Extension<\/a>&nbsp;is set up to replace your customer login\/registration template with its own template with automatically displayed social login buttons. In case you want to keep your own template and install social buttons manually, you will need to modify the code. Please follow the guide below.<\/p>\n\n\n\n<h2 id=\"adding-login-buttons-manually\">Adding Social Login Buttons Manually<\/h2>\n\n\n\n<p>There are several options for adding social login buttons manually. 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\\Widget\\LoginButtons\")->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\\Widget\\LoginButtons\")-&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\\Widget\\LoginButtons\" name=\"pslogin.login.buttons\"}}\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\\Widget\\LoginButtons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" \/><\/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\\Widget\\LoginButtons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" \/&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\">\r\n    <p class=\"example-block-title\">Code Example<\/p>\r\n\r\n    <p>Edit the file:<\/p>\r\n\r\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>\r\n\r\n    <p>add code with login buttons block:<\/p>\r\n\r\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>\r\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 to a specific place on your store &#8211; please choose 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\\Widget\\LoginButtons\")->setPosition('register')->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\\Widget\\LoginButtons\")-&gt;setPosition('register')-&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\\Widget\\LoginButtons\" name=\"pslogin.register.buttons\" position=\"register\" 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\\Widget\\LoginButtons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" template=\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\">&lt;arguments>&lt;argument name=\"position\" xsi:type=\"string\">register&lt;\/argument>&lt;\/arguments>&lt;\/block><\/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\\Widget\\LoginButtons\" name=\"pslogin.customer.form.login.buttons\" as=\"pslogin_buttons\" template=\"Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml\"&gt;&lt;arguments&gt;&lt;argument name=\"position\" xsi:type=\"string\"&gt;register&lt;\/argument&gt;&lt;\/arguments&gt;&lt;\/block&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","protected":false},"excerpt":{"rendered":"<p>This&nbsp;Magento 2 Social Login Pro Extension&nbsp;is set up to replace your customer login\/registration template with its own template with automatically displayed social login buttons. In case you want to keep your own template and install social buttons manually, you will need to modify the code. Please follow the guide below. Adding Social Login Buttons Manually &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How to Add Magento 2 Social Buttons Manually&#8221;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","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":[360],"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>How to Add Magento 2 Social Buttons Manually - Plumrocket Documentation<\/title>\n<meta name=\"description\" content=\"This&nbsp;Magento 2 Social Login Pro Extension&nbsp;is set up to replace your customer login\/registration template with its own template with\" \/>\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\/v4\/devguide\/add-social-buttons\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Add Magento 2 Social Buttons Manually\" \/>\n<meta property=\"og:description\" content=\"This&nbsp;Magento 2 Social Login Pro Extension&nbsp;is set up to replace your customer login\/registration template with its own template with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons\" \/>\n<meta property=\"og:site_name\" content=\"Plumrocket Documentation\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-19T13:58:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-12T17:04:47+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=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Add Magento 2 Social Buttons Manually - Plumrocket Documentation","description":"This&nbsp;Magento 2 Social Login Pro Extension&nbsp;is set up to replace your customer login\/registration template with its own template with","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\/v4\/devguide\/add-social-buttons","og_locale":"en_US","og_type":"article","og_title":"How to Add Magento 2 Social Buttons Manually","og_description":"This&nbsp;Magento 2 Social Login Pro Extension&nbsp;is set up to replace your customer login\/registration template with its own template with","og_url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons","og_site_name":"Plumrocket Documentation","article_published_time":"2022-08-19T13:58:44+00:00","article_modified_time":"2024-12-12T17:04:47+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":"6 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\/v4\/devguide\/add-social-buttons#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\/v4\/devguide\/add-social-buttons#webpage","url":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons","name":"How to Add Magento 2 Social Buttons Manually - Plumrocket Documentation","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons#primaryimage"},"datePublished":"2022-08-19T13:58:44+00:00","dateModified":"2024-12-12T17:04:47+00:00","author":{"@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"description":"This&nbsp;Magento 2 Social Login Pro Extension&nbsp;is set up to replace your customer login\/registration template with its own template with","breadcrumb":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons#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":"v4","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4"},{"@type":"ListItem","position":5,"name":"Developer Guide","item":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide"},{"@type":"ListItem","position":6,"name":"How to Add Magento 2 Social Buttons Manually"}]},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","@id":"https:\/\/plumrocket.com\/docs\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10c44aa45aab391250913d982e552e53?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26026"}],"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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/comments?post=26026"}],"version-history":[{"count":4,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26026\/revisions"}],"predecessor-version":[{"id":27708,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26026\/revisions\/27708"}],"wp:attachment":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/media?parent=26026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/categories?post=26026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/tags?post=26026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}