Contact
June 2, 2014 | Rob Spurlock

How to Create a Custom Author Box in the HubSpot Blog

HubSpot Custom Author Box

Moving from one website or marketing platform to another can be difficult and frustrating.

Often, our clients want to move their blogs from Wordpress to HubSpot because the HubSpot blogging platform is tightly integrated with other HubSpot tools, including CTAs, contact lists, and workflows. With the HubSpot blog, your email subscribers can also receive an email digest that is automatically generated from the blog's RSS feed, all without any additional work on your part.

Do you want all these functions, but wish you could have an author information box with each post in addition to HubSpot's author page? With a little effort, you can create your own custom author box in the HubSpot blog - and it's not too difficult with a some coding knowledge.

Here's a step-by-step guide to create your own cool-looking author box for the bottom of every blog post your authors create.

How to Create a Custom Author Box in the HubSpot Blog

Step 1: Create/Edit Your Authors

Whether you have multiple authors or a single one, you need to fill out all the information you can (including a bio, social media links, etc.) to help your readers connect and engage with them.

To do this, log in to your HubSpot portal then click on Content > Blog in the menu. You’ll see Authors in the menu along the left-hand side; click on it and it will take you to the Blog Authors page. Once there, you can click on the gear beside an existing author to make changes, or click Add an Author to create a brand new one. Fill out all the information that you can and that you want to share with your blog readers.

Step 2: Edit the Template

Navigate to your blog template in the Design Manager and open it up for editing.

The new layout shows the 2 editing options ("Edit Post Template" and "Edit Listing Template") directly in the Blog Content module display. For now, we're just putting this custom author box on the full individual post rather than the blog feed page, so you want to click on the Edit Post Template button.

Step 3: Paste the Code

Using the HubSpot HubL code (learn more about HubL here), you can now display any of the author fields any way you want in a blog post. Below is our code example:

<div class="about-author-sec">
    <div class="row">
        <div class="small-12 columns">
            <img class="author-avatar" alt="Rob Spurlock" src="http://cdn2.hubspot.net/hubfs/175296/kyan_images/VIEO_Team_Images/rob-headshot.jpg"> 
           
                <div class="hs-author-social-section">
                    <div class="hs-author-social-links">
                       
                            <a href="https://www.facebook.com/robspurlock1" target="_blank" class="hs-author-social-link hs-social-facebook"><i style="color:#507cbe" class="fa fa-facebook-square fa-2x"></i></a>
                       
                       
                            <a href="http://www.linkedin.com/in/robspurlock" target="_blank" class="hs-author-social-link hs-social-linkedin"><i style="color:#90cadd" class="fa fa-linkedin-square fa-2x"></i></a>
                       
                       
                            <a href="https://www.twitter.com/RobSpurlock1" target="_blank" class="hs-author-social-link hs-social-twitter"><i style="color:#63cdf1" class="fa fa-twitter-square fa-2x"></i></a>
                       
                       
                            <a href="http://plus.google.com/107097133490588961739?rel=author" target="_blank" class="hs-author-social-link hs-social-google-plus"><i style="color:#4d4f54" class="fa fa-google-plus-square fa-2x"></i></a>
                       
                    </div>
                </div>
           
        </div>
    </div>
</div>
 

In this example, we broke apart the code for each of the individual elements of the author profile so we can display them independently and control the look and feel of each element. The data is dynamic and is dependent upon the author who wrote the post.

Step 4: Make It Beautiful

Finally, I've included our CSS classes above, including Zurb Foundation framework and Font Awesome for base styling. Any additional styling is up to you!

Here's the result:

rob.png

Step 5: Figure Out Other Uses for HubL

The underlying syntax used in COS templates is referred to as HubSpot Markup Language, or HubL. HubL syntax is heavily inspired by Django, Jinja, and Python. It is very powerful and allows you more granular control of data than you normally have through prebuilt HubSpot modules. Everyone wants more control, right? So go explore, experiment, and let the world know what you discover.

If you need help with your HubSpot layout, or would like more information about Inbound Marketing using HubSpot, let us know!

VIEO Design Free Website Assessment

hubspot-custom-author-box-1.jpg

Rob Spurlock

Rob Spurlock

Principal and Founder of VIEO Design™, LLC. Rob has a love for the East TN community. Server environment, web functionality and WordPress expert. He has extensive expertise in the Internet industry and related Internet software with over 15 years experience.

Related Post: