You are here

better-social-sharing-buttons.html.twig in Better Social Sharing Buttons 8

{{ attach_library('better_social_sharing_buttons/styling') }}

{% if items.width %}
    {% set width = items.width ? 'width=' ~ items.width ~'' %}
{% endif %}

{% if items.height %}
    {% set height = items.height ? 'height=' ~ items.height ~'' %}
{% endif %}

{% if items.radius %}
    {% set radius = items.radius ? 'style=border-radius:' ~ items.radius ~';' %}
{% endif %}

{# --- Include svg sprite --- #}
<div style="display: none">{% include social_buttons_sprite %}</div>

<div class="social-sharing-buttons">
    <!-- Facebook share button -->
    {% if items.services.facebook %}
        <a href="https://www.facebook.com/sharer/sharer.php?u={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Facebook" aria-label="{{ 'Share to'|t }} Facebook" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#facebook" />
            </svg>
        </a>
    {% endif %}

    <!-- Twitter share button -->
    {% if items.services.twitter %}
        <a href="http://twitter.com/intent/tweet?text={{ items.title }}+{{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} Twitter" aria-label="{{ 'Share to'|t }} Twitter" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#twitter" />
            </svg>
        </a>
    {% endif %}

    <!-- WhatsApp share button -->
    {% if items.services.whatsapp %}
        <a href="https://wa.me/?text={{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} WhatsApp" aria-label="{{ 'Share to'|t }} WhatsApp" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#whatsapp" />
            </svg>
        </a>
    {% endif %}

    <!-- Facebook Messenger share button -->
    {% if items.services.facebook_messenger %}
        <a href="http://www.facebook.com/dialog/send?app_id={{ items.facebook_app_id }}&link={{ items.page_url }}&redirect_uri={{ url('<current>') }}" target="_blank" title="{{ 'Share to'|t }} Facebook Messenger" aria-label="{{ 'Share to'|t }} Facebook Messenger" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#messenger" />
            </svg>
        </a>
    {% endif %}

    <!-- Pinterest share button -->
    {% if items.services.pinterest %}
        <a href="http://pinterest.com/pin/create/link/?url={{ items.page_url }}&description={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Pinterest" aria-label="{{ 'Share to'|t }} Pinterest" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#pinterest" />
            </svg>
        </a>
    {% endif %}

    <!-- Linkedin share button -->
    {% if items.services.linkedin %}
        <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ items.page_url }}&title={{ items.title }}&source={{ items.base_url }}" target="_blank" title="{{ 'Share to'|t }} Linkedin" aria-label="{{ 'Share to'|t }} Linkedin" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#linkedin" />
            </svg>
        </a>
    {% endif %}

    <!-- Google+ share button -->
    {% if items.services.googleplus %}
        <a href="https://plus.google.com/share?url={{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} Google+" aria-label="{{ 'Share to'|t }} Google+" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#googleplus" />
            </svg>
        </a>
    {% endif %}

    <!-- Digg share button -->
    {% if items.services.digg %}
        <a href="http://www.digg.com/submit?phase=2&url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Digg" aria-label="{{ 'Share to'|t }} Digg" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#digg" />
            </svg>
        </a>
    {% endif %}

    <!-- StumbleUpon share button -->
    {% if items.services.stumbleupon %}
        <a href="http://www.stumbleupon.com/submit?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} StumbleUpon" aria-label="{{ 'Share to'|t }} StumbleUpon" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#stumbleupon" />
            </svg>
        </a>
    {% endif %}

    <!-- Delicious share button -->
    {% if items.services.delicious %}
        <a href="http://del.icio.us/post?url={{ items.page_url }}&title={{ items.title }}&notes={{ items.description }}" target="_blank" title="{{ 'Share to'|t }} Delicious" aria-label="{{ 'Share to'|t }} Delicious" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#delicious" />
            </svg>
        </a>
    {% endif %}

    <!-- Slashdot share button -->
    {% if items.services.slashdot %}
        <a href="http://slashdot.org/bookmark.pl?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Slashdot" aria-label="{{ 'Share to'|t }} Slashdot" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#slashdot" />
            </svg>
        </a>
    {% endif %}

    <!-- Tumblr share button -->
    {% if items.services.tumblr %}
        <a href="http://www.tumblr.com/share?v=3&u={{ items.page_url }}&t={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Tumblr" aria-label="{{ 'Share to'|t }} Tumblr" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#tumblr" />
            </svg>
        </a>
    {% endif %}

    <!-- Reddit share button -->
    {% if items.services.reddit %}
        <a href="http://www.reddit.com/submit?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Reddit" aria-label="{{ 'Share to'|t }} Reddit" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#reddit" />
            </svg>
        </a>
    {% endif %}

    <!-- Evernote share button -->
    {% if items.services.evernote %}
        <a href="http://www.evernote.com/clip.action?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Evernote" aria-label="{{ 'Share to'|t }} Evernote" class="social-sharing-buttons__button" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#evernote" />
            </svg>
        </a>
    {% endif %}

    <!-- Email share button -->
    {% if items.services.email %}
        <a href="mailto:?subject={{ items.title }}&body={{ items.page_url }}" title="{{ 'Share to'|t }} E-mail" aria-label="{{ 'Share to'|t }} E-mail" class="social-sharing-buttons__button" target="_blank" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#email" />
            </svg>
        </a>
    {% endif %}

    <!-- Copy link share button -->
    {% if items.services.copy %}
        {{ attach_library('better_social_sharing_buttons/copy-current-url') }}
        <button class="btnCopy social-sharing-buttons__button">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use xlink:href="{{ social_buttons_sprite }}#copy" />
            </svg>
            <div class="social-sharing-buttons__popup">{{ 'Copied to clipboard'|t }}</div>
        </button>
    {% endif %}
</div>

File

theme/better-social-sharing-buttons.html.twig
View source
  1. {{ attach_library('better_social_sharing_buttons/styling') }}
  2. {% if items.width %}
  3. {% set width = items.width ? 'width=' ~ items.width ~'' %}
  4. {% endif %}
  5. {% if items.height %}
  6. {% set height = items.height ? 'height=' ~ items.height ~'' %}
  7. {% endif %}
  8. {% if items.radius %}
  9. {% set radius = items.radius ? 'style=border-radius:' ~ items.radius ~';' %}
  10. {% endif %}
  11. {# --- Include svg sprite --- #}
  12. <div style="display: none">{% include social_buttons_sprite %}</div>
  13. <div class="social-sharing-buttons">
  14. <!-- Facebook share button -->
  15. {% if items.services.facebook %}
  16. <a href="https://www.facebook.com/sharer/sharer.php?u={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Facebook" aria-label="{{ 'Share to'|t }} Facebook" class="social-sharing-buttons__button" rel="noopener">
  17. <svg {{ width }} {{ height }} {{ radius }}>
  18. <use xlink:href="{{ social_buttons_sprite }}#facebook" />
  19. </svg>
  20. </a>
  21. {% endif %}
  22. <!-- Twitter share button -->
  23. {% if items.services.twitter %}
  24. <a href="http://twitter.com/intent/tweet?text={{ items.title }}+{{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} Twitter" aria-label="{{ 'Share to'|t }} Twitter" class="social-sharing-buttons__button" rel="noopener">
  25. <svg {{ width }} {{ height }} {{ radius }}>
  26. <use xlink:href="{{ social_buttons_sprite }}#twitter" />
  27. </svg>
  28. </a>
  29. {% endif %}
  30. <!-- WhatsApp share button -->
  31. {% if items.services.whatsapp %}
  32. <a href="https://wa.me/?text={{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} WhatsApp" aria-label="{{ 'Share to'|t }} WhatsApp" class="social-sharing-buttons__button" rel="noopener">
  33. <svg {{ width }} {{ height }} {{ radius }}>
  34. <use xlink:href="{{ social_buttons_sprite }}#whatsapp" />
  35. </svg>
  36. </a>
  37. {% endif %}
  38. <!-- Facebook Messenger share button -->
  39. {% if items.services.facebook_messenger %}
  40. <a href="http://www.facebook.com/dialog/send?app_id={{ items.facebook_app_id }}&link={{ items.page_url }}&redirect_uri={{ url('<current>') }}" target="_blank" title="{{ 'Share to'|t }} Facebook Messenger" aria-label="{{ 'Share to'|t }} Facebook Messenger" class="social-sharing-buttons__button" rel="noopener">
  41. <svg {{ width }} {{ height }} {{ radius }}>
  42. <use xlink:href="{{ social_buttons_sprite }}#messenger" />
  43. </svg>
  44. </a>
  45. {% endif %}
  46. <!-- Pinterest share button -->
  47. {% if items.services.pinterest %}
  48. <a href="http://pinterest.com/pin/create/link/?url={{ items.page_url }}&description={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Pinterest" aria-label="{{ 'Share to'|t }} Pinterest" class="social-sharing-buttons__button" rel="noopener">
  49. <svg {{ width }} {{ height }} {{ radius }}>
  50. <use xlink:href="{{ social_buttons_sprite }}#pinterest" />
  51. </svg>
  52. </a>
  53. {% endif %}
  54. <!-- Linkedin share button -->
  55. {% if items.services.linkedin %}
  56. <a href="http://www.linkedin.com/shareArticle?mini=true&url={{ items.page_url }}&title={{ items.title }}&source={{ items.base_url }}" target="_blank" title="{{ 'Share to'|t }} Linkedin" aria-label="{{ 'Share to'|t }} Linkedin" class="social-sharing-buttons__button" rel="noopener">
  57. <svg {{ width }} {{ height }} {{ radius }}>
  58. <use xlink:href="{{ social_buttons_sprite }}#linkedin" />
  59. </svg>
  60. </a>
  61. {% endif %}
  62. <!-- Google+ share button -->
  63. {% if items.services.googleplus %}
  64. <a href="https://plus.google.com/share?url={{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} Google+" aria-label="{{ 'Share to'|t }} Google+" class="social-sharing-buttons__button" rel="noopener">
  65. <svg {{ width }} {{ height }} {{ radius }}>
  66. <use xlink:href="{{ social_buttons_sprite }}#googleplus" />
  67. </svg>
  68. </a>
  69. {% endif %}
  70. <!-- Digg share button -->
  71. {% if items.services.digg %}
  72. <a href="http://www.digg.com/submit?phase=2&url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Digg" aria-label="{{ 'Share to'|t }} Digg" class="social-sharing-buttons__button" rel="noopener">
  73. <svg {{ width }} {{ height }} {{ radius }}>
  74. <use xlink:href="{{ social_buttons_sprite }}#digg" />
  75. </svg>
  76. </a>
  77. {% endif %}
  78. <!-- StumbleUpon share button -->
  79. {% if items.services.stumbleupon %}
  80. <a href="http://www.stumbleupon.com/submit?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} StumbleUpon" aria-label="{{ 'Share to'|t }} StumbleUpon" class="social-sharing-buttons__button" rel="noopener">
  81. <svg {{ width }} {{ height }} {{ radius }}>
  82. <use xlink:href="{{ social_buttons_sprite }}#stumbleupon" />
  83. </svg>
  84. </a>
  85. {% endif %}
  86. <!-- Delicious share button -->
  87. {% if items.services.delicious %}
  88. <a href="http://del.icio.us/post?url={{ items.page_url }}&title={{ items.title }}&notes={{ items.description }}" target="_blank" title="{{ 'Share to'|t }} Delicious" aria-label="{{ 'Share to'|t }} Delicious" class="social-sharing-buttons__button" rel="noopener">
  89. <svg {{ width }} {{ height }} {{ radius }}>
  90. <use xlink:href="{{ social_buttons_sprite }}#delicious" />
  91. </svg>
  92. </a>
  93. {% endif %}
  94. <!-- Slashdot share button -->
  95. {% if items.services.slashdot %}
  96. <a href="http://slashdot.org/bookmark.pl?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Slashdot" aria-label="{{ 'Share to'|t }} Slashdot" class="social-sharing-buttons__button" rel="noopener">
  97. <svg {{ width }} {{ height }} {{ radius }}>
  98. <use xlink:href="{{ social_buttons_sprite }}#slashdot" />
  99. </svg>
  100. </a>
  101. {% endif %}
  102. <!-- Tumblr share button -->
  103. {% if items.services.tumblr %}
  104. <a href="http://www.tumblr.com/share?v=3&u={{ items.page_url }}&t={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Tumblr" aria-label="{{ 'Share to'|t }} Tumblr" class="social-sharing-buttons__button" rel="noopener">
  105. <svg {{ width }} {{ height }} {{ radius }}>
  106. <use xlink:href="{{ social_buttons_sprite }}#tumblr" />
  107. </svg>
  108. </a>
  109. {% endif %}
  110. <!-- Reddit share button -->
  111. {% if items.services.reddit %}
  112. <a href="http://www.reddit.com/submit?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Reddit" aria-label="{{ 'Share to'|t }} Reddit" class="social-sharing-buttons__button" rel="noopener">
  113. <svg {{ width }} {{ height }} {{ radius }}>
  114. <use xlink:href="{{ social_buttons_sprite }}#reddit" />
  115. </svg>
  116. </a>
  117. {% endif %}
  118. <!-- Evernote share button -->
  119. {% if items.services.evernote %}
  120. <a href="http://www.evernote.com/clip.action?url={{ items.page_url }}&title={{ items.title }}" target="_blank" title="{{ 'Share to'|t }} Evernote" aria-label="{{ 'Share to'|t }} Evernote" class="social-sharing-buttons__button" rel="noopener">
  121. <svg {{ width }} {{ height }} {{ radius }}>
  122. <use xlink:href="{{ social_buttons_sprite }}#evernote" />
  123. </svg>
  124. </a>
  125. {% endif %}
  126. <!-- Email share button -->
  127. {% if items.services.email %}
  128. <a href="mailto:?subject={{ items.title }}&body={{ items.page_url }}" title="{{ 'Share to'|t }} E-mail" aria-label="{{ 'Share to'|t }} E-mail" class="social-sharing-buttons__button" target="_blank" rel="noopener">
  129. <svg {{ width }} {{ height }} {{ radius }}>
  130. <use xlink:href="{{ social_buttons_sprite }}#email" />
  131. </svg>
  132. </a>
  133. {% endif %}
  134. <!-- Copy link share button -->
  135. {% if items.services.copy %}
  136. {{ attach_library('better_social_sharing_buttons/copy-current-url') }}
  137. <button class="btnCopy social-sharing-buttons__button">
  138. <svg {{ width }} {{ height }} {{ radius }}>
  139. <use xlink:href="{{ social_buttons_sprite }}#copy" />
  140. </svg>
  141. <div class="social-sharing-buttons__popup">{{ 'Copied to clipboard'|t }}</div>
  142. </button>
  143. {% endif %}
  144. </div>