Drupal 8 - Add Twitter follow button

Share

Sharing is caring. Tell your friends about this article.

 

You created a website, created a Twitter account and now you want an easy way for visitors of your website to follow you on Twitter. There are modules out there to handle this for you but I like to keep the number of modules installed to a minimum and there is a very easy way to handle a follow button using custom blocks.

1. Create a Custom Block

Go to "Structure" and then "Block layout". Here we choose the "Custom block library" tab. Click the "Add custom block" button. We are now in the form to create a new block.

Add title. We go with "Twitter Follow"
For the body we change the text format to "Full HTML"

Create Twitter follow block in Drupal

2. Get the Twitter Follow code

Open a new browser tab or window and login to your Twitter account. When logged in we go to "https://publish.twitter.com/#". This is where we configure our button and get the code. We don't want to embed anything so we scroll down and click on "Twitter Buttons".

Choose Twitter Button

A dialog appears and we choose the second one "Follow Button".

Choose Twitter Follow Button

Another dialog pops up and here we fill in our Twitter name. In my case @DebomaDevStudio. Now we click "Preview" to confirm.

Input Twitter handle for the Twitter Follow Button

We now have a basic follow button. The are some minor customizations possible. Click on the "set customization options" link to change the size of the button or to remove your Twitter name from the button.

Copy the Twitter Follow Button code

When the button is the way you like it, we click the "Copy Code" button.

We go back to our website browser tab or window and click in the body field. In the body text editor click the button "Source". We want to to paste as source because we are pasting code and not text. This is very important because if you paste as text it won't work. Now we paste (ctrl-v) the code we just copied. When we're done we click save. We return to the "Custom block library" page and see the block we just created listed.

3. Place the block

We now go back to the "Block layout" tab and search for a section we want to put the block in. I'll go with sidebar first. Click on the "Place block" button in the "Sidebar first" header. In the list we choose the block we just created. I don't use the title in these kind of blocks so you could uncheck the "Display title" checkbox. Click "Save block" and we should see the block appear in the section.

Place the Twitter Follow Button block in Drupal

Go to the bottom of the page and click "Save blocks"

4. See the result

Click on the "Back to site" menu on the top of the page. The frontpage of your website loads again and we should see our Twitter Follow button appear on the page.

The Twitter Follow Button in your Drupal website

 

This tutorial is also available as video

Category

Web Development
Development Channel
Dolphin74 YouTube Channel

Tags

© 2020 Copyright Deboma.com