Create a Twitter-style application in Drupal

5 min readOct 7, 2022

--

Photo by https://unsplash.com/photos/9Z-2Ktg6CIM

Overview

This tutorial shows you how to create a social media application with features similar to Twitter and many others using a handful of Drupal modules and a custom block plugin.

Features: Posts, Mentions, Threads, Timeline, & Likes

1. Setup

a. Create a new Drupal project using the Drupal recommended composer template
composer create-project drupal/recommended-project:^9 --stability=dev drupal-social

b. Configure DDEV (optional)
ddev config --docroot=web --project-name="drupal-social" --project-type=drupal9 --webserver-type="nginx-fpm" --create-docroot

c. Start DDEV
ddev start

d. Add Drush support
ddev composer require drush/drush

e. Install Drupal standard install profile
ddev . drush si -y standard

2. Posts

a. Add “Posts” comment type at /admin/structure/comment

b. Configure comment form display to hide subject field: /admin/structure/comment/manage/posts/form-display

c. Add “Posts” comments field to /admin/config/people/accounts/fields

d. Install maxlength module
ddev composer require 'drupal/maxlength:2.0'

e. Enable maxlength module
ddev . drush en -y maxlength

f. Configure maxlength for “Posts” field

g. Install ckeditor module for compatibility with maxlength
ddev composer require 'drupal/ckeditor'

h. Enable ckeditor module
ddev . drush en -y ckeditor

i. Configure ckeditor for Basic HTML filter at /admin/config/content/formats/manage/basic_html

3. Mentions

a. Install the CKEditor Mentions module
ddev composer require drupal/ckeditor_mentions

b. Add CKEditor library dependencies https://git.drupalcode.org/project/ckeditor_mentions

c. Enable the CKEditor Mentions module
ddev . drush en -y ckeditor_mentions

d. Add Mentions to CKEditor admin/config/content/formats/manage/basic_html

e. Add “view user information” permission to authenticated users role

f. Create a test user and mention the user in a comment

4. Likes

a. Install Flag module
ddev composer require drupal/flag

b. Enable the Flag module
ddev . drush en -y flag

c. Add “Like” flag for comments

d. Create view for liked posts using “Flags” relationship

e. Add “flag like” and “unflag like” permissions for authenticated users

f. The finished Likes page should look like the screenshot below.

Example of liking a post from another user

5. Timeline

Create a block plugin with entity query that shows user posts or posts that user follows and common form on only user’s own timeline

a. Add “Following” Flag

b. Add “flag following” and “unflag following” permissions to authenticated users

c. Generate a block plugin with Drush
drush generate plugin:block

d. Create view that shows “Posts” comments by author

Filter by type “Posts”, add User ID filter

Allow multiple values to be passed into this contextual filter

e. Edit build() method in our new block plugin. First, get current page user and followed users.

f. Add view to block plugin with followed users as argument

g. Only show form if the user is viewing their own page

h. Disable caching on this page

i. Embed block on user page (see full block example)

j. Once you have this configured you should see a comment form on your user page plus any posts you have created or posts of other users you follow (similar to Twitter).