Link Your Social Profiles

Learn how to add social networks to your site

This tutorial covers the following topics:

In Drupal 7 and earlier versions, the Social media module comes pre-installed so you could add the icons via the theme settings. This module has not been ported to Drupal 8 and you would have to install an additional module to add social icons to your website or add them manually.

Use Modules to Add Social Buttons

For this website we would download and use the Social Media Links Block and Field module. To install it you should go to the Extend menu and then click on the Install new module button.

Browse for the plugin's installation file and click on the Install button.

After you install it, you should make sure to enable it by going back to Extend and finding the OTHER section. There you would see the Social Media Links Block and Social Media Links Field. Make sure to place ticks on them both and press the Install button.

When the module is successfully installed and enabled, go to Structure > Block layout and choose where you would like to add the block. In case you want to add it in the website's footer just press the Place block button next to Footer.

A pop-up with a list of the available social buttons would appears where you just have to enter the related URLs. When you enter the desired URLs press the Save Block button.

Once you have added the block click on the Save blocks button and the bottom of the page.

Now you have Social Media Buttons on your website.

Add Facebook Embedded Comments

Adding different social boxes is really easy. First, you need to get the code from the social network you want to link. For the purpose of this tutorial, we will add Facebook embedded comments but it's the same if you want to add a Facebook like button, Twitter Feed or different widget.

To begin, go to Structure > Block layout > Custom block and click on the Add custom block button.

First, add description for that block. Then, simply paste the code provided to you by Twitter, Facebook or other social network. Make sure you're in plain text mode and your editor is set to Full HTML.

Once you are ready, click the Save button and add the custom block to your Footer, Top bar or other block of your website.