DRUPALDEALS.COM

Talking Drupal: Talking Drupal #381 - A Modular Web with Sam Bhagwat

This is episode #381 A Modular Web with Sam Bhagwat.

For show notes visit: www.talkingDrupal.com/381

Topics

Gatsby
Founding Gatsby
Modular: The Web’s New Architecture
When did you decide to write the book
Key tech changes over time
What is the Modular Web
Successful architecture
Is it similar to serverless
Challenges
Drupal focused companies and modularity
Advice on transitioning
Drupal
2023 and Gatsby
Staying competitive in JS
Kindle Book

Resources

Guests Hosts

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Stephen Cross - www.StephenCross.com @stephencross

MOTW Correspondent

Martin Anderson-Clutz - @mandclu Decoupled Interface Translations Allows a headless application to use Drupal-managed interface translations.

The Drop Times: DrupalCon Pittsburgh 2023: Important Dates to Remember

'Birds of a Feather submissions' will open by the 4th week of this month, on 23 January 2023.

Gizra.com: ElasticBeanstalk ♥ Drupal

Drupal hosting companies like Pantheon or Platform.sh provide tooling, fine-tuned for Drupal, and eliminate many pain points of cloud-based hosting. But sometimes a client can’t use those services. We would like to share the story of crafting an infrastructure for Drupal on AWS using ElasticBeanstalk. A semi-managed environment - generic for every kind of web application. Architecture Overview ElasticBeanstalk web application environment architecture - load-balanced, auto-scaled, managed instances. This diagram from the documentation of AWS contains almost every argument for considering AWS EB.

DrupalEasy: DrupalEasy Podcast S14E3 - Leslie Glynn - How to test Project Browser

Direct .mp3 file download.

We talk with Leslie Glynn about the Project Browser initiative with a specific focus on how to check it out and get involved with the project.

URLs mentioned

DrupalEasy News

Professional module development - 15 weeks, 90 hours, live, online course.
Drupal Career Online - 12 weeks, 77 hours, live online, beginner-focused course.

Audio transcript

We're using the machine-driven Amazon Transcribe service to provide an audio transcript of this episode.

Subscribe to our podcast on iTunes, Google Play or Miro. Listen to our podcast on Stitcher.

If you'd like to leave us a voicemail, call 321-396-2340. Please keep in mind that we might play your voicemail during one of our future podcasts. Feel free to call in with suggestions, rants, questions, or corrections. If you'd rather just send us an email, please use our contact page.

Specbee: How to Integrate Drupal 9 with Bitly for URL Shortening

How to Integrate Drupal 9 with Bitly for URL Shortening Admin 09 Jan, 2023 Subscribe to our Newsletter Now Subscribe Leave this field blank

Bit.ly for Drupal provides a rich API that other Drupal modules can use to access Bit.ly functionality. Today’s discussion topic is how we can integrate Bitly with Drupal 9 easily in just a few simple steps.

But first, what are the first three reasons that come to your mind for shortening a URL? Here's ours–

To make more space for content to be posted on micro-blogging sites such as Twitter
To mask the original URL
To simply reduce the length of a super-long, ugly URL

Bitly has been our go-to URL-shortening service for a long time, and we love its efficacy and speed. For those of you who haven’t stumbled upon Bitly yet, Bitly is a link management platform that offers products and services on link shortening and more. It allows you to shorten URLs for your websites.

Getting Started - Bitly Integration with Drupal 9

Bitly allows for easy integration with your Drupal 9 website. Since there are no stable modules to integrate Bitly in Drupal 9, we will learn about how to call the Bitly API and create forms to integrate it. Here are some steps to get you started with it -

Step 1 – First, you need to create a Bitly account. Go to https://bitly.com/ and create an account. Then you need to login to your Bitly account.

You will then see your Dashboard page.

Step 2 - Next, click on the top-right side of the screen and go to ‘Profile Settings’

Go to Registered OAuth Applications -> Register New App -> Get Registration Code.

