📣🚀🐣🌼 Sonic Bloom - Spring Sale! | Exclusive offers for Cloud Shared Hosting - 70% OFF | Starting from $3.99/mo
Learn Ghost

Young blogging platform build on tope of node.js for fast loading speed and easy scalability!

• Last Updated: 05/15/2020
• ( 3 minutes reading )

How to display Social Media icons on your Ghost blog

Introduction

These days, it is difficult to imagine an application that cannot be linked or integrated with your social accounts. Facebook and Twitter, along with many others, have become such an integral part of our lives that we want to use them with anything we can.

The Ghost publishing platform made no exception in this area and made it possible for the users to link their social accounts to their blogs, create custom sharing cards for the website, and each individual post. The way of generating structured data for your website and posts have already been covered in our How to create and publish posts in Ghost and How to customize metadata information on your blog tutorials. 

In this article, we are going to teach you how to link your Twitter and Facebook social accounts with your blog and display their icons on your page for ease of access. We will also explore a neat trick on how you can integrate other social media websites using the secondary navigation menu. Afterward, you can implement special styles, icons, and colors using CSS to change everything around, per your needs. Let’s get started!

 

Accessing the General Settings

To access the General Settings page, you have to log into your Ghost Admin Dashboard. To do so, please open your favorite browser and enter your domain name, followed by "/ghost". For example:

  • ghost.hostarmadatutorials.com/ghost

 

Ghost Login page

 

After logging in, please point your attention to the left side of the screen. You will see a sidebar, and from the listed choices, please click the “General” option.

 

Access General Settings

 

This will take you to the “General Settings” page, allowing you to perform all sorts of changes on your blog.

 

Linking Social Accounts

When you land on the “General Settings” page, please scroll down to the bottom of it, where you will see the “Social Accounts” section. There will be a single row under this section, and at the far right of it, you will see the “Expand” button.

 

Expand Social Accounts Settings

 

Clicking the “Expand” button will reveal two text fields. Inside the first one, you need to enter your Facebook publication page, and on the second one, your Twitter publication page. This will promote your structured data and rich cards for each respective social media.

 

Insert Facebook and Twitter connection links

 

Upon entering the URLs of the Facebook and Twitter pages of your blog, please press the “Save settings” button located on the top right corner of the page.

 

Save Social Accounts Settings

 

Upon performing this action, Ghost will generate Facebook and Twitter social icons, which are going to be displayed at the upper right corner on your website frontend.

 

Facebook and Twitter Icons on the frontend

 

When clicked, these icons will redirect your visitors to the corresponding Social Media page.

 

Adding Social Icons using the Secondary Navigation Menu

This method requires CSS and HTML knowledge in order for you to be able to place the rest of the social icons you need next to the current ones. First, you need to add a secondary navigation menu. You may do that using our tutorial Navigation Menu tutorial.

After adding the links with their associated URLs, we recommend looking at the following codepen.io link where you can see excellent ideas about customizing the new links you added on the page. The secondary menus can be accessed in the theme with {{navigation type="secondary"}} and will output the links and labels entered in Ghost Admin, the same way the original Navigation menu does.

In addition to that, you may find a ton of free social icons and similar material at iconmonstr.com.

 

That’s it! The way to implement the Facebook and Twitter icons on your website’s page and a neat trick you can use to add more social icons with a bit of HTML and CSS knowledge. We hope that the information was helpful and has inspired you to think of even more creative ways of achieving your goals.

 

 

...
Sebahat
Technical Support Captain

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.