search

mhoad / oaf-analytics

Outstanding issues to fix up the analytics implementation on the new OAF website
0 stars 0 forks source link

Add custom data-attributes to blog post share icons #8

Open mhoad opened 7 years ago

mhoad commented 7 years ago

This issue is almost identical to issue #7 but if you can change the existing social media share icons on the blog (as shown below) to add a custom data-attribute that would be awesome :) image

Right now the code is:

<li class="share__item share__item--twitter">
  <a href="https://twitter.com/intent/tweet?text=One%20Acre%20Fund%20is%20delighted%20with%20the%20news%20that%20Ambassador%20Mark%20Green%20will%20be%20nominated%20by%20President%20Donald%20Trump%20to%20be%20the%20next%20administrator%20of%20USAID&amp;url=https%3A//oaf-production.torchboxapps.com/blog/one-acre-fund-applauds-nomination-green-lead-usaid/&amp;via=oneacrefund" title="Share on Twitter">
    <span>Share on Twitter</span>
    <svg class="share__icon" height="20px" width="20px">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
    </svg>
  </a>
</li>

If you can add a data-social-network attribute to the href element that includes the name of the social media network like so:

<li class="share__item share__item--twitter">
  <a data-social-network="Twitter" href="https://twitter.com/intent/tweet?text=One%20Acre%20Fund%20is%20delighted%20with%20the%20news%20that%20Ambassador%20Mark%20Green%20will%20be%20nominated%20by%20President%20Donald%20Trump%20to%20be%20the%20next%20administrator%20of%20USAID&amp;url=https%3A//oaf-production.torchboxapps.com/blog/one-acre-fund-applauds-nomination-green-lead-usaid/&amp;via=oneacrefund" title="Share on Twitter">
    <span>Share on Twitter</span>
    <svg class="share__icon" height="20px" width="20px">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#social-twitter"></use>
    </svg>
  </a>
</li>

I can take care of everything else from that point.

Note: As far as I can tell the only pages with the "share this page on social media" links are the blog posts. However, if I missed them elsewhere this issue would also apply in those instances as well

nimasmi commented 7 years ago

This is now done and deployed to the staging site at oneacrefund-staging.torchboxapps.com. The template that adds these links is a shared inclusion template, so this change will be effected wherever these icons appear, which at the moment is the blog, and individual job listings, e.g. at the bottom of https://oneacrefund-staging.torchboxapps.com/work-with-us/job-openings/g/?gh_jid=514583