9
Nov

DIY DOMAIN MARKETPLACE PART III: A Lander Applied to Multiple Domains

This is part 3 of 10 of our series on Do It Yourself: Domaining Challenge

Here we focus on creating your own marketplace.

Part II is here.

For Part III, we will be creating a landing page template that can be applied to multiple domains, and connect the template to the checkout page we’ve done in part 2.

 

 

Here’s our requirements for the landing page ( feel free to suggest additional requirements down below in the comments section).

R1-The page will have a background picture. We will use a 1024×968 px png.

R2-It needs to be responsive, so it works across browsers and devices. That means R1 needs to scale accordingly.

R3-The template must be smart enough to know the domain name of which it is hosted.

R4-The domain name text -and other strings will be an overlay over the background picture, in the upper middle section of the page .

R5-A click anywhere on the page will trigger a forwarding to the checkout page that we have developed in part 2.

R6-We will not be displaying the price, since price will show up after a click occurs and the prospect arrives at the checkout page.

R7-There will be an enhancement at the end of the series to automatically identify the geographical location and other analytical information + Any other enhancement that you may suggest.

R8-There is a hidden bonus in the source code, that would make your landing even more neat.

1024×768 px. lander’s background picture (You can use any picture you wish).

 

You can download the above file by clicking here.

Ok. Now that we have our background picture, we will now focus on creating some code to fulfill our requirements, i.e.: R1, R2,R3,R4 and R5.

Let’s get even more technical !

Upload this file to your domaining server: landing_template.php

(Or read here on how to clone this project locally on your machine or domaining server)

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Lang" content="en">
<meta name="author" content="Sergio Abrahao">
<meta http-equiv="Reply-to" content="info@domainoverflow.com">
<meta name="description" content="DIY Domaining Challenge: Your own domain marketplace. Part III: Lander template">
<meta name="keywords" content="domaining, domainoverflow, domain overflow">
<meta name="creation-date" content="08-Nov-2017">
<meta name="revisit-after" content="2 days">
<title>TBD-This content will be dynamically changed</title>
<style>
/* Uncomment next line for a bonus special effect. sa. nov,8th-2017
.image:hover { background-size:70%; }
*/
.image { position:relative ; width: 100% ;
/* Requeriment R1 (Background picture) */
background-image: url('part3-lander.png');
background-size: 1024px;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
background-clip: border-box;
transition: background-size 0.2s;
transition-timing-function: cubic-bezier(.07,1.41,.82,1.41);
display: block;
width: 80%;
height: 80%;
text-decoration: none;
cursor: pointer;
overflow: hidden;
text-indent: 100%;
}
h2 { position:absolute;top:20%;left:28%;width:99%;}
</style>
</head>
<body>
<div class="image">
<!-- Requirement R5 !-->
<a href="https://contato.link" target="_blank"><span
style="position:absolute; width:100%;height:100%;top;0;left:0; z-index:1;"
></span></a>
<img src="part3-lander.png" alt=""/>
<!-- Requirement R3 !-->
<h2>h <?php $a= $_SERVER['HTTP_HOST'];
echo trim(strtoupper($a)." is for SALE, by Owner");
?></h2>
</div>
</a>
<script>
(function() {

// Requirement 3 ( Auto-identify domain's name )
var domainOfWhichIsHostingThisPage='<?php echo $_SERVER["HTTP_HOST"];
?>';
console.log("My name is:"+domainOfWhichIsHostingThisPage);
// end of requirement R3. s.

})();

//Change the page's tab title to the domain name

document.title='<?php echo $_SERVER["HTTP_HOST"];?>';

</script>
</body>
</html>

 

*Quick note about changing the tab dynamically: In the past this would defeat the purpose of your SEO efforts. This is no longer true in Google and most search engines, however if you have a specific need of a specific rank within a certain search engine that is not a major one and indexes in a different manner ( this is probably only relevant to search engines that are specific to a country or region) then make sure you dynamically change the meta attributes. Even so, please pay close attention to SEO within dynamic pages as Search Engine Optimizing within a dynamic context would be an entire new DIY series with at least 3 parts.

If you have such concern then the following additional information will be useful to you:

-You need to change the meta attributeS accordingly for example:

$('meta[name="description"]').attr("content", domainOfWhichIsHostingThisPage);

-Find out about React and Angular(or alikes). The main idea is to facilitate SEO and SE indexing even on complex dynamically created javascript tasks and or objects on the page. This is one of the (many) reasons why a parked page will never rank fantastically (without serious efforts).

-The indexing of ‘new tabs’: History API ( HTML5 ) is very helpful on dynamically created content on new tabs as it allows you to index separate urls for each tab you want to open ( so Google index that ).

-For local regional search engines, the alternative would be pre-cached frameworks. Here’s a link with a good reading about it ( we are not associated but recommend their white papers).

After you upload it to your domaining server, then the final result should be as below: *Please note I adjusted the domain name to SLD.TLD for the purpose of this article.

DIY Domaining, Create your own domain marketplace.

 

 

 

 

Click here for the live version.

Don’t forget to adjust the link to your checkout page ( as per part 2 checkout page ).

 

Alternative

This is the part of the article where I will show you how to achieve the same thing but just with a few drags, drops and clicks.

Here’s the quick video on how to create a landing page template for multiple domains., on how to achieve the above and much more with dotboss.digital, The most complete domain management system ever written.

Questions ? Comments ? Suggestions and/or requests ? Feel free to leave a comment down below.

I hope you will find this useful and thanks for reading.

Sergio

 

Tags: , ,

Leave a Reply

1 Comment on "DIY DOMAIN MARKETPLACE PART III: A Lander Applied to Multiple Domains"

Notify of
avatar
Sort by:   newest | oldest | most voted
trackback

[…] Right now, you can already see the deliverable for Part I, Part II and Part III. […]

wpDiscuz

%d bloggers like this: