Create a Twitter-style application in Drupal
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 templatecomposer 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 DDEVddev start
d. Add Drush supportddev composer require drush/drush
e. Install Drupal standard install profileddev . 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 moduleddev composer require 'drupal/maxlength:2.0'
e. Enable maxlength moduleddev . drush en -y maxlength
f. Configure maxlength for “Posts” field
g. Install ckeditor module for compatibility with maxlengthddev composer require 'drupal/ckeditor'
h. Enable ckeditor moduleddev . 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 moduleddev composer require drupal/ckeditor_mentions
b. Add CKEditor library dependencies https://git.drupalcode.org/project/ckeditor_mentions
c. Enable the CKEditor Mentions moduleddev . 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 moduleddev composer require drupal/flag
b. Enable the Flag moduleddev . 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.
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 Drushdrush generate plugin:block
d. Create view that shows “Posts” comments by author
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).
Conclusion
This tutorial showed how to add common social media features to a Drupal 9 application.
The links below include Github projects for a fully configured Composer feature as well as a full project template (compatible with Gitpod).
Let me know what you think! https://twitter.com/drupalninja
Links
- Composer feature:
https://github.com/drupalninja/social/tree/1.x - Full demo install:
https://github.com/drupalninja/drupal-social/tree/1.x - Gitpod:
https://www.gitpod.io/#https://github.com/drupalninja/drupal-social/tree/1.x