Product Dev Back to Ghost

How to Display Facebook and Twitter Links with Author Details

With the release of Ghost 0.8 you have the option to include a Facebook profile link as well as a Twitter profile link within the author details of a post.

Update your user settings

To get started, navigate to the Team section of your blog settings.

Once there, select the author you'd like to add Facebook and Twitter links to.

Then, on the user's profile page, add the links to each of the social profiles using the provided fields.

Edit your theme

Next, we need to edit the theme files to display the links within our author meta. In the Casper theme, this would be the post.hbs file.

The specific section of code we're going to work with is located between the {{#author}}{{/author}} block helpers.

Add the following code snippet just after the {{#if website}}{{/if}} block:

{{#if facebook}}<span class="author-link icon-facebook"><a href="{{facebook}}"> Friend me on Facebook</a></span>{{/if}}

{{#if twitter}}<span class="author-link icon-twitter"><a href="{{twitter}}">Follow me on Twitter</a></span>{{/if}}

Notice how we're using {{#if facebook}} and {{#if twitter}} to first check to see if the author has included the information in their profile. If they have, we then use {{facebook}} and {{twitter}} to populate the link for each.

Once you've included the code, and added both links to your user profile, the display included at the bottom of each post should now look similar to this:

Need a hand?
If you're having trouble setting up the code, feel free to reach out to the community on our Slack team page, or drop us a message to [email protected].