Simple, Free Method To Share Links Without Losing Your Brand

Funny how things come full circle. When I first dipped my toes into creating a business online, it was quite popular to create iframe pages of other websites. In particular, to sites you have an affiliate relationship with. Then, things changed, people complained and iframing a website is frowned upon by the web community and users alike.

Fast forward about 15 years and now you’ll find tools like Snip.ly.

Before moving forward, let me say this is not a criticism about them. In fact, it’s the opposite. I’m very impressed with what they offer and their marketing team is sharp because by a simple re-framing of the offer (brand retention/call to action for social shares vs iframes), they have turned something that once caused alarm bells to set off, into something new, sexy, social, and useful. Kudos!

So, what’s the purpose of this post? Simply to offer an alternative and to present a no-cost method, as well as providing a wonderful HTML/CSS learning opportunity for those who want it. Ready? Read on.

Just so you know – here’s the end result of what we will be building.

1. Create The HTML Page

By now you know the basis of the technology behind a service like this is pretty straightforward. In fact, I cobbled up this ‘tool’ in just a few minutes. You’d first start with a basic no-frills HTML page like this:

<html>
<head>
    <title>Great place to get private label plugins</title>
</head>
<body>
    
</body>
</html>

If you noticed above, I have the title filled in. This can be anything you want.

2. Enter The Iframe

Next, I created the code for the iframe. This is really basic. You’d place the URL of the page you want to share here.

<iframe src="http://www.pluginmill.com" frameborder="0"></iframe>

3. Create The Branding Elements

Now, create the branding blocks. The beauty about building your own here is you can add or create just about anything you want. To keep it simple, I will stick to a small photo of myself matching what is commonly on most of my social media profiles. I also created a message DIV to hold my short message and an action DIV to hold the button, link, or whatever action I’d like people to take.

    <div id="brand-container">
        <img id="profile" src="profile.jpg" alt="Lynette Chandler">
        <div id="brand-message">
            Thanks for checking out my share.<br>Remember to pick up my free download<br><em>Creating Systems & Automating Processes</em>.
        </div>
        <div id="brand-action">
            <a href="https://techbasedmarketing.com/news">Get It Now</a>
        </div>
    </div>

4. Style It

If you are following along this tutorial and view the page right now, you will find it’s a bit of a mess. Fear not. CSS to the rescue. The first thing I’d do when styling, is to do this:

html,body {
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
    }

This sets the page up so that the iframe will have a foundation to be able to be viewed in full. I also set the position to relative so we can later position the branding where we want.

5. Styling The Iframe

The next step is to style the iframe. This will force the iframed page to display fully across the width and height so that it looks like we’re on the page itself.

iframe {
        height: 100%;
        min-width: 100%;
        -webkit-overflow-scrolling: touch;
        overflow: scroll;
    }

6. Positioning The Branding

This is where most of the magic begins.

#brand-container {
        position: absolute;
        bottom: 0;
        background: #C2D4DF;
        color: #333;
        margin: 0 0 20px 20px;
        padding: 10px;
        border-radius: 50px;
        box-shadow: 0 0 5px #888;
        -moz-box-shadow: 0 3px 5px #888;
        -webkit-box-shadow: 0 3px 5px #888;
        box-shadow: 0 3px 5px #888;
    }

Positioning the container to absolute and at the bottom ensures it stays and ‘floats’ at the left bottom of the screen as people scroll down. The rest is just a matter of styling the shape and colors to match your brand.

7. Aligning The Branding Elements

Next, I’ll use inline-block to align the profile, message and action boxes so they stay in one line like columns.

#profile, #brand-message, #brand-action {
        display: inline-block;
        vertical-align: middle;
        font-family: Arial, Verdana, Sans-serif;
    }

8. Styling The Image

This is now added to create a nice rounded effect on the photo.

img#profile {
        border-radius: 50px;
    }

9. Styling The Message

We’ll now add some spacing to the message.

#brand-message {
        margin: 5px 10px 0 5px;
    }

10. Styling The Action Button

Finally, we finish up by styling the action link to look like a bold button to encourage clicking.

#brand-action a {
        text-decoration: none;
        background-color: #083461;
        color: #FFF;
        font-weight: bold;
        padding: 10px 15px;
        border-radius: 30px;
    }

And that’s it. Upload the file and your image to your website and voila! Now you are ready. To share, simply use the URL of the page created.

View The Demo

It all sounds like a ton of work and in many ways it is – only at the beginning. Once you have this set up, you can use it as template, swapping out the iframe URL for each site you want to share. Of course, this is no where as fast and as convenient as Snip.ly which is designed to take all this work out of the process. In addition, you get a ton of nice metrics as well.

This manual option is nice when you want 100% ownership of your own links and for more permanent type links for example to sites that you constantly share and promote.

If you’d like a copy of this template without rebuilding from scratch, get it here.

Facebook Comments