Preferred Sources: Implement with HTML

For layouts requiring custom HTML framing or container semantics without writing JavaScript, publisher.js supports applying the google-add-preferred-source-btn data attribute directly to non-button structural elements like <divs> or spans.

Try it out

Below is a live interactive Preferred Source button embedded within a styled call-out banner container:

Support Our Journalism

Add us to your preferred Google News sources for quick access to our latest articles.

How to Implement

Apply google-add-preferred-source-btn to any HTML block element. The library will automatically mount the responsive button iframe inside the container while preserving your document structure.

<div class="article-footer-promo">
  <h3>Never miss a breaking story</h3>
  <div google-add-preferred-source-btn></div>
</div>

Subscribe with Google