{"id":5760,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-social-widget\/"},"modified":"2022-06-10T05:17:09","modified_gmt":"2022-06-10T05:17:09","slug":"landing-page-social-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/landing-pages\/builder\/social\/","title":{"rendered":"Landing Page Social Widget"},"content":{"rendered":"<div class=\"aricle_container\">\n<p>The <strong>Social&nbsp;<\/strong>widget helps you add social media profile links to your landing page. Using this widget, you can add links to a Facebook page, Instagram profile, Twitter handle, Youtube channel, and LinkedIn profiles.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h2>How to use a Social&nbsp;Widget in a Landing Page?<\/h2>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 1<\/h3>\n<h3>Navigate to the landing page builder<\/h3>\n<p>Use the <strong>Main Menu<\/strong> on the left to create a <strong>landing page<\/strong> and subsequently <a href=\"\/hc\/en_GB\/landing-pages\/builder\/create\/\" target=\"_blank\" rel=\"noopener noreferrer\">navigate to our landing page builder<\/a>.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 2<\/h3>\n<h3>Add a Social&nbsp;widget to your landing page<\/h3>\n<p>The blank area on the left is the <strong>work area<\/strong><strong>&nbsp;<\/strong>where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as <a href=\"\/hc\/en_GB\/landing-pages\/builder\/widgets\/\" target=\"_blank\" rel=\"noopener noreferrer\">Widgets<\/a>.<\/p>\n<p>In order to add links to your social media profiles to your landing page, drag and drop the <strong>Social&nbsp;<\/strong>widget to the work area <em>(as highlighted in the screenshot <em style=\"box-sizing: border-box; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; font-style: italic; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">below<\/em>).<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1824 size-full\" title=\"Landing page social widget\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landing-page-social-widget.png\" alt=\"Landing page builder social media widget for facebook, instagram, linkedin and twitter\" width=\"532\" height=\"749\"><\/p>\n<div style=\"padding: 24px 0;\"><\/div>\n<h3>Step 3<\/h3>\n<h3>Select the social media icons that you wish to add to your landing page.<\/h3>\n<p>As you drop the widget into the work area, the widget settings are displayed on the right<em>&nbsp;(as highlighted in the screenshot <em style=\"box-sizing: border-box; font-family: elevio-noto-sans, Helvetica, Arial, sans-serif; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; font-style: italic; color: rgba(0, 0, 0, 0.8); font-size: 16px; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;\">below).<\/em> &nbsp;<\/em><\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img decoding=\"async\" class=\"alignnone wp-image-1826\" title=\"Landing page SoMe icons\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/social-media-landingpage-icons.png\" alt=\"Social media icons highlighted. Facebook, twitter, linkedin, instagram and youtube icons\" width=\"640\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>You\u2019ll notice that all social media platforms are displayed as a list.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1827 size-full\" title=\"Landing page social media icons display\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/social-media-icons-display.png\" alt=\"Landing page social media, settings tab. Choose what platforms to show\" width=\"540\" height=\"157\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>As highlighted in the above screenshot, against each listing, there are two options:<\/p>\n<ul style=\"list-style-type: circle;\">\n<li>A <strong>Delete&nbsp;<\/strong>button &#8211; Use it to delete the irrelevant social media icons from your landing page.<\/li>\n<li>An <strong>Expand<\/strong> button &#8211; For the icons that you wish to retain, click the expand button to enter the subsequent details.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><strong>Let&#8217;s have a look at the expanded settings for the social media icons:<\/strong><\/p>\n<h4><strong>3.1 Settings for Facebook, Twitter, and LinkedIn<\/strong><\/h4>\n<p>Similar settings are available for these three media. For example:<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1828 size-full\" title=\"Social media widget settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/social-media-settings.png\" alt=\"Social media settings for facebook, twitter and linkedin\" width=\"511\" height=\"292\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p><strong>Use these settings to specify if:<\/strong><\/p>\n<ul style=\"list-style-type: circle;\">\n<li>you would like to redirect the clicks to your business&#8217;s Facebook page URL (the one specified under your account&#8217;s Integrations), or<\/li>\n<li>you would like to redirect the clicks to some other URL.<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>3.2 Settings for Instagram and Youtube<\/strong><\/h4>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1829 size-full\" title=\"Instagram settings\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/social-media-instagram-setting.png\" alt=\"Landing page social media. Instagram settings\" width=\"509\" height=\"247\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, type in the URL to which you would like to redirect the clicks.<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<h3>Step 4<\/h3>\n<h3>Style your Social Media Icons<\/h3>\n<p>By default, we display the social media icons with their original branding styles, but you can customize the appearance of icons if you wish to.<\/p>\n<p>To customize the look and feel of the icons, click the <strong>Style&nbsp;<\/strong>tab as highlighted in the screenshot below:<\/p>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3262\" title=\"Social media widget style\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/landingpage-social-media-settings.png\" alt=\"Landing page social media widget style settings\" width=\"640\" height=\"606\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<p>Herein, the different design options available are:<\/p>\n<h4><strong>4.1 Social Font settings and Background color<\/strong><\/h4>\n<ul>\n<li><strong>Social Background Color&nbsp;<\/strong>to change the color of the widget background. You can also choose to make the widget background transparent.<\/li>\n<li>To customize the icons:\n<ol>\n<li>Select the icon that you want to customize by using the dropdown \u2013 <strong><strong>Select Social Icon for Color Change<\/strong><\/strong>\n<div style=\"padding: 14px 0;\"><\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1833 size-full\" title=\"Social media icon color\" src=\"https:\/\/www.mainbrainer.com\/hc\/wp-content\/uploads\/2021\/11\/social-icon-color.png\" alt=\"Landing page social media. Choose social icon color\" width=\"532\" height=\"155\"><\/p>\n<div style=\"padding: 20px 0;\"><\/div>\n<\/li>\n<li>Subsequently, select the colors you wish to use for the icon background, and the icon itself using the dropdowns <strong>Selected Icon Background Color<\/strong> and <strong>Selected Icon Color<\/strong>, respectively.<\/li>\n<li>Select the checkbox <strong>Selected Background and Icon Color Apply to All&nbsp;<\/strong>if you wish to apply the selected color scheme to all the social icons.<\/li>\n<li>Use the <strong>Rounded Corners<\/strong> sizing bar to add rounded corners to the icons.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<div style=\"padding: 14px 0;\"><\/div>\n<h4><strong>4.2 Social Setting<\/strong><\/h4>\n<p>Customize the icons using the following settings:<\/p>\n<ul>\n<li><strong>Orientation&nbsp;<\/strong>to select whether you would like to display the icons vertically (one below the other), or horizontally (side by side)<\/li>\n<li><strong>Social&nbsp;<\/strong><strong>Position&nbsp;<\/strong>to choose the alignment of the icons within the widget boundary.<\/li>\n<li><strong>Horizontal Icon Gap<\/strong> to select the distance between the icons.<\/li>\n<li><strong>Vertical Icon Gap<\/strong> to adjust the distance between the icon and widget boundaries.<\/li>\n<\/ul>\n<p>Click <strong>Save&nbsp;<\/strong>and that\u2019s it!<\/p>\n<p>You have successfully added your brand&#8217;s social media profile links to your landing page!<\/p>\n<p>Let&#8217;s proceed, and have a look at how to add a footer to a landing page using the <a href=\"\/hc\/en_GB\/landing-pages\/builder\/footer\/\" target=\"_blank\" rel=\"noopener noreferrer\">Footer Widget<\/a>!<\/p>\n<\/div>\n<style>\n  .aricle_container p,.aricle_container li{color: rgba(0,0,0,.8)!important}  .aricle_container span{color:#0070ba!important}.aricle_container li,.aricle_container blockquote{font-size:18px!important;    font-weight: 400;<br \/>\n  }<br \/>\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>The social widget helps you add social media profile links to your landing page  (Facebook, Instagram, Twitter, Youtube, and LinkedIn).<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"open","template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"ht-kb-category":[350],"ht-kb-tag":[],"class_list":["post-5760","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-landing-page-builder-en_gb"],"_links":{"self":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5760","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/comments?post=5760"}],"version-history":[{"count":7,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5760\/revisions"}],"predecessor-version":[{"id":9816,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb\/5760\/revisions\/9816"}],"wp:attachment":[{"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/media?parent=5760"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-category?post=5760"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mainbrainer.com\/hc\/en_GB\/wp-json\/wp\/v2\/ht-kb-tag?post=5760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}