Using Social Inputs to edit your data

Change the appearance of your text fields with social network icons.

Facebook

Text field with a logo for Facebook social handles and full URLs.

Shown for input keys matching:

  • facebook
  • *_facebook
  • *-facebook
  • *Facebook
  • facebook_username
  • *_facebook_username
  • facebook-username
  • *-facebook-username
  • facebookUsername
  • *FacebookUsername
  • facebook_url
  • *_facebook_url
  • facebook-url
  • *-facebook-url
  • facebookUrl
  • *FacebookUrl
Screenshot of a facebook username
Screenshot of a facebook url
Front Matter
facebook: CloudCannon
facebook_username: CloudCannon
facebook_url: 'https://www.facebook.com/CloudCannon'

Twitter

Text field with a logo for Twitter social handles and full URLs.

Shown for input keys matching:

  • twitter
  • *_twitter
  • *-twitter
  • *Twitter
  • twitter_username
  • *_twitter_username
  • twitter-username
  • *-twitter-username
  • twitterUsername
  • *TwitterUsername
  • twitter_url
  • *_twitter_url
  • twitter-url
  • *-twitter-url
  • twitterUrl
  • *TwitterUrl
Screenshot of a twitter username
Screenshot of a twitter url
Screenshot of a twitter username with a different key
Front Matter
twitter: CloudCannon
twitter_username: CloudCannon
twitter_url: 'https://twitter.com/@jekyllrb'
Note

The Twitter @ symbol is stripped from the value on save for a consistent output. These interfaces display a placeholder @ symbol.

Instagram

Text field with a logo for Instagram social handles and full URLs.

Shown for input keys matching:

  • instagram
  • *_instagram
  • *-instagram
  • *Instagram
  • instagram_username
  • *_instagram_username
  • instagram-username
  • *-instagram-username
  • instagramUsername
  • *InstagramUsername
  • instagram_url
  • *_instagram_url
  • instagram-url
  • *-instagram-url
  • instagramUrl
  • *InstagramUrl
Screenshot of an Instagram url
Screenshot of an Instagram username
Front Matter
instagram: purenewzealand
instagram_username: purenewzealand
instagram_url: 'https://www.instagram.com/purenewzealand/'

GitHub

Text field with a logo for GitHub social handles and full URLs.

Shown for input keys matching:

  • github
  • *_github
  • *-github
  • *Github
  • github_username
  • *_github_username
  • github-username
  • *-github-username
  • githubUsername
  • *GithubUsername
  • github_url
  • *_github_url
  • github-url
  • *-github-url
  • githubUrl
  • *GithubUrl
Screenshot of a GitHub username input
Screenshot of a GitHub url input
Screenshot of another GitHub url input
Front Matter
github: CloudCannon
github_username: CloudCannon
github_url: 'https://github.com/jekyll'
docs_github_url: 'https://github.com/CloudCannon/Documentation'

Pinterest

Text field with a logo for Pinterest social handles and full URLs.

Shown for input keys matching:

  • pinterest
  • *_pinterest
  • *-pinterest
  • *Pinterest
  • pinterest_username
  • *_pinterest_username
  • pinterest-username
  • *-pinterest-username
  • pinterestUsername
  • *PinterestUsername
  • pinterest_url
  • *_pinterest_url
  • pinterest-url
  • *-pinterest-url
  • pinterestUrl
  • *PinterestUrl
Screenshot of a Pinterest input
Screenshot of a Pinterest input on a different key
Screenshot of a Pinterest URL input
Front Matter
pinterest: pinterest
default_pinterest: pinterest
pinterest_url: 'https://www.pinterest.com/pinterest/'
Was this article helpful? or Suggest an improvement >