Simple twitter feed with custom block

Twitter

 

In this article, we will present how we built a simple twitter feed in Drupal 8 with custom block and without any custom module. This block will display a list of tweets pulled from a custom list as in the example shown in the side bar.

As a prerequisite, you need to have a twitter account and a custom list in your feeds.

1) Get code from "twitter publish"

First, we need to get the code that is generated by twitter publishing api.

On this page, enter the needed url for the list of tweets you want to display as in the example below:

embed

The code will be generated from the url and you can add some custom format:

format

Once you have updated your options, you can just coy the custom code:

code

We will use this code to create the block.

 

2) Custom block

In custom block library (/admin/structure/block/block-content), click on "+ Add custom block" button.

In the custom block body (full HTML), copy the code generated previously in "<> source" mode and click save:

edit block

You now have a custom block that you can place anywhere in your site. To do so go to /admin/structure/block and click on the "Place block" button where you want to display your block.

The result :

Twitter block

 

For more advance block creation, see also this article.

Comments

Submitted byFelipe Fidelix (not verified) on Fri, 01/06/2017 - 17:58

You could also just use this module:

https://www.drupal.org/project/twitter_feed

Yes very true. Thank you for the input.

But the idea here was to make something very simple without any external module to install using only Drupal core modules.

 

Submitted bymeh (not verified) on Fri, 01/06/2017 - 22:35

<p>it is bad practice to allow editors to do full html and inject inline script tags into a WYSIWYG.</p>

Well, if full HTML is restricted to  site "Administrator" like in the comments, you should be able to trust someone to do it with minimum risk. Editor is another permission.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.