Updated as of 6/1/2023
Linktree is a trendy landing page system that many people and brands use on social media channels to drive traffic to specific places. It allows you to create a simple landing page with your logo at the top and buttons that drive people to where you want them to go, such as your blog, other social media channels, and specific resources.
This can come in handy in places like Instagram. For example, since you can’t include clickable links in Instagram posts, but you can include a link in your profile, that link can go to a landing page with quick clear options. Then you can tell people in your Instagram posts to “follow the link in my profile” to learn more about various topics without having to change the link in your profile each time you make a new post.
But what if you want this page to also be searchable and accessible through Google and other search engines?
Well, that's where landing pages like Linktree fall short. Each Linktree landing page is a subdomain of linktree.com and is not associated with your domain. So you’re helping their domain get traffic versus driving people directly to your site.
What other options do you have? Can you create a similar page with Zibster?
Yes, you can! Not only is it super simple, but we’re also going to show you how you can do it. All it takes is adding a little bit of code to a hidden landing page on your site. This will allow you to drive people straight to your domain and have visits from Instagram and other social media channels result in more traffic to your website.
Step 1: Create a hidden drop down menu
To get started, log into your Zibster account. Go to the Website Builder tab to access your site pages. I recommend creating a Hidden Pages drop-down menu to store all your pages that are hidden from the main menu of your site. This can help you organize and keep track of your Hidden Pages.
To do this click the New Page button on the left side of the Website Builder canvas. You will see an option for drop-down, click that and a drop-down menu will appear at the bottom of your website menu items.
Next, click on the new drop-down menu item, rename it Hidden Pages, change the menu’s visibility to hidden, and save changes. Now, any page you nest within the hidden pages drop-down menu will not display on the main menu for the public to see. People will only be able to access those pages with a direct link.
Step 2: Create a new page
Click the New Page button and this time select Page. A new page will appear at the bottom of your site’s menu items. You can name the page anything that you like. Keep in mind that the name will determine the URL and it will be your main hyperlink that you use on social media channels. So name it something easy to remember like Social or Links making the URL for the page YOURDOMAIN.COM/SOCIAL or YOURDOMAIN.COM/LINKS.
From this menu, you can control if the page is visible, hidden or disabled. You can selected hidden if you like. In this menu area, you also can choose if the header or footer is enabled. Select no for both the header and footer to display and click save.
Once you’ve named the page and hidden the header and footer, drag it to the Hidden Pages drop-down menu, it’ll highlight and nest when within a drop-down menu. By placing it within a drop-down menu that is set up as hidden, the page inherits that hidden setting.
Step 3: Add custom code to the page
This is when the customizing comes in. On the right side of the screen, click the SEO button, and go to the Advanced Tracking section. In this area, you can add tracking information for Google and more.
This is also where you can add custom code. Adding code to this area only adds code to the specific page you are modifying, not all pages of your site, so you don’t have to worry about it changing the content of other pages.
In the < HEAD > section, add this handy code our in-house designers set up.
This code does a few things: It removes the header which includes the website's menu. It also removes the footer from the page, that way all you see on the page is the core content, which will be buttons and your logo.
Another thing the code does is change the width of the buttons to stretch across the page and respond to mobile device screen sizes.
Step 4: Add your logo
Now that the code is set up, it’s time to add some branding. Let’s start with your logo. Head on over to the Files section of the Zibster control panel then click Documents in the Top Menu. Here you can upload your logo file directly without resizing. Once uploaded a hyperlink will appear below for a direct link to the image. Copy the hyperlink address or right-click on the logo and select Copy Link Address. Then return to the page you’re working on (in the Website Builder).
In the Website Builder tool panel, select a Text Editor Block and add it to the Website Builder canvas area. Now you can click on the new Text Editor Block to edit the content within the block.
Now, click the HTML tab of the Text Editor Block to add just one more bit of code.
You’ll paste your logos hyperlink where it says replacethiswithyourlogoshyperlink
Then click save changes. You can then review it to make sure it is the size you want it. You can adjust the size by adding width=”###” after the image URL (replacing ### with the desired size in pixels or percentage).
For example, < img src="replacethiswithyourlogoshyperlink" width=”100%” >. By only adding a width, the height will scale proportionately. Tweak and adjust the size till you like it.
Step 5: Add buttons
Now that you have your logo on the page, you can add buttons! In the Website Builder canvas area, add a Button Block from the tool panel. You can add as many as you like and modify each button by clicking on it.
Step 6: Add SEO to the page
Once you have the logo and buttons set up, you can add your own custom SEO for this page. To the right of the Website Builder canvas area, click the SEO button. In this area, you can add your own custom SEO page title, meta descriptions, and keywords.
Click the custom toggle button to enable the ability to add your own SEO. You’ll see suggestions to optimize the content for Google for each section. Add your content and click save changes when you are done.
Step 7: Preview and launch your page
Now it’s time to check out your page on both desktop and mobile to see how it looks and works. Once you are happy with what you see, you can add the link to your new page to your preferred social media channels. This landing page is a great tool to engage people on your social media channels, plus it is optimized for search engines.
We hope this guide will help you to create your own landing page for social media. If you are interested in exploring other options for landing pages, check out our article highlighting Creative Brand Experiences For Social Media Using Zibster Landing Pages. If you need help or would like our Pro Services team to build a landing page for you, please give us a call at 844.353.3412.
0 Comments