VLT-Website-Heading

How to add Facebook Page to your HubSpot hosted website

Jun 22, 2020 4:23:10 PM / by Vu Long Tran

This is a guide on how to add one of a Facebook Page box to your website hosted on HubSpot.

Note - These instructions only apply for HubSpot hosted webpages, such as HubSpot Website, HubSpot Landing Pages, HubSpot Blog.

Facebook-page-on-HubSpot

There are two main steps of getting your Facebook Page box added to your HubSpot hosted web page:

  1. Create a new HubSpot Module
  2. Add Facebook Page Plugin code to your new HubSpot Module

How to add Facebook Page to your HubSpot page

Step 1 - Create a new HubSpot Module

As there is no default Facebook Page module on HubSpot, so you will need to create a new one.

So we need to create a new module.

You create a new module in the "Design Manager".

 "Design Manager" in HubSpot is currently found in HubSpot.com > Marketing> Files and Templates> Design Tools.

Create new module on HubSpot

Once you are in "Design Manager", click on "File" and select "new file" and it will allow you to create it in one of your folders. I am saving my new file in my "Coded_Files" folder in this example, but you can choose to save it anywhere you would like.

Create new module on HubSpot

Select "Module".

Create new module on HubSpot

Then select where you would like to use the module. I like to give my new modules flexibility so I can use it across the HubSpot areas, so I tick all: Pages, Blogs, Emails. I also select "Global Module" so I can reuse the module in the future.

Create new module on HubSpot

You will then have a blank new module to work with.

Create new module on HubSpot

 

Step 2 - Add Facebook Page Plugin code to your new HubSpot Module

Now it's time to add your Facebook Page Plugin code to your new HubSpot module.

You can retrieve your Facebook Page Plugin code from Facebook. You get this from Facebook for Developers, where they will let you customise the Page plugin to your website and get the code you need.

Get Facebook Page code

Select your options including the width and height you'd like.

Get Facebook Page code

Select "Get Code"

Choose the iFrame option, as that will work the best.

Get Facebook Page code

Here is a sample of my code if you prefer just to use that. Just make sure you update the page to your  Facebook Page.

<!-- Dejavuguides Facebook Page code -->

<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fdejavuguides%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=211093789643031" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
<!-- Dejavuguides Facebook Page code -->

Add this code into your new module on HubSpot from earlier and "Publish changes".

Add Facebook Page code to module

You will now have a new module with the Facebook Page code in it.

Now you just need to select this new module and add it to your HubSpot hosted page template.

I am using this on my blog hosted on HubSpot, so I look for my blog template on HubSpot. My custom blog template is called "Custom Blog VLT" in this example.

Then on the right side of the page, I look for my newly created module which I called "Facebook Page" earlier.

Add new module to template

Then you can add this to the position of your website that you want. In my case, I wanted to see it on the right side of my website.

Add new module to template

Then you want to "Publish changes" for your template.

Step 3 - Test that Facebook Page box is working

Test that it is working fine.

Here's an example of my blog below:

Example of Facebook Page box working

Enjoy!

Topics: web development, blogging, hubspot, facebook

Vu Long Tran

Written by Vu Long Tran

Solutions Engineer APAC @pymetrics . ex-@Forrester consultant. Tweeting on #cloud, #cybersecurity, #equality and #tech tinkering!