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 }}¬es={{ 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>
3 theme calls to better-social-sharing-buttons.html.twig
- SocialSharingButtons::build in src/
Plugin/ DsField/ SocialSharingButtons.php - SocialSharingButtonsBlock::build in src/
Plugin/ Block/ SocialSharingButtonsBlock.php - Builds and returns the renderable array for this block plugin.
- SocialSharingButtonsParagraph::build in src/
Plugin/ DsField/ SocialSharingButtonsParagraph.php
File
theme/better-social-sharing-buttons.html.twigView source
- {{ 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 }}¬es={{ 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>