{"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 class=\"wp-block-paragraph\">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 class=\"wp-block-heading\" id=\"adding-login-buttons-manually\">Adding Social Login Buttons Manually<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are several options for adding social login buttons manually. Please select the most suitable one from below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Website Frontend &#8211; Login Form page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;?php echo $this-&gt;getLayout()-&gt;createBlock(&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot;)-&gt;toHtml(); ?&gt;\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\" data-line=\"\">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\" data-line=\"\">&lt;small class=&quot;copyright&quot;&gt;\n    &lt;?php echo $this-&gt;getLayout()-&gt;createBlock(&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot;)-&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 is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">1. Social Login Pro buttons in the footer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" 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 class=\"wp-block-heading\">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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Login buttons on the Static Page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">{{block class=&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot; name=&quot;pslogin.login.buttons&quot;}}\n                    <\/code><\/pre><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">1. Code for Social Login Pro buttons pasted into the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">2. Social Login Pro buttons on the static About Us Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" 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 class=\"wp-block-heading\">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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Login buttons on the Forgot Password page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;block class=&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot; name=&quot;pslogin.customer.form.login.buttons&quot; as=&quot;pslogin_buttons&quot; \/&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;?php echo $block&gt;getChildHtml(&#039;pslogin_buttons&#039;); ?&gt;<\/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\" data-line=\"\">        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\" data-line=\"\">&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=&quot;root&quot;&gt;\n     &lt;action method=&quot;setHeaderTitle&quot;&gt;\n     &lt;argument translate=&quot;true&quot; name=&quot;title&quot; xsi:type=&quot;string&quot;&gt;Password forgotten&lt;\/argument&gt;\n     &lt;\/action&gt;\n     &lt;\/referenceBlock&gt;\n     &lt;referenceContainer name=&quot;content&quot;&gt;\n     &lt;block class=&quot;Magento\\Customer\\Block\\Account\\Forgotpassword&quot; name=&quot;forgotPassword&quot; template=&quot;form\/forgotpassword.phtml&quot;&gt;\n     &lt;container name=&quot;form.additional.info&quot; as=&quot;form_additional_info&quot;\/&gt;\n     &lt;block class=&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot; name=&quot;pslogin.customer.form.login.buttons&quot; as=&quot;pslogin_buttons&quot; \/&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\" data-line=\"\">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\" data-line=\"\">&lt;form class=&quot;form password forget&quot;\n    action=&quot;&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getUrl(&#039;*\/*\/forgotpasswordpost&#039;) ?&gt;&quot;\n    method=&quot;post&quot;\n    id=&quot;form-validate&quot;\n    data-mage-init=&#039;{&quot;validation&quot;:{}}&#039;&gt;\n    \u2026\n   &lt;div class=&quot;actions-toolbar&quot;&gt;\n    &lt;div class=&quot;primary&quot;&gt;\n    &lt;button type=&quot;submit&quot; class=&quot;action submit primary&quot;&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __(&#039;Submit&#039;) ?&gt;&lt;\/span&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;?php echo $block-&gt;getChildHtml(&#039;pslogin_buttons&#039;); ?&gt;\n    &lt;div class=&quot;secondary&quot;&gt;\n    &lt;a class=&quot;action back&quot; href=&quot;&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getLoginUrl() ?&gt;&quot;&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __(&#039;Go back&#039;) ?&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 is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">1. Social Login Pro buttons on the Forgot Password Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" 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 class=\"wp-block-heading\"><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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><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 is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;div data-bind=&quot;html: window.psloginButtons&quot;&gt;&lt;\/div&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><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\" data-line=\"\">   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\" data-line=\"\">&lt;div class=&quot;table-wrapper&quot; data-bind=&quot;blockLoader: isLoading&quot;&gt;\n    &lt;table class=&quot;data table totals&quot;&gt;\n    &lt;caption class=&quot;table-caption&quot; data-bind=&quot;text: $t(&#039;Total&#039;)&quot;&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=&quot;html: window.psloginButtons&quot;&gt;&lt;\/div&gt;\n    &lt;\/div&gt;<\/code><\/pre><\/div>\r\n<\/div><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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 decoding=\"async\" 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 class=\"wp-block-heading\" id=\"adding-registration-buttons-manually\">Adding Registration Buttons Manually<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">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 class=\"wp-block-heading\"><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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Website Frontend &#8211; Login Form page<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;?php echo $this-&gt;getLayout()-&gt;createBlock(&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot;)-&gt;setPosition(&#039;register&#039;)-&gt;setTemplate(&quot;Plumrocket_SocialLoginPro::customer\/form\/register\/buttons.phtml&quot;)-&gt;toHtml(); ?&gt;<\/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\" data-line=\"\">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\" data-line=\"\">&lt;small class=&quot;copyright&quot;&gt;\n    &lt;?php echo $this-&gt;getLayout()-&gt;createBlock(&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot;)-&gt;setPosition(&#039;register&#039;)-&gt;setTemplate(&quot;Plumrocket_SocialLoginPro::customer\/form\/register\/buttons.phtml&quot;)-&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 is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">1. Social Login Pro buttons in the footer.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" 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 class=\"wp-block-heading\"><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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Registration buttons on the Static Page<\/strong><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">{{block class=&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot; name=&quot;pslogin.register.buttons&quot; position=&quot;register&quot; template=&quot;Plumrocket_SocialLoginPro::customer\/\/form\/\/register\/\/buttons.phtml&quot;}}<\/code><\/pre><\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">1. Code for Social Login Pro Registration buttons pasted into the editor.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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 decoding=\"async\" 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 class=\"wp-block-heading\"><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 is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns table-to-grid is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Changes to be made<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Registration buttons on the Forgot Password page<\/strong><\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;block class=&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot; name=&quot;pslogin.customer.form.login.buttons&quot; as=&quot;pslogin_buttons&quot; template=&quot;Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml&quot;&gt;&lt;arguments&gt;&lt;argument name=&quot;position&quot; xsi:type=&quot;string&quot;&gt;register&lt;\/argument&gt;&lt;\/arguments&gt;&lt;\/block&gt;<\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">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\" data-line=\"\">&lt;?php echo $block&gt;getChildHtml(&#039;pslogin_buttons&#039;); ?&gt;    <\/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\" data-line=\"\">        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\" data-line=\"\">&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=&quot;root&quot;&gt;\n    &lt;action method=&quot;setHeaderTitle&quot;&gt;\n    &lt;argument translate=&quot;true&quot; name=&quot;title&quot; xsi:type=&quot;string&quot;&gt;Password forgotten&lt;\/argument&gt;\n    &lt;\/action&gt;\n    &lt;\/referenceBlock&gt;\n    &lt;referenceContainer name=&quot;content&quot;&gt;\n    &lt;block class=&quot;Magento\\Customer\\Block\\Account\\Forgotpassword&quot; name=&quot;forgotPassword&quot; template=&quot;form\/forgotpassword.phtml&quot;&gt;\n    &lt;container name=&quot;form.additional.info&quot; as=&quot;form_additional_info&quot;\/&gt;\n    &lt;block class=&quot;Plumrocket\\SocialLoginPro\\Block\\Widget\\LoginButtons&quot; name=&quot;pslogin.customer.form.login.buttons&quot; as=&quot;pslogin_buttons&quot; template=&quot;Plumrocket_SocialLoginPro::customer\/form\/login\/buttons.phtml&quot;&gt;&lt;arguments&gt;&lt;argument name=&quot;position&quot; xsi:type=&quot;string&quot;&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\" data-line=\"\">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\" data-line=\"\">&lt;form class=&quot;form password forget&quot;\n    action=&quot;&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getUrl(&#039;*\/*\/forgotpasswordpost&#039;) ?&gt;&quot;\n    method=&quot;post&quot;\n    id=&quot;form-validate&quot;\n    data-mage-init=&#039;{&quot;validation&quot;:{}}&#039;&gt;\n    \u2026\n   &lt;div class=&quot;actions-toolbar&quot;&gt;\n    &lt;div class=&quot;primary&quot;&gt;\n    &lt;button type=&quot;submit&quot; class=&quot;action submit primary&quot;&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __(&#039;Submit&#039;) ?&gt;&lt;\/span&gt;&lt;\/button&gt;\n    &lt;\/div&gt;\n    &lt;?php echo $block-&gt;getChildHtml(&#039;pslogin_buttons&#039;); ?&gt;\n    &lt;div class=&quot;secondary&quot;&gt;\n    &lt;a class=&quot;action back&quot; href=&quot;&lt;?php \/* @escapeNotVerified *\/ echo $block-&gt;getLoginUrl() ?&gt;&quot;&gt;&lt;span&gt;&lt;?php \/* @escapeNotVerified *\/ echo __(&#039;Go back&#039;) ?&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 is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow\">\n<p class=\"wp-block-paragraph\">1. Social Login Pro buttons on the Forgot Password Page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" 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 class=\"wp-block-paragraph\"><\/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,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[360],"tags":[],"class_list":["post-26026","post","type-post","status-publish","format-standard","hentry","category-magento-social-login-pro-v4-devguide","entry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\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 - Plumrocket Documentation\" \/>\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 name=\"author\" content=\"Plumrocket\" \/>\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 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 - Plumrocket Documentation","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","author":"Plumrocket","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Plumrocket","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons#article","isPartOf":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons"},"author":{"name":"Plumrocket","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8"},"headline":"How to Add Magento 2 Social Buttons Manually","datePublished":"2022-08-19T13:58:44+00:00","dateModified":"2024-12-12T17:04:47+00:00","mainEntityOfPage":{"@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons"},"wordCount":661,"articleSection":["Developer Guide"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/plumrocket.com\/docs\/magento-social-login-pro\/v4\/devguide\/add-social-buttons","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"},"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":"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":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/plumrocket.com\/docs\/#\/schema\/person\/c96fccdb89342ae6804272265723eca8","name":"Plumrocket","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/30d7e8cb4567485b56880a1658849a1252ac12806e8f95b3be71e986bf5eabee?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/30d7e8cb4567485b56880a1658849a1252ac12806e8f95b3be71e986bf5eabee?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/30d7e8cb4567485b56880a1658849a1252ac12806e8f95b3be71e986bf5eabee?s=96&d=mm&r=g","caption":"Plumrocket"}}]}},"_links":{"self":[{"href":"https:\/\/plumrocket.com\/docs\/wp-json\/wp\/v2\/posts\/26026","targetHints":{"allow":["GET"]}}],"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}]}}