Integrating social media feeds into your Jekyll site can enhance user engagement and keep your content fresh. By embedding feeds from platforms like Twitter, Instagram, or Facebook, you can display real-time updates directly on your website.

Why Add Social Media Feeds?

Adding social media feeds helps to:

  • Increase visitor interaction
  • Showcase your latest updates and content
  • Build social proof and credibility
  • Keep your website dynamic and engaging

Methods to Integrate Social Media Feeds

There are several ways to add social media feeds to your Jekyll site:

  • Using official embed codes from social media platforms
  • Employing third-party plugins or widgets
  • Creating custom APIs and scripts

Embedding Twitter Feed

One of the simplest methods is embedding a Twitter feed using their official embed code:

1. Go to your Twitter profile and click on More > Embed Tweet.

2. Customize the widget settings and copy the provided HTML code.

3. Paste the code into your Jekyll site’s HTML where you want the feed to appear.

Example:

<div class="twitter-feed">
  <a class="twitter-timeline" href="https://twitter.com/yourusername?ref_src=twsrc%5Etfw">Tweets by yourusername</a> 
  <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

Adding Instagram Feed

Instagram doesn’t provide an official embed for feeds, but you can use third-party tools like LightWidget or SnapWidget:

1. Sign up on a widget provider and generate your embed code.

2. Copy the HTML code and insert it into your Jekyll page or layout file.

Example embedding code:

<iframe src="https://lightwidget.com/widgets/your-widget-id.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width:100%;border:0;overflow:hidden"></iframe>

Best Practices

When adding social media feeds, consider the following:

  • Optimize load times by lazy-loading scripts
  • Ensure responsiveness for mobile devices
  • Maintain privacy compliance by informing users
  • Keep the design consistent with your site’s theme

By following these steps, you can successfully integrate social media feeds into your Jekyll site, making it more interactive and engaging for visitors.