It will send you an email to the mail id you used to sign up.

Step 3 - Click on Complete Registration. It will take you back to the Bitly website where you have to add the below details:

And Save this OAUTH App. Once saved, the ‘CLIENT ID’ and ‘CLIENT SECRET’ keys will be generated as shown below.

Step 4 - Next, go to your browser and enter this Url :
https://bitly.com/oauth/authorize?client_id={YOUR_CLIENT_ID}&redirect_uri={YOUR_WEBSITE-URL}
Once you hit this Url, it will redirect to {YOUR_WEBSITE_URL}?code={YOUR_CODE} . Copy this code and paste it somewhere safe so it's not lost.

Step 5 – Next, you have to use POSTMAN to call the API or you can also use the CURL command. Learn more about how the Postman tool can help you with API development and API testing.

The method will be POST, Url is api-ssl.bitly.com/oauth/access_token and parameters will be client_id, client_secret, code, redirect_uri.

When you hit this API, it will return the following –

access_token=TOKEN&login=BITLY_LOGIN&apiKey=BITLY_API_KEY
access_token - The OAuth access token for specified user
login - The end-user’s Bitly username
apiKey - The application key which will be used
This login and apiKey values should be stored and can be integrate with your Drupal modules.

Implementing the Integration

Now let us learn to create a custom form for integrating your Drupal 9 site with Bitly.

bitlyForm.php
<?php
namespace Drupal\bitly\Form;
use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Class bitlyForm.
*
* @package Drupal\bitly\Form
*/
class bitlyForm extends ConfigFormBase {
 /**
  * {@inheritdoc}
  */
 protected function getEditableConfigNames() {
return ['bitly.shorten_url'];
}
 /**
  * {@inheritdoc}
  */
 public function getFormId() {
 return 'bitly_shorten_url_configuration_form';
 }
 /**
  * {@inheritdoc}
  */
 public function buildForm(array $form, FormStateInterface $form_state) {
  $config = $this->config('bitly.shorten_url');
   $form['configuration'] = [
     '#type' => 'fieldset',
     '#title' => $this->t('Configuration'),
   ];
   $form['configuration']['login_name'] = [
     '#type' => 'textfield',
     '#title' => $this->t('Login Name'),
     '#default_value' => $config->get('login_name'),
     '#required' => TRUE,
   ];
   $form['configuration']['app_key'] = [
     '#type' => 'textfield',
     '#title' => $this->t('Application Key'),
     '#default_value' => $config->get('app_key'),
     '#required' => TRUE,
   ];

   return parent::buildForm($form, $form_state);
 }
 /**
  * {@inheritdoc}
  */
 public function submitForm(array &$form, FormStateInterface $form_state) {
   $this->config('bitly.shorten_url')
     ->set('login_name', trim($form_state->getValue('login_name')))
     ->set('app_key', trim($form_state->getValue('app_key')))
     ->save();
   parent::submitForm($form, $form_state);
 }
}

Add the Login name and Application Key that you have generated and stored previously.

Now, let’s create a function to integrate your Drupal 9 website with Bitly.

/**

* Generate Shorten Url.

*

* @param string $url

*   The url.

* @param string $login

*   The login name.

* @param string $appKey

*   The api key.

*

* @return string

*   Returns bitly url.

*/

public static function makeBitlyUrl($url, $login, $appKey) {

 // Create the URL.

 $bitly = ‘http://api.bit.ly/shorten?version=2.0.1&longUrl=’. urlencode($url) . '&login=' . $login . '&apiKey=' . $appKey . '&format=xml';

 // Get the url

 // could also use cURL here.

 $response = file_get_contents($bitly);

 // Xml.

 $xml = simplexml_load_string($response);

 return 'https://bit.ly/' . $xml->results->nodeKeyVal->hash;

Let’s now call the makeBitlyUrl function to generate the Bitly Url.

$config = \Drupal::config(‘bitly.shorten_url');

$bitlyUrl = (string) makeBitlyUrl('https://www.example.com', $config->get('login_name'), $config->get('app_key'));

You will now get the integrated Bitly Url in the $bitlyUrl variable.

Found this article useful? Here’s a really tiny URL of this article for you to copy, embed, or share: //--> //--> //-->

bit.ly/3CySc1v

Click to copy URL to your clipboard

Bitly is a great tool for shortening URLs in a jiffy. We hope this article on integrating Bitly with Drupal 9 proves helpful and you come back to us for more such interesting and resourceful articles. Specbee offers expert Drupal development services to help create compelling websites leveraging the best of Drupal. Contact us to know how we can help.

Drupal 9 Drupal 9 Module Drupal Development Drupal Planet

Leave us a Comment

Recent Blogs

Image

How to Integrate Drupal 9 with Bitly for URL Shortening

Image

How To Accelerate Drupal Development with Lando

Image

Everything you wanted to know about Drupal 10 - Q&A with Experts

Want to extract the maximum out of Drupal? TALK TO US

Featured Success Stories

Upgrading and consolidating multiple web properties to offer a coherent digital experience for Physicians Insurance

Upgrading the web presence of IEEE Information Theory Society, the most trusted voice for advanced technology

Great Southern Homes, one of the fastest growing home builders in the United States, sees greater results with Drupal 9

View all Case Studies

SystemSeed.com: Are you running a Drupal 7 website? Upgrading doesn’t have to be hard

Are you running a Drupal 7 website? Upgrading doesn’t have to be hard

Do I really have to upgrade to Drupal 10 now, or have I still got time? After all, the end of life date for Drupal 7 has been extended to November 1st 2023. Why do I need to go through much stress now?

Kristina Ivanovanik Tue, 01/03/2023 - 11:46

OpenSense Labs: Drupal SEO Masterguide 2023

Drupal SEO Masterguide 2023 Aruna Dhyani Mon, 01/09/2023 - 10:00

The significance of SEO in digital business is no secret. Organizations invest thousands of dollars just to be on the top of the search engine result pages. Despite several tectonic shifts in consumer behavior, organic search delivers the most traffic. More on that later

SEO is more than just adding keywords.

An important part of doing SEO right is ensuring your technical SEO is set right.

Apparently, organizations that have websites built on mature CMS like Drupal have to care less about technical SEO. All aspects of Google-identified site and page-level best practices are ensured out-of-the-box.

In this article, we’ll dive deep to understand different Google ranking factors and how Drupal ensures you stay on top of those trends.

SEO Objectives

Organic search remains the dominant source since budget restraints many marketers to opt for Google Ads for more visibility on SERP.

Best SEO practices not only ensure higher ranking but are also budget-friendly.

According to research, 61% of Google traffic comes from organic searches. Before we move to understand SEO objectives, here's a look at organic SEO trends.

Some of your SEO goals can be:

Brand Visibility: It simply means the rate at which your brand is visible to the target audience. SEO immensely helps enterprises to improve their brand visibility.

The more people are aware of your brand online the better your chances of a higher conversion rate. In this digital age where people consume most of their information online, not having a solid online presence is simply not an option.

Content marketing notably has a great role to play in brand awareness and when it gets infused with SEO it has the potential to make a significant transformation.
Better ROI: Good brand visibility paves the way to high ROI. If you use SEO strategically then your conversions will increase. On-page SEO is an effective strategy to rank higher on search engines and drive more organic traffic to your website.

The more people visiting your website the more likely you will get better conversions.
Organic Traffic: Despite so many shifts in consumer behavior people still mostly use organic ways to search for any product/service.

According to content marketing statistics 2022, quality content with optimized images can increase organic traffic by over 111.3%. On-page SEO addresses all of the tactics necessary for improved organic traffic.

The improved technical aspects of your website contributed to a better user experience, ease to crawl, and thus increased organic traffic.

Let's understand some Drupal SEO modules that you can use to make your website SEO friendly and rank higher on search engines.

Site Level Factors & Modules

Advanced CSS/JS Aggregation: Slow website load directly affects the search engine rankings. Advanced CSS/JS Aggregation is a must-have module for websites with a lot of CSS/JS files which means this module compresses your frontend files and speeds up your website.
CDN: A content delivery network is a distributed system of servers deployed in multiple data centers around the world. Website performance directly affects your search engine ranking and user experience. A website that takes an eternity to load will eventually lose most of its visitors. A CDN will distribute a load of your website across servers globally to reduce load time. This module will help the website in loading faster and thus improves user experience and website performance.
AMP: AMP also known as the accelerated mobile page is an open-source framework launched by a joint initiative of google and several other tech companies. Accelerated mobile pages are lightweight and designed to give mobile users lighting fast and more engaging experience. This module converts web pages as per AMP standards and helps web pages to load faster on mobile and tablets.
Search 404: 404 error occurs when a content of a URL is moved or deleted. It is considered bad for SEO as it hampers user experience and google bots also penalize such websites. When a web page is deleted or moved ‘search 404 module’ will do a search for URLs that are being moved or removed and show the result of the search instead of a 404 error. This improves the site’s SEO by making sure inactive URLs don’t hamper user experience by delivering the content as per the user’s query.
Blazy: Lazy loading is a technique for waiting to load particular parts of the website, especially images- when needed. The Blazy module provides lazy image loading to save load bandwidth and help reduce bounce rate. It also helps in saving bandwidth for important information before the website load completely.
Cloud Flare- This module helps your website load 30% faster, use 60% less bandwidth, and process 65% fewer requests. Cloud flare is a global network designed to make everything you connect secure, fast, private, and reliable. Fast content delivery and Improve SEO are some more features of cloud flare.
XML Sitemap: In the simplest terms site map is an XML file that contains all your website URLs along with additional metadata about each URL. XML site map creates an efficient site map of your website that is easy to crawl and automatically gets added to search engines like google, bing, yahoo, etc. Site map links pertaining to the content, menu items, taxonomy terms, and user profile can also be added.
Simple XML Sitemap: This module helps your website in creating individual site maps for each webpage according to google guidelines and policies. Apparently, a simple XML sitemap helps your website get indexed faster on any search engine. This module creates multilingual site maps for entities, views, and custom links and it supports all Drupal’s content entities i.e. nodes, taxonomy terms, users, and menu links.
Robots txt: A robots.txt file tells search engine crawlers which URLs the crawler can access on your site. Use this module if you are operating numerous Drupal sites from a single code base and each one requires a distinct robots.txt file. This module produces the robots.txt file automatically and allows you to change it from the web UI on a per-site basis.
Schema.org Usage: Pages with micro formatting tend to rank higher on SERP. Schema markup help website create formatted pages that help search engines understand your content easily. This module specifies the mapping between content types and fields with schema.org types and properties.
Menu breadcrumbs: A website with a large amount of data would immensely benefit from the menu breadcrumbs module. As this module builds a navigational path for visitors that helps the website track users' exact behavior on the website and enhance user experience.
Easy breadcrumb: Navigational design of a website describes how different pages of a website are organized and connected to each other. When a site is easy to navigate it increases visit duration. The easy breadcrumbs module helps in creating an accessible navigational website structure that is easy to navigate.
Link checker: This module is useful to detect broken links from the content. Both internal and external links can be checked via the link checker module. It occasionally removes broken links from your stored content by checking the remote sites and assessing the HTTP response codes. Broken links can easily be checked in the log/report section. In the “my account” section, author-specific broken links are stored.
Menu attributes: As the name suggests, this module helps you add extra attributes to your menu section like class, ID, name, style, relationship, and target. A well-organized menu helps users’ website accessibility and experience.
Pathauto: User-friendly URLs are extremely vital for boosting your SEO efforts. Pathauto module allows you to generate a URL based on your content. It is a must-have module for any website to make it SEO-friendly.
Metatag: Search engines usually prefer websites with optimized content and meta description. The meta tag module creates structured meta tags for your website so that your website ranks higher on SERP. In addition to that this module also provides support to meta tags from other social media sites. You can furthermore control how your content is going to appear on different platforms.
Hreflang: Now if are not sure what hreflang is then it is an HTML attribute used to specify the language and geographical targeting of a webpage. When you have different geographies to target then your website should be multilingual. This module is best for websites with multilingual content. The Hreflang module automatically adds tags to your website’s enabled languages.

The multilingual website attracts a larger audience, improves the brand image, and has an edge over competitors. With only 25% native English speakers, it's a great opportunity to reach out to the rest 75%.
External Hreflang: This module allows you to add hreflang for external sites to easily detect spammy and faulty websites. External links connecting spammy websites degrade the user experience and can damage your brand presence and online ranking.
Redirect: Directing visitors and bots from one URL to another is called redirection. The key benefits of redirection are to improve user experience and help search engines better understand website content. The redirect module helps in merging websites, moving domains, deleting existing pages, and switching from HTTP to HTTPS.

301, 302, and javascript redirects inform the web browser that a page has moved from one URL to another and let visitors and users land on the right page.
Domain 301 Redirect: A 301 redirect sends all the requests from the old URL to the new one. Domain 301 redirect help in redirecting users to relevant pages and page relevance congruent with the user’s query help in good ranking. This module allows sites to 301 redirects to a domain that has been selected as the main domain.
W3C Validator: HTML errors or poorly coded websites can hamper the site quality and bad site quality consequently damages your website’s SEO. W3C validator reduces the code size on your web page and adds value to your content. Small codes help your website loading speed on diverse platforms. It validates your HTML and CSS codes according to international coding standards.

Page level factors

CKeditor: It is a rich text editor that helps users write or edit the content inside the webpage. It has a nice writing interface where you can easily format and style content like adding a head, sub-heads, and numbering and bullet feature for better readability.
Disqus: Pages with lots of comments may be a signal of user interaction and quality. In fact, one Googler said comments can help “a lot” with rankings. Enabling comments on a blog has multiple benefits including the possibility. To engage with your readers and grow a strong community. Disqus module helps you integrate a comment feature on your website that helps your readers to better engage with your content.
Scheduler: This module can help content writers to plan and publish content as per their requirements. The scheduler module makes your overall publishing experience hassle-free and supports both Drupal 7/9.

Time Scheduling enables achieving your intended interest group in the circumstances they're on the web, regardless of the possibility of what that time is, hence it has a huge benefit in content marketing.
Automatic Alternative Text: Alt text is basically an alternative text for images. The whole purpose of alt text is to improve accessibility by describing what an image looks like to the user who doesn’t have the ability to see it.

This module automatically generates an alt text for your images if you missed putting one. Interestingly google prioritize images with meaningful alt text and it can be helpful in ranking higher on google.
ImageAPI Optimize: A blog with optimized images has always been the prime factor for higher ranking. Search engines prioritize images that have a proper title, description, alt text, file name, and caption. This module allows you to compress images without compromising image quality with flawless image optimization.
ImageMagick: This is an open-source software suite that helps edit, display, and convert picture elements and vector files. It’s also helpful in creating image thumbnails, color correction, and liquid rescaling which basically means rescaling the image without distortion.
CKEditor Nofollow: A no follow link doesn’t authorize the website it is linking to. You can make no follow the link by Adding the “re=nofollow” code to your website. This module requires no modules outside of Drupal core and is used to add rel="nofollow" to links using CKEditor widget.
Linkit: Internal links are the inclusion of web pages connected to each other. It can increase the ranking of the other pages within your website. It helps both readers and crawlers to easily find your site. Linkit gives you a nice interface for searching and links to internal content on your website instead of you trying to look for URLs manually. Within the editor section, you can select which URL you want to interlink and you will get the asked result.
Editor advance Link: This module helps you convert normal hyperlinks into a styled button. This module allows content creators and editors more control over link appearance or functionality.
CKEditor Entity Link: Drupal entities (content, tag, files) can be easily linked with the help of CKEditor Entity Link. This module is compatible with Drupal 9 and with all content entity types. It allows you to choose which entity types and bundles to search for and also provides an autocomplete box to make entity selection easier.

Drupal SEO Checklist Modules

SEO Checklist: This module is compatible with Drupal 8/9. As the name suggests Drupal SEO checklist module creates an automated SEO optimization checklist so that you can optimize your website hassle-free. If you are someone who likes to follow organized checklists for website optimization then this module is a must-have.
Real-time SEO for Drupal: If you like writing your content according to SEO guidelines then this module is quite helpful. SEO is a great source for organic reach and a higher SERP ranking is the prominent source of it. While writing, real-time SEO for Drupal provides inbuilt SEO-friendly suggestions as per best SEO standards.
Requires on Publish:This module is required when your content is published or getting published. Requires on publish can be used when you have fields on your pieces of content, such as tags or SEO information, that editors don't need to fill up until the material is published.

Conclusion

Drupal comes with countless SEO benefits and it delivers the best SEO results. All the modules that we discussed encompass all the features that can help you achieve the best quality results in 2023 and beyond.

With changing Google updates and SEO trends, you need a technology partner that makes sure your digital game is top-notch.

Our Drupal expertise ensures that your site measures up to Drupal’s capabilities in SEO and you leverage them for the top-most SERP rankings.

Looking to enhance your website’s visibility on Search Engines? Get the SEO results you want.

Articles Off

#! code: Drupal 10: Using Context Definitions To Create Context Aware Plugins

When developing plugins in Drupal a common task is to inject context so that certain tasks can be performed.

For example, we might have a block plugin that needs to know about the content entity of the page it is currently being rendered on. We could potentially inject the routing system into the plugin and use this to find the currently loaded entity, but there is a drawback to this. There is a fair amount of custom logic involved in finding the content entity from the route and we would need to use this same code every time we want to solve this problem.

This method also hard codes the route into the plugin and so makes it difficult to select any other sort of context. There is also a problem when it comes to caching as you also need to inform the plugin about the use of routing so that the caching layers know how to cache things.

This is where context definitions come in. We can use this system to automatically inject context awareness into plugins and then select how that context is detected. This also takes care of the cache systems so we don't need to worry about that.

In this article I will go through using context definitions to detect different types of entities in a block and how caching is handled though context. I'll also show how to configure where the context comes from via the block configuration page.

Adding Context To A Block

Let's take a simple block that renders a field from a node entity. We can place this block onto the site, but it don't show anything as we don't currently have access to the node object.

mark.ie: Double Whammy! Upgrading to Drupal 10 and Gatsby 5 at the same time

Decoupling your frontend (Gatsby) from your backend (Drupal) is the Holy Grail. Change/update one without affecting the other. But what happens when both frameworks release a new version at the same time?

Web Wash: How to Host Drupal Sites using SiteGround

SiteGround is a popular hosting provider for Drupal, WordPress or any PHP powered website.

They offer a wide variety of hosting packages, from shared, managed, and cloud hosting.

However, in this video we focus on their shared hosting product.

They offer three plans; StartUp, GrowBig and GoGeek. The StartUp plan only allows for a single website so we recommend that you go for the GrowBig or GoGeek as they offer more functionality and allow you to host unlimited websites.

All plans offer free SSL (using Let’s Encrypt) and “Out-of-the-box Caching”, where they use NGINX to cache static assets such as images and files. They also offer Memcached, which can help with speeding up your Drupal site.

The GoGeek plan allows you to host and deploy your Drupal site using Git, which could be helpful if you use Git to manage your Drupal site.

In this video, you’ll learn how to install Drupal using the GoGeek plan on SiteGround.

Subscribe to