CMS Development

smithtb25
Participant

Powerful Related Posts Feature

SOLVE

Hi everyone, 

 

I found this resource provided by Hubspot about how to implement a related posts section, but we're looking for that to be both auto-populated and manually entered - so if there are 3 related posts, we can choose to manually select 1-2-3 of those slots or if we don't manually select them they'll be auto-populated.

 

Auto-populated posts will be determined by topic (or if on WordPress it would be determined by Category/Tag/Custom Field).

 

If we go this route on Hubspot through, we will be limited to only blog posts, correct? Could we have one of the 3 related posts actually be a website page?

 

It's important to note that I'm speaking more in terms of WordPress vocabulary about the difference between a "post" and a "page," because this related reading functionality is what will ultimately determine if we migrate our entire 500+ article blog into Hubspot, or if we need to stay in WordPress.

 

Specifically, I want to recreate this plugin's functionality: https://www.relatedpostsforwp.com/

 

From their site, on the "Tour" page in the menu: "What’s better than related posts below your posts? How about blog posts with related products of your webshop? Or job listings with related jobs? With Related Posts for WP you can easily setup any post type to have related content of any post type you like. The possibilities are endless."

 

For instance, if someone reads a blog about branding, we'd want one of the related readings to be our "services" page for branding, or a case study that lives on our site as a specific page.

 

Let me know your thoughts, I assume that we couldn't hijack this functionality within Hubspot the same way we can with a WordPress plugin, which means we'll need to stick within WordPress.

 

Thanks!

1 Accepted solution
AJLaPorte_diagr
Solution
Key Advisor

Powerful Related Posts Feature

SOLVE

Hey Smithtb25,

 

The plugin looks to have some great functionality so i'll try to explain the process from an HS standpoint as much as I can. 

 

HubSpot has a new design manager in beta currently and in it there is a new way of doing custom modules. In order to make what you want happen, you'd have to use this new beta and a custom module.

 

Ideally, you would create a module with a boolean (for either toggling auto-populate or manual). 

 

If you have it be auto, you would then use something like the related posts from HubSpot's resources or using some kind of combination of the random filter on the blog_recent_topic_posts function. This should get you your automated showing of 3 relevant (recent) posts from the same tag. 

 

If you have it set to manual, you can then use the new selectors from the custom modules of "Blog" and "Page" in a grouped field. You could then code it to where if you have a blog chosen to show that, if not, show a page.

  • For a blog, you could simply pull in the featured image of the post and all that info programmatically based on the blog you select. 
  • For a page, you could include an additional image field to assign an image or if you are using a custom module on the page template, you may even be able to pull in that image from there along with the page titles.

It would look something similar to this

(note: just threw this together so it's more a 'this is an idea of how to do it' vs 'do this')

Image 16.jpg

 

Your editors should then see the options grouped like so in the page editor:Image 17.jpg

 

 

You could go one step further and have repeater options (if you wanted to control how many to have 1, 2 or 3) or you can hardcode it to three if needed.

 

Hopefully, this helps point you in the right direction (whether that's HubSpot or WP). Let me know if you have any additional questions! 

 

-AJ

View solution in original post

0 Upvotes
13 Replies 13
AJLaPorte_diagr
Key Advisor

Powerful Related Posts Feature

SOLVE

Hey @smithtb25@poojanadkarni1, and @justin_at_quest

Just wanted to reply to you again as HubSpot just released a new tag for use in regards to related posts. I wrote a blog about it that explains it and shows some code examples of what you can do with it:

 

https://blog.wsol.com/in-beta-hubspots-related-posts-tag-explained-and-extended

 

The direct documentation to it on HubSpot is here:

https://designers.hubspot.com/docs/hubl/hubl-supported-tags#blog-related-posts

 

0 Upvotes
smithtb25
Participant

Powerful Related Posts Feature

SOLVE

Great, thank you! I think we're going to need to keep our blogs in WordPress in order to preserve a more powerful related reading functionality (whether related reading is a blog, another page on our site, or other materials).

0 Upvotes
AJLaPorte_diagr
Solution
Key Advisor

Powerful Related Posts Feature

SOLVE

Hey Smithtb25,

 

The plugin looks to have some great functionality so i'll try to explain the process from an HS standpoint as much as I can. 

 

HubSpot has a new design manager in beta currently and in it there is a new way of doing custom modules. In order to make what you want happen, you'd have to use this new beta and a custom module.

 

Ideally, you would create a module with a boolean (for either toggling auto-populate or manual). 

 

If you have it be auto, you would then use something like the related posts from HubSpot's resources or using some kind of combination of the random filter on the blog_recent_topic_posts function. This should get you your automated showing of 3 relevant (recent) posts from the same tag. 

 

If you have it set to manual, you can then use the new selectors from the custom modules of "Blog" and "Page" in a grouped field. You could then code it to where if you have a blog chosen to show that, if not, show a page.

  • For a blog, you could simply pull in the featured image of the post and all that info programmatically based on the blog you select. 
  • For a page, you could include an additional image field to assign an image or if you are using a custom module on the page template, you may even be able to pull in that image from there along with the page titles.

It would look something similar to this

(note: just threw this together so it's more a 'this is an idea of how to do it' vs 'do this')

Image 16.jpg

 

Your editors should then see the options grouped like so in the page editor:Image 17.jpg

 

 

You could go one step further and have repeater options (if you wanted to control how many to have 1, 2 or 3) or you can hardcode it to three if needed.

 

Hopefully, this helps point you in the right direction (whether that's HubSpot or WP). Let me know if you have any additional questions! 

 

-AJ

0 Upvotes
justin_at_quest
Member

Powerful Related Posts Feature

SOLVE

can you guys help me get this code working fro my blog? It looks like it is exactly what I need. I'm not above using bribery...

0 Upvotes
poojanadkarni1
Participant

Powerful Related Posts Feature

SOLVE

Hi,

 

I have no idea of coding and I have these blog posts . Wanted to create a section just underneath my blog posts for related posts. It should be placed horizontally.  Right now I drgagged hubl module and copy pasted the code i just googled. But the posts look totally off . I want them to be nicely placed side by side horizontally. Please help.

0 Upvotes
AJLaPorte_diagr
Key Advisor

Powerful Related Posts Feature

SOLVE

@poojanadkarni1 do you have a link to your site so we can take a look? It would be easier to provide direction if we can see what you are seeing. 

0 Upvotes
poojanadkarni1
Participant

Powerful Related Posts Feature

SOLVE
0 Upvotes
AJLaPorte_diagr
Key Advisor

Powerful Related Posts Feature

SOLVE

@poojanadkarni1 that link is an internal link and I would need to be apart of your portal in order to view that. To get a preview link, please use this option below:

Image 93.jpg

and paste the URL you get from the new window that opens with the preview. 

0 Upvotes
poojanadkarni1
Participant

Powerful Related Posts Feature

SOLVE
0 Upvotes
AJLaPorte_diagr
Key Advisor

Powerful Related Posts Feature

SOLVE

Hi @poojanadkarni1,

 

It looks like HubSpots preview buttons are not working properly and generating wrong links. I was able to piece the link together from a past preview I had:

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=...

 

It looks like the content is pulling in fine, you just need CSS styling to make it look correct. I would recommend limiting the posts shown from 5 to 4 and then using the following CSS to make them float side by side:

 

.hs-hash-2043319997 li {
    float: left;
    width: 25%;
}

If you want to keep 5 posts, then you would want the width to be 20% instead of 25% (100 / # of columns). 

 

You'll most likely have to do some more styling to get it how you want it to appear in terms of sizes and more but using the class of 

.hs-hash-2043319997

should help you target you listing. If you wanted to target the header above, you should add a class to the module element and use that class to style your module. Hopefully this helps point you in the right direction. 

 

-AJ

0 Upvotes
smithtb25
Participant

Powerful Related Posts Feature

SOLVE

This is awesome and exactly what I needed, thank you so much!

0 Upvotes
justin_at_quest
Member

Powerful Related Posts Feature

SOLVE

did you have to make any changes to the code above to make it work? I can't seem to get it to work...

0 Upvotes
smithtb25
Participant

Powerful Related Posts Feature

SOLVE

Hey there, we never actually implemented this solution because the WordPress plugin we were looking at ended up being more powerful and suited our needs better. Our blog is staying in WP for the time being.

0 Upvotes