Skip to content
Embed Tweet cards in Gatsby markdown
JavaScript
Branch: master
Clone or download
StephanWeinhold and jmolivas Fixed install bash for PowerShell. (#16)
The @ without quotes is making PowerShell treat @weknow as a variable
Latest commit 339053f Jul 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tap-snapshots Flatten out _ chars when comparing to url (#13) Mar 26, 2019
test Flatten out _ chars when comparing to url (#13) Mar 26, 2019
.gitignore Debug opt, test coverage, and a better embed conditional (#7) Jan 9, 2019
README.md
gatsby-browser.js first code (#1) Dec 8, 2018
index.js Flatten out _ chars when comparing to url (#13) Mar 26, 2019
package-lock.json Flatten out _ chars when comparing to url (#13) Mar 26, 2019
package.json

README.md

gatsby-remark-twitter

Embed Tweet and Moment cards in Gatsby markdown.

Install

npm install --save "@weknow/gatsby-remark-twitter"

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["@weknow/gatsby-remark-twitter"]
    }
  }
];

If you want to get debug output, turn on the debug option in the plugin options.

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: [
        {
          resolve: "@weknow/gatsby-remark-twitter",
          options: {
            debug: true
          }
        }
      ]
    }
  }
];

These other options are also available, to control how the widget is rendered:

  • hideThread Default true. Set to false to also show the tweet that a tweet is in reply to. (This is enabled by default because typically you'd just embed both tweets, and it gets really noisy when embedding entire twitter threads in a post.)
  • hideMedia Default false. Set to true to hide media that is included in a tweet. For example, if a tweet has a photo or a video embedded, this means that the user has to click through to view it.
  • align Set to 'left', 'right' or 'center' to make the embedded tweet float left, right, or be center-aligned. (The default is left-aligned, but not floated.)
  • theme Set to 'dark' to use the dark theme.
  • linkColor Set to a valid RGB value to specify link colors.
  • widgetType Set to 'video' to return a Twitter Video embed for the given Tweet.

Usage

# Blog post title

This is an example of embedding a single tweet card.
Add any markdown as you normally do, and then insert a valid
Tweet link anywhere to automatically transform it into an
embed card.

https://twitter.com/gatsbyjs/status/1055939617646465024

You can embed several tweets

https://twitter.com/wesbos/status/1068597847237541888

https://twitter.com/dan_abramov/status/1068884262273933312

Or a moment

https://twitter.com/i/moments/944326645493612545

NOTE: Make sure to copy the Tweet link instead of the embed code.

How this looks like

screenshot for share > copy tweet link

View a live demo here

License

MIT

You can’t perform that action at this time.