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

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.

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.

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.

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.

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.

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.