Google News is a powerful tool for any website that aims to establish authority, increase visibility, and engage with a regular audience. It’s especially important for news websites, blogs, and content-heavy sites looking to drive organic growth and build credibility.
Follow my easy method to add Google News Follow Us Button to your WordPress site:
- Enhanced Visibility: Google News distributes your content to a vast, active audience.
- Higher Engagement: Regular updates keep your followers engaged with your latest content.
- SEO Boost: Google News recognition can improve your search engine rankings.
- Trust and Credibility: Being listed on Google News builds trust, as the platform’s standards are rigorous.
- Loyal Audience: The “Follow Us” button helps turn casual visitors into loyal readers, encouraging ongoing engagement with your content.
Adding a Google News “Follow Us” button to your website isn’t just a small visual enhancement—it offers meaningful benefits for your brand’s visibility, credibility, and audience engagement. Here’s why this button can be a game-changer for websites, particularly those focused on news, blogging, or content marketing.
Table of Contents
Get Your Google News Publication URL
- Log in to your Google News Publisher account and locate your publication.
- Copy the URL of your publication page in Google News, which will look like:
https://news.google.com/publications/YOUR-PUBLICATION-ID
.
Replace YOUR-PUBLICATION-ID
with your actual publication ID.
Copy the HTML and CSS CodeHTML Code
HTML Code
<div class="follow-us"> <span>Follow Us</span> <a href="https://news.google.com/" target="_blank"> <img src="google-news-logo.png" alt="Google News"> </a> <a href="https://facebook.com/" target="_blank"> <img src="facebook-logo.png" alt="Facebook"> </a> <a href="https://wa.me/" target="_blank"> <img src="whatsapp-logo.png" alt="WhatsApp"> </a> <a href="https://t.me/" target="_blank"> <img src="telegram-logo.png" alt="Telegram"> </a> <a href="https://youtube/" target="_blank"> <img src="youtube-logo.png" alt="YouTube"> </a> </div>
CSS Code
/* start css code by mtech4you*/ .follow-us { display: flex; align-items: center; background-color: #f0f0f0; padding: 10px; border-radius: 5px; } .follow-us span { margin-right: 10px; font-weight: bold; } .follow-us a { margin-right: 10px; } .follow-us img { width: 32px; height: 32px; } /* end css code by mtech4you*/
Use the following HTML and CSS code for the Google News Follow Us Button. After implementing the code, download the icon images you want to use and upload them to your WordPress media library. Copy the URL links of the uploaded icons and update the code with these links to display the icons properly.
Add HTML and CSS Code on Your WordPress Site
Here are three methods to add this code to your site:
Method 1: Using a Widget
- Go to Appearance > Widgets in your WordPress admin dashboard.
- Select the Custom HTML widget and add it to the area where you want the button (e.g., Sidebar, Footer).
- Paste the HTML code inside this widget.
- Save the widget.
- To add the CSS, go to Appearance > Customize > Additional CSS and paste the CSS code there.
- Publish your changes.
Method 2: Using the Ad Inserter Plugin
- Install and activate the Ad Inserter plugin from Plugins > Add New.
- Go to Settings > Ad Inserter in your dashboard.
- Choose a block in the Ad Inserter interface (Block 1, Block 2, etc.).
- Paste the HTML code for your Google News button in the selected block.
- Below the block, configure the insertion options to control where it will appear (e.g., before content, after content, sidebar).
- To add CSS, go to Appearance > Customize > Additional CSS and paste in the CSS code.
- Save the changes and confirm the button is displaying as expected.
Step 4: Verify the Button
- Visit the page where you placed the button to make sure it displays correctly.
- Click on the button to confirm it links to your Google News publication.
Using these steps, you should be able to add a fully functional “Follow Us on Google News” button to your WordPress site! Adjust the styling in the CSS section if you’d like to match your website’s design.