Skip to content

Instantly share code, notes, and snippets.

@stewsnooze
Created April 14, 2016 18:10
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stewsnooze/d4aa52f054b3983f687146cc4c0d1ca8 to your computer and use it in GitHub Desktop.
Save stewsnooze/d4aa52f054b3983f687146cc4c0d1ca8 to your computer and use it in GitHub Desktop.
//in dollartheme.theme where dollartheme is your theme name
function dollartheme_preprocess_node(array &$variables) {
$node = $variables['node'];
$variables['abs_url'] = $node->url('canonical', array(
'language' => $node->language(),
'absolute' => TRUE,
));
//in the twig file
{{ attach_library('ib/rrssb') }}
<div class="social-wrapper" style="width: 160px">
<ul class="rrssb-buttons">
<li class="rrssb-facebook">
<a href="https://www.facebook.com/sharer/sharer.php?u={{ abs_url }}" class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29"><path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z"/></svg></span>
<span class="rrssb-text">facebook</span>
</a>
</li>
<li class="rrssb-twitter">
<!-- Replace href with your Meta and URL information -->
<a href="https://twitter.com/intent/tweet?text={{ node.title.getString }} -- {{ abs_url }}"
class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62a15.093 15.093 0 0 1-8.86-2.32c2.702.18 5.375-.648 7.507-2.32a5.417 5.417 0 0 1-4.49-3.64c.802.13 1.62.077 2.4-.154a5.416 5.416 0 0 1-4.412-5.11 5.43 5.43 0 0 0 2.168.387A5.416 5.416 0 0 1 2.89 4.498a15.09 15.09 0 0 0 10.913 5.573 5.185 5.185 0 0 1 3.434-6.48 5.18 5.18 0 0 1 5.546 1.682 9.076 9.076 0 0 0 3.33-1.317 5.038 5.038 0 0 1-2.4 2.942 9.068 9.068 0 0 0 3.02-.85 5.05 5.05 0 0 1-2.48 2.71z"/></svg></span>
<span class="rrssb-text">twitter</span>
</a>
</li>
<li class="rrssb-googleplus">
<!-- Replace href with your meta and URL information. -->
<a href="https://plus.google.com/share?url={{ abs_url }}" class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 8.29h-1.95v2.6h-2.6v1.82h2.6v2.6H21v-2.6h2.6v-1.885H21V8.29zM7.614 10.306v2.925h3.9c-.26 1.69-1.755 2.925-3.9 2.925-2.34 0-4.29-2.016-4.29-4.354s1.885-4.353 4.29-4.353c1.104 0 2.014.326 2.794 1.105l2.08-2.08c-1.3-1.17-2.924-1.883-4.874-1.883C3.65 4.586.4 7.835.4 11.8s3.25 7.212 7.214 7.212c4.224 0 6.953-2.988 6.953-7.082 0-.52-.065-1.104-.13-1.624H7.614z"/></svg></span>
<span class="rrssb-text">google+</span>
</a>
</li>
<li class="rrssb-linkedin">
<!-- Replace href with your meta and URL information. -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url={{ abs_url }}&title={{ node.title.getString }}" class="popup">
<span class="rrssb-icon"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><path d="M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z"></path></svg></span>
<span class="rrssb-text">linkedin</span>
</a>
</li>
</ul>
</div>
</div>
@stewsnooze
Copy link
Author

I think I included an extra closing div here

@njt1982
Copy link

njt1982 commented Apr 14, 2016

The {{ attach_library('ib/rrssb') }} refers to a library setup in your dollartheme.libraries.yml file. In this case:

rrssb:
  css:
    component:
      css/rrssb.css: {}

  js:
    js/rrssb.js: {}

Each of those is the CSS and JS from the RRSSB library you download.

@waako
Copy link

waako commented Apr 14, 2016

Presumably you also need

dependencies:
    - core/jquery

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment