Share A Webpage

Share This Page Banners

Add a row of share icons to your website. When a visitor clicks an icon, it opens that site (like X or Facebook) with the page they are on ready to post. Pick 1 to 6 share icons, choose a style, then copy the code and paste it into your page, post, or sidebar. Try it: click an icon in any preview below to share this page.

Step 1: Pick your share icons (1 to 6)

Step 2: Title, size and layout

Title (leave empty for no title)

Banner sizeSmall (fits a 180px sidebar)MediumLarge

LayoutRow (wraps to fit)Vertical column

Step 3: Choose a style

About the preview picture and text: sites like X, Facebook and Pinterest build the preview (title, description and picture) from the page that is being shared, not from this banner. Blogger* adds this automatically for posts and pages, so make sure the page has a picture and a short description. Pinterest also needs a picture, and the banner passes along the page's own social image when it has one.

======================
*Google Bloggers: If there's no post image: Html Template: include a twitter / og card for page and post. Use this code and update w/your image url (t/image doesn't have to be published, a non-published blog post will work too).

<b:if cond='data:view.isHomepage or data:view.isPage or data:view.isPost'>
<meta content='https://YOUR-IMAGE.png' property='og:image'/>
<meta content='https://YOUR-IMAGE.png' name='twitter:image'/>
<meta content='summary_large_image' name='twitter:card'/>
</b:if>

Why no Instagram? Instagram does not offer a share-a-web-link option for websites, so a banner cannot post to it. Use the Copy link icon (visitors paste the link into Instagram themselves) or the More icon, which opens the phone's own share menu on mobile devices.

(Social icons come from the free Simple Icons library (simpleicons.org). Brand names and logos belong to their owners and are used only to link to their official sites.)