You are here

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

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

{% if items.width %}
  {% set width = items.width ? 'width=' ~ items.width ~'' %}
  {% set height = items.width ? 'height=' ~ items.width ~'' %}
{% 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 share-facebook" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 share-twitter" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 share-whatsapp" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 share-facebook-messenger" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 share-pinterest" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use href="{{ social_buttons_sprite }}#pinterest" />
            </svg>
        </a>
    {% endif %}

    <!-- Linkedin share button -->
    {% if items.services.linkedin %}
        <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} Linkedin" aria-label="{{ 'Share to'|t }} Linkedin" class="social-sharing-buttons__button share-linkedin" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use href="{{ social_buttons_sprite }}#linkedin" />
            </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 share-digg" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use href="{{ social_buttons_sprite }}#digg" />
            </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 share-tumblr" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 share-reddit" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 share-evernote" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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 }} Email" aria-label="{{ 'Share to'|t }} Email" class="social-sharing-buttons__button share-email" target="_blank" rel="noopener">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use 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') }}
        <a class="btnCopy social-sharing-buttons__button share-copy">
            <svg {{ width }} {{ height }} {{ radius }}>
                <use href="{{ social_buttons_sprite }}#copy" />
            </svg>
            <div class="social-sharing-buttons__popup">{{ 'Copied to clipboard'|t }}</div>
        </a>
    {% endif %}

  <!-- Print share button -->
  {% if items.services.print %}
    {% if items.print_css %}
      {% set href = "#" %}
      {% set rel = items.print_css %}
      {{ attach_library('better_social_sharing_buttons/print-css') }}
    {% else %}
      {% set href = "javascript:window.print()" %}
    {% endif %}
    <a href="{{ href }}" rel="{{ rel }}" id="printlink" class="share-print">
      <svg {{ width }} {{ height }} {{ radius }}>
        <use href="{{ social_buttons_sprite }}#print" />
      </svg>
    </a>
  {% endif %}
</div>

File

templates/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. {% set height = items.width ? 'height=' ~ items.width ~'' %}
  5. {% endif %}
  6. {% if items.radius %}
  7. {% set radius = items.radius ? 'style=border-radius:' ~ items.radius ~';' %}
  8. {% endif %}
  9. {# --- Include svg sprite --- #}
  10. <div style="display: none">{% include social_buttons_sprite %}</div>
  11. <div class="social-sharing-buttons">
  12. <!-- Facebook share button -->
  13. {% if items.services.facebook %}
  14. <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 share-facebook" rel="noopener">
  15. <svg {{ width }} {{ height }} {{ radius }}>
  16. <use href="{{ social_buttons_sprite }}#facebook" />
  17. </svg>
  18. </a>
  19. {% endif %}
  20. <!-- Twitter share button -->
  21. {% if items.services.twitter %}
  22. <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 share-twitter" rel="noopener">
  23. <svg {{ width }} {{ height }} {{ radius }}>
  24. <use href="{{ social_buttons_sprite }}#twitter" />
  25. </svg>
  26. </a>
  27. {% endif %}
  28. <!-- WhatsApp share button -->
  29. {% if items.services.whatsapp %}
  30. <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 share-whatsapp" rel="noopener">
  31. <svg {{ width }} {{ height }} {{ radius }}>
  32. <use href="{{ social_buttons_sprite }}#whatsapp" />
  33. </svg>
  34. </a>
  35. {% endif %}
  36. <!-- Facebook Messenger share button -->
  37. {% if items.services.facebook_messenger %}
  38. <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 share-facebook-messenger" rel="noopener">
  39. <svg {{ width }} {{ height }} {{ radius }}>
  40. <use href="{{ social_buttons_sprite }}#messenger" />
  41. </svg>
  42. </a>
  43. {% endif %}
  44. <!-- Pinterest share button -->
  45. {% if items.services.pinterest %}
  46. <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 share-pinterest" rel="noopener">
  47. <svg {{ width }} {{ height }} {{ radius }}>
  48. <use href="{{ social_buttons_sprite }}#pinterest" />
  49. </svg>
  50. </a>
  51. {% endif %}
  52. <!-- Linkedin share button -->
  53. {% if items.services.linkedin %}
  54. <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ items.page_url }}" target="_blank" title="{{ 'Share to'|t }} Linkedin" aria-label="{{ 'Share to'|t }} Linkedin" class="social-sharing-buttons__button share-linkedin" rel="noopener">
  55. <svg {{ width }} {{ height }} {{ radius }}>
  56. <use href="{{ social_buttons_sprite }}#linkedin" />
  57. </svg>
  58. </a>
  59. {% endif %}
  60. <!-- Digg share button -->
  61. {% if items.services.digg %}
  62. <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 share-digg" rel="noopener">
  63. <svg {{ width }} {{ height }} {{ radius }}>
  64. <use href="{{ social_buttons_sprite }}#digg" />
  65. </svg>
  66. </a>
  67. {% endif %}
  68. <!-- Tumblr share button -->
  69. {% if items.services.tumblr %}
  70. <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 share-tumblr" rel="noopener">
  71. <svg {{ width }} {{ height }} {{ radius }}>
  72. <use href="{{ social_buttons_sprite }}#tumblr" />
  73. </svg>
  74. </a>
  75. {% endif %}
  76. <!-- Reddit share button -->
  77. {% if items.services.reddit %}
  78. <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 share-reddit" rel="noopener">
  79. <svg {{ width }} {{ height }} {{ radius }}>
  80. <use href="{{ social_buttons_sprite }}#reddit" />
  81. </svg>
  82. </a>
  83. {% endif %}
  84. <!-- Evernote share button -->
  85. {% if items.services.evernote %}
  86. <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 share-evernote" rel="noopener">
  87. <svg {{ width }} {{ height }} {{ radius }}>
  88. <use href="{{ social_buttons_sprite }}#evernote" />
  89. </svg>
  90. </a>
  91. {% endif %}
  92. <!-- Email share button -->
  93. {% if items.services.email %}
  94. <a href="mailto:?subject={{ items.title }}&body={{ items.page_url }}" title="{{ 'Share to'|t }} Email" aria-label="{{ 'Share to'|t }} Email" class="social-sharing-buttons__button share-email" target="_blank" rel="noopener">
  95. <svg {{ width }} {{ height }} {{ radius }}>
  96. <use href="{{ social_buttons_sprite }}#email" />
  97. </svg>
  98. </a>
  99. {% endif %}
  100. <!-- Copy link share button -->
  101. {% if items.services.copy %}
  102. {{ attach_library('better_social_sharing_buttons/copy-current-url') }}
  103. <a class="btnCopy social-sharing-buttons__button share-copy">
  104. <svg {{ width }} {{ height }} {{ radius }}>
  105. <use href="{{ social_buttons_sprite }}#copy" />
  106. </svg>
  107. <div class="social-sharing-buttons__popup">{{ 'Copied to clipboard'|t }}</div>
  108. </a>
  109. {% endif %}
  110. <!-- Print share button -->
  111. {% if items.services.print %}
  112. {% if items.print_css %}
  113. {% set href = "#" %}
  114. {% set rel = items.print_css %}
  115. {{ attach_library('better_social_sharing_buttons/print-css') }}
  116. {% else %}
  117. {% set href = "javascript:window.print()" %}
  118. {% endif %}
  119. <a href="{{ href }}" rel="{{ rel }}" id="printlink" class="share-print">
  120. <svg {{ width }} {{ height }} {{ radius }}>
  121. <use href="{{ social_buttons_sprite }}#print" />
  122. </svg>
  123. </a>
  124. {% endif %}
  125. </div>