CINXE.COM
Social Media Sharing and Follow Actions - H5mag User Guide
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Social Media Sharing and Follow Actions - H5mag User Guide</title> <meta name="keywords" content="" > <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;1,200;1,300;1,400;1,600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="/css/reset.css" type="text/css"> <link rel="stylesheet" href="/css/text.css" type="text/css"> <link rel="stylesheet" href="/css/search.css" type="text/css"> <link rel="stylesheet" href="/css/pagination.css" type="text/css"> <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="/css/print.css" type="text/css" media="print"> <link rel="stylesheet" href="/css/main.css" type="text/css"> <link rel="stylesheet" href="/css/mobile.css" type="text/css"> <link rel="stylesheet" href="/css/mobile-menu.css" type="text/css"> <script src="//code.jquery.com/jquery-1.11.3.js"></script> <script src="/js/main.js"></script> </head> <body> <div class="navigation-container"> <div class="hamburger"></div> </div> <div class="mobile-menu"> <div class="close navigation-container"></div> <ul class="navigation"> <li> <a data-id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a data-id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li class="active"> <a data-id="menu-2" class=" main mainactive" href="/basics">Basics</a> <ul> <li> <a data-id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li> <a data-id="menu-17" href="/basics/structure-terminology">Structure</a> </li> <li> <a data-id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a data-id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a data-id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a data-id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a data-id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a data-id="menu-22" href="/basics/images">Images</a> </li> <li> <a data-id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a data-id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li class="active"> <a data-id="menu-56" title="Actions" class=" active" href="/basics/actions">Actions</a> <ul> <li> <a data-id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a data-id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li class="active"> <a data-id="menu-73" title="Social media sharing and follow actions" class=" active" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li> <a data-id="menu-12" href="/basics/animations">Animations</a> </li> <li> <a data-id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a data-id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a data-id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a data-id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a data-id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a data-id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a data-id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a data-id="menu-24" href="/areas/text">Text</a> </li> <li> <a data-id="menu-40" href="/areas/section">Section</a> </li> <li> <a data-id="menu-25" href="/areas/image">Image</a> </li> <li> <a data-id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a data-id="menu-26" href="/areas/video">Video</a> </li> <li> <a data-id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a data-id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a data-id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a data-id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a data-id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a data-id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a data-id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a data-id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a data-id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a data-id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a data-id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a data-id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a data-id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a data-id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a data-id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a data-id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a data-id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a data-id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a data-id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a data-id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a data-id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a data-id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a data-id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a data-id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a data-id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a data-id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a data-id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a data-id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a data-id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a data-id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a data-id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a data-id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a data-id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a data-id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a data-id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a data-id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a data-id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a data-id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a data-id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li> <a data-id="menu-6" class=" main" href="/advanced-features">Advanced Features</a> <ul> <li> <a data-id="menu-55" title="CSS & Javascript" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a data-id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a data-id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a data-id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a data-id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a data-id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a data-id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a data-id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a data-id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a data-id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a data-id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a data-id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a data-id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a data-id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a data-id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> <div class="bottom"> <div class="submenu"> <div class="first half"> <a href="http://h5mag.com/blog"><p>Blog</p></a> <a href="http://h5mag.com/updates"><p>Versions</p></a> </div><div class="second half"> <a href="http://docs.h5mag.com/"><p>User Guide</p></a> <a href="http://h5mag.com/contact"><p>Contact Us</p></a> </div> </div> <div class="contact"> <a href="tel:+310703184404">+31 (0)70 31 84 404</a><br> <a href="mailto:support@h5mag.com">support@h5mag.com</a><br> <a href="https:twitter.com/h5mag"><img src="/img/twitter.svg"/>@H5mag</a> </div> </div> </div> <header> <div class="container"> <aside> <header><a href="https://h5mag.com"><img src="/img/h5mag_compact_logo.png" alt="" width="75" height="72" /><a href="/">User Guide</a></a></header> <nav class="main desktop"> <ul class="navigation"> <li> <a id="menu-84" title="Frequently Asked Questions" class=" main" href="/faq">Frequently Asked Questions</a> </li> <li> <a id="menu-111" title="API" class=" main" href="/api">API</a> </li> <li class="active"> <a id="menu-2" class=" main mainactive" href="/basics">Basics</a> <ul> <li> <a id="menu-20" href="/basics/getting-started">Getting started</a> </li> <li> <a id="menu-17" href="/basics/structure-terminology">Structure</a> </li> <li> <a id="menu-35" href="/basics/system-requirements">System requirements</a> </li> <li> <a id="menu-18" href="/basics/artboards">Responsive Artboards</a> <ul> <li> <a id="menu-47" href="/basics/artboards/setup">Bleeds</a> </li> </ul> </li> <li> <a id="menu-21" href="/basics/managing-articles">Articles</a> </li> <li> <a id="menu-66" title="Restore older versions of saved articles" href="/basics/versioning">Saving & versioning</a> </li> <li> <a id="menu-22" href="/basics/images">Images</a> </li> <li> <a id="menu-39" title="Webfonts" href="/basics/webfonts">Webfonts</a> </li> <li> <a id="menu-65" href="/basics/saved-styles">Saved Styles</a> </li> <li class="active"> <a id="menu-56" title="Actions" class=" active" href="/basics/actions">Actions</a> <ul> <li> <a id="menu-37" title="popups" href="/basics/actions/popups">Popups</a> </li> <li> <a id="menu-57" title="Internal, external and email links" href="/basics/actions/links">Links</a> </li> <li class="active"> <a id="menu-73" title="Social media sharing and follow actions" class=" active" href="/basics/actions/social-media">Social Media</a> </li> </ul> </li> <li> <a id="menu-12" href="/basics/animations">Animations</a> </li> <li> <a id="menu-76" title="Guides: grids, columns & layouts" href="/basics/guides-grids">Guides: grids & columns</a> </li> <li> <a id="menu-117" href="/basics/table-of-contents">Table of Contents</a> </li> <li> <a id="menu-44" href="/basics/previews">Previews</a> </li> <li> <a id="menu-45" href="/basics/publishing">Publishing</a> </li> <li> <a id="menu-120" href="/basics/managing-editions">Exporting/Importing editions</a> </li> </ul> </li> <li> <a id="menu-8" class=" main" href="/areas">Areas</a> <ul> <li> <a id="menu-43" href="/areas/heading">Heading</a> </li> <li> <a id="menu-24" href="/areas/text">Text</a> </li> <li> <a id="menu-40" href="/areas/section">Section</a> </li> <li> <a id="menu-25" href="/areas/image">Image</a> </li> <li> <a id="menu-123" href="/areas/gallery">Gallery</a> </li> <li> <a id="menu-26" href="/areas/video">Video</a> </li> <li> <a id="menu-59" href="/areas/advanced">Advanced areas</a> <ul> <li> <a id="menu-28" href="/areas/advanced/twitter">Twitter widget</a> </li> <li> <a id="menu-29" href="/areas/advanced/facebook">Facebook widget</a> </li> <li> <a id="menu-27" href="/areas/advanced/soundcloud">Soundcloud widget</a> </li> <li> <a id="menu-36" href="/areas/advanced/iframe">Iframe</a> </li> <li> <a id="menu-119" href="/areas/advanced/audio-player">Audio player</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-60" class=" main" href="/layout">Layout Techniques</a> <ul> <li> <a id="menu-61" href="/layout/custom-columns">Custom columns</a> </li> <li> <a id="menu-62" href="/layout/scrolling-content-fixed-background">Scrolling content over fixed background</a> </li> <li> <a id="menu-63" href="/layout/anchoring-content-to-edges">Anchoring content to edges</a> </li> <li> <a id="menu-124" href="/layout/sticky-content">Sticky content</a> </li> </ul> </li> <li> <a id="menu-48" class=" main" href="/workflow">Creating digital magazines</a> <ul> <li> <a id="menu-49" href="/workflow/concept-target-audience-and-goals">Concept, target audience & goals</a> </li> <li> <a id="menu-50" href="/workflow/page-plan-and-publication-structure">Page plan & publication structure</a> </li> <li> <a id="menu-51" href="/workflow/graphic-design-and-layout">Graphic design & layout</a> </li> <li> <a id="menu-52" href="/workflow/developing-master-pages-and-styling">Developing masters & styling</a> </li> <li> <a id="menu-53" href="/workflow/content-development-and-integration">Content development & integration</a> </li> <li> <a id="menu-54" href="/workflow/getting-it-out-there">And then… getting it out there!</a> </li> </ul> </li> <li> <a id="menu-10" class=" main" href="/design-guidelines">Design Guidelines</a> </li> <li> <a id="menu-16" class=" main" href="/statistics-analytics">Statistics & Analytics</a> </li> <li> <a id="menu-132" class=" main" href="/modules">Modules</a> <ul> <li> <a id="menu-130" href="/modules/dataset-module">Dataset module</a> </li> <li> <a id="menu-133" href="/modules/translate-module">Translate module</a> </li> <li> <a id="menu-115" href="/modules/feedback-module">Feedback Module</a> <ul> <li> <a id="menu-116" title="How to create a form" href="/modules/feedback-module/how-to-create-a-form">How to create a form</a> </li> <li> <a id="menu-118" title="Feedback Results" href="/modules/feedback-module/feedback-results">Feedback Results</a> </li> </ul> </li> <li> <a id="menu-85" href="/modules/subscriber-module">Subscriber Module</a> <ul> <li> <a id="menu-86" href="/modules/subscriber-module/acquiring-subscribers">Gaining subscribers</a> </li> <li> <a id="menu-95" href="/modules/subscriber-module/adding-subscribers">Adding subscribers</a> </li> <li> <a id="menu-96" href="/modules/subscriber-module/subscriber-list">Subscriber list</a> </li> <li> <a id="menu-87" href="/modules/subscriber-module/push-notifications">Push notification</a> </li> <li> <a id="menu-97" href="/modules/subscriber-module/email-notification">Email notification</a> </li> <li> <a id="menu-98" href="/modules/subscriber-module/subscriber-settings">Subscriber settings</a> </li> <li> <a id="menu-99" href="/modules/subscriber-module/sending-notifications">Sending notifications</a> </li> <li> <a id="menu-100" href="/modules/subscriber-module/notification-progress-history">Notifications progress & history</a> </li> <li> <a id="menu-101" href="/modules/subscriber-module/notification-analytics">Notifications analytics</a> </li> <li> <a id="menu-83" title="Web Push certificate" href="/modules/subscriber-module/web-push-certificate">Web Push certificate</a> </li> <li> <a id="menu-112" title="Transfer Zapier Mailchimp" href="/modules/subscriber-module/transfer-zapier-mailchimp">Transfer Zapier Mailchimp</a> </li> <li> <a id="menu-113" href="/modules/subscriber-module/connecting-mailchimp-zapier-h5mag">Connecting Mailchimp with H5mag using Zapier</a> </li> <li> <a id="menu-114" href="/modules/subscriber-module/automate-referrals-zapier">Automate Referrals Using Zapier</a> </li> </ul> </li> </ul> </li> <li> <a id="menu-6" class=" main" href="/advanced-features">Advanced Features</a> <ul> <li> <a id="menu-55" title="CSS & Javascript" href="/advanced-features/custom-scripting">CSS & Javascript</a> </li> <li> <a id="menu-104" title="Authentication" href="/advanced-features/authentication">Authentication</a> </li> <li> <a id="menu-15" title="URL structure" href="/advanced-features/url-structure">URL structure</a> </li> <li> <a id="menu-46" href="/advanced-features/custom-navigation-bar">Navigation bar</a> </li> <li> <a id="menu-77" href="/advanced-features/toc-styling">TOC styling</a> </li> <li> <a id="menu-74" href="/advanced-features/scrollbar-styling">Scrollbar styling</a> </li> <li> <a id="menu-3" title="Keyboard shortcuts" href="/advanced-features/keyboard-shortcuts">Keyboard shortcuts</a> </li> <li> <a id="menu-78" href="/advanced-features/sharepoint">Access Control using Microsoft 365</a> </li> <li> <a id="menu-79" href="/advanced-features/autoplay">Autoplay</a> </li> <li> <a id="menu-103" href="/advanced-features/okta-integration">Okta integration</a> </li> <li> <a id="menu-80" href="/advanced-features/ms365-integration">User Provisioning via Microsoft 365</a> </li> <li> <a id="menu-102" title="After Effects" href="/advanced-features/vector-animations-using-adobe-after-effects">After Effects</a> </li> <li> <a id="menu-106" title="Adobe Animate" href="/advanced-features/adobe-animate">Adobe Animate</a> </li> <li> <a id="menu-109" href="/advanced-features/building-a-h5mag-app-using-react-native">Building a H5mag App using React Native</a> </li> <li> <a id="menu-129" title="Presentation Mode" href="/advanced-features/presentation-mode">Presentation Mode</a> </li> </ul> </li> </ul> </nav> </aside> <main> <form method="get" action="/search" class="search"> <input type="hidden" name="page" value="1"> <input type="text" name="q" value="" class="text"></input> <input type="submit" class="button" value=""> </form> <article> <h1>Social Media Sharing and Follow actions</h1> <section><p>To add a social media action to a page, select an <a href="/areas/image">image area</a> or <a href="/areas/section">section</a> and click on the '<a href="http://docs.h5mag.com/getting-started/actions">actions</a>' button (<img src="/public/actions/screen-shot-2017-05-01-at-13.27.47.png" style="width:27px;" />). To attach an action to another area, simply <a href="/areas#area-tree">place it inside a section</a>.</p> <p>Currently, the following online social networks are supported:</p> <ul> <li>Facebook</li> <li>Twitter</li> <li>Pinterest</li> <li>LinkedIn</li> <li>Reddit</li> <li>Tumblr</li> <li>VKontakte</li> <li>Sina Weibo</li> <li>WhatsApp</li> </ul> <p>Depending on the network there are various options for sharing and following available. If you need support for another network, please contact us. It is often also possible to use an <a href="/basics/actions/links#external">regular external link</a> for a share or follow action.</p> </section> <div class="last-modified">Last modified: <time>Tuesday, 19 December 2023 - 11:36:47 CET</time></div> </article> <nav class="breadcrumbs"> You are here: <a href="/">H5mag User Guide</a> > <a id="breadcrumbs-2" class=" main mainactive" href="/basics">Basics</a> > <a id="breadcrumbs-56" title="Actions" class=" active" href="/basics/actions">Actions</a> > Social Media </nav> </main> </div> <!-- Piwik --> <script type="text/javascript"> var _paq = _paq || []; _paq.push(["trackPageView"]); _paq.push(["enableLinkTracking"]); (function() { var u=(("https:" == document.location.protocol) ? "https" : "http") + "://piwik.schuttelaar.net/"; _paq.push(["setTrackerUrl", u+"piwik.php"]); _paq.push(["setSiteId", "30"]); var d=document, g=d.createElement("script"), s=d.getElementsByTagName("script")[0]; g.type="text/javascript"; g.defer=true; g.async=true; g.src=u+"piwik.js"; s.parentNode.insertBefore(g,s); })(); </script> <!-- End Piwik Code --> </body> </html>