DSpace with links to social media - facebook

Question

At the DSpace repositories of Massey University and University of Waikato in New Zealand there are buttons to share the link to a document in the repository with Twitter, Facebook and other social media.
Also have both sites a Window with Twitter tweets.
I hope someone of you wants to explain how both functionalities are added to the DSpace Mirage 2 theme.

Answer 1

We use the addThis service with our DSpace installation: http://www.addthis.com/
The service allows you to customize the share options for your site.
For Mirage2, we added the following javascript to Mirage2/xsl/core/page-structure.xsl to add the service to our site. The link will contain a unique id for your configuration.
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=..."></script>
We also added some custom CSS to Mirage2/styles/_style.scss
.container {
padding-left: 50px;
padding-right: 50px;
}
You can preview this on our repository site: https://repository.library.georgetown.edu/

Answer 2

terrywb's answer covers the share button aspect - that is exactly the service used at the University of Waikato's repository that Peter linked to. We add the JavaScript in navigation.xsl not page-structure.xsl, and we also add
<div class="addthis_sharing_toolbox list-group" style="min-height:37.5px"></div>
just after the opening tag for the #ds-options div, in line with the AddThis embedding instructions.
As to the tweets on the home page, refer to the Twitter embedded timeline instructions. I believe we add a placeholder div via news-xmlui.xml that then triggers a template in theme.xsl that pulls in the JavaScript and generates the required a element - example below is from the Twitter documentation.
<a class="twitter-timeline"
href="https://twitter.com/TwitterDev"
data-width="300"
data-height="300">
Tweets by #TwitterDev
</a>

Answer 3

If you want to avoid services like AddThis tracking your users or just want to keep it simple, you can use simple share links. Add to dspace-xmlui-mirage2/src/main/webapp/xsl/aspect/artifactbrowser/item-view.xsl this template:
<xsl:template name="share-section">
<div class="item-page-field-wrapper table hidden-print">
<h5><i18n:text>xmlui.mirage2.itemSummaryView.ShareSection</i18n:text></h5>
<xsl:variable name="url">
<xsl:value-of select="encoder:encode(confman:getProperty('dspace.baseUrl'))" />
<xsl:value-of select="encoder:encode('/handle/')" />
<xsl:value-of select="encoder:encode(substring-after(/mets:METS/#OBJID,'handle/'))" />
</xsl:variable>
<a target="_blank" i18n:attr="title" title="xmlui.export.mendeley"
href="http://www.mendeley.com/import/?url={$url}">
<img src="{concat($theme-path,'/images/mendeley.png')}"
i18n:attr="alt" alt="xmlui.export.mendeley" />
</a>
<a class="social-network-icon twitter"
href="http://twitter.com/home/?status={$url}"
title="Share on Twitter" target="_blank"></a>
<a class="social-network-icon facebook"
href="http://www.facebook.com/sharer.php?u={$url}"
title="Share on Facebook" target="_blank"></a>
</div>
</xsl:template>
Here you can find more share links for other social networks.
Then, you have to call the template from where you want it to appear. For example, we add it to the first column of the item metadata, at the <xsl:template match="dim:dim" mode="itemSummaryView-DIM"> template of the same file.
We got the icons from Expando (another option for sharing with social networks, and it's free software). This CSS is to show the icons:
.social-network-icon {
background-image: url("../images/social-networks-icons.png");
background-repeat: no-repeat;
background-origin: 0;
display: inline-block;
height: 16px;
margin-left: 4px;
vertical-align: middle;
width: 16px;
}
.social-network-icon.facebook {
background-position: -0*16px 0;
}
.social-network-icon.google-plus {
background-position: -2*16px 0;
}