html 社交媒体分享（列表形式）

Posted 2021-05-10

<div class="wysiwyg__share-link-list">
    <a
        target="_blank" rel="noopener"
        class="wysiwyg__share-link"
        href="https://twitter.com/intent/tweet?text=<?php echo $encTitle; ?>&url=<?php echo $escPermalink; ?>">
        <svg class="wysiwyg__share-link-svg"><use xlink:href="#sprite-twitter"></use></svg>
    </a>
    <a
        target="_blank" rel="noopener"
        class="wysiwyg__share-link"
        href="https://www.facebook.com/sharer/sharer.php?u=<?php echo $escPermalink; ?>">
        <svg class="wysiwyg__share-link-svg"><use xlink:href="#sprite-facebook"></use></svg>
    </a>
    <a
        target="_blank" rel="noopener"
        class="wysiwyg__share-link"
        href="https://www.linkedin.com/shareArticle?mini=true&url=<?php echo $escPermalink; ?>&title=<?php echo $encTitle; ?>&summary=<?php echo $escExcerpt; ?>">
        <svg class="wysiwyg__share-link-svg"><use xlink:href="#sprite-linkedin"></use></svg>
    </a>
</div>

<ul class="article__share-list js-share-list">
+    <li class="article__share-list-item">
+        <a href="https://twitter.com/intent/tweet?text={{twitterText}}&url={{url}}"
+           class="article__share-list-anchor js-social-share gtm-twitter"
+           rel="noopener" target="_blank"
+           aria-label="<?php _e('Share on Twitter', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-twitter"></use></svg>
+        </a>
+    </li>
+    <li class="article__share-list-item">
+        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{url}}&title={{title}}&summary={{text}}"
+           class="article__share-list-anchor js-social-share gtm-linkedin"
+           rel="noopener" target="_blank"
+           aria-label="<?php _e('Share on LinkedIn', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-in"></use></svg>
+        </a>
+    </li>
+    <li class="article__share-list-item">
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{url}}"
+           class="article__share-list-anchor js-social-share gtm-facebook"
+           rel="noopener" target="_blank"
+           aria-label="<?php _e('Share on Facebook', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-facebook"></use></svg>
+        </a>
+    </li>
+    <li class="article__share-list-item">
+        <a href="mailto:?subject={{title}}&body={{url}}"
+           class="article__share-list-anchor js-social-share gtm-mailto"
+           rel="noopener"
+           aria-label="<?php _e('Share via email', 'cfa'); ?>">
+            <svg class="article__social-svg svg-primary"><use xlink:href="#sprite-mail"></use></svg>
+        </a>
+    </li>
+</ul>