A social media feed embedded on a website

Adding a social media feed to any Drupal page is fast and straightforward, and you don’t need any technical skills.

Here’s a three-step guide on how to add a social media feed to Drupal:

  1. Pick social media accounts and hashtag feeds

  2. Choose a social media feed layout

  3. Embed social media feeds on any Drupal page

Step 1: Pick social media accounts and hashtag feeds

If you’ve already added content to your Flockler, skip to step 2.

If you haven’t set up Flockler for your organisation just yet, start by signing up for a 14-day free trial.

On the 'Automated Feeds' tab, you can create live-updating feeds from various social media channels. By default, the content gathered with Flockler’s feeds is displayed in one place. Here’s the full list of social media channels and content sources that you can combine and show on a Drupal site or any other digital service.

To give you an example, here’s a one-minute video on how to create a Facebook Page feed:

Step 2: Choose a social media feed layout

The next step is to choose a layout for your social media feed and get an embed code. If you’ve already created an embed code, you can skip to step 3.

Click the 'Display' tab on Flockler to create a new layout, and select one of the four options.

Flockler app’s display options

Wall, Grid, and Carousel layouts you can embed on your Drupal website, and the Slideshow layout is your choice for digital screens at the office and in live events.

After selecting your layout, you’ll get an embed code.

Flockler’s embed code after selecting a layout for the social media feed

Step 3: Embed social media feeds on any Drupal page

The final step is to copy Flockler’s embed code and add it to Drupal.

Drupal is one of the most adaptable CMSs in the market, and you can add Flockler to your site in quite a few ways. In this tutorial, we’ll demonstrate two options:

  1. Add Flockler to any Drupal article and page

  2. Add Flockler to your homepage using the block element

Option 1: Add Flockler to any Drupal article and page

Adding Flockler to Drupal’s article page is straightforward. Navigate to the 'Content' section on Drupal and create a new article/page or edit one of the existing pages.

In the article editor, select the 'Full HTML' option from the dropdown, click the 'Source' button in the toolbar, and paste Flockler’s embed code to the body field.

Adding an embed code to the Drupal article page editor

That's all. Save changes, and the stunning social media feed displays on the page.

A social media feed embedded on a Drupal site

Option 2: Add Flockler to your homepage using the block element

If you’ve been editing Drupal pages before, you are probably familiar with the concept of blocks. You can add block elements to any Drupal page.

Open Drupal’s site management, select Structure > Block layouts and click the 'Custom block library' tab. Next, click the '+ Add custom block' button.

Adding a custom block in Drupal’s site management

In the editor, give the block a name (e.g., Flockler widget). Make sure to select the 'Full HTML' option from the dropdown. Then click 'Source' in the toolbar and paste Flockler’s embed code to the Body field. Click to save changes.

Creating a custom block in Drupal

After that, navigate to the 'Block layout' view in Drupal and select where you’d like to add Flockler. For example, you could add it to the Content area. Click 'Place block'.

Adding a custom block to the Content area on Drupal

Then select the block ('Flockler widget') you created earlier.

Selecting a custom block in Drupal’s site management

In the editor, you can select if the block's title is visible on your page and if there are any restrictions. For example, you could decide to restrict this element to show on a specific page.

Configuring the custom block in Drupal’s site management

After configuring your custom block, scroll down the page and click 'Save blocks' to save your changes.

Save changes to blocks in Drupal’s site management

That’s it! Now the social media feed displays on your Drupal site!

If you have any questions or feedback, don’t hesitate to contact us via live support chat on our website or send us an email to team@flockler.com.

Did this answer your question?