Social media: Icons and sharing

Icons with link to social media

• Facebook
• Twitter
• Google+
• YouTube
• LinkedIn
• Instagram
• Tripadvisor
• Snapchat
• Pinterest

How to insert icons and links to social media

Placement

• At the bottom of content field for article and event templates
• On faculty and institute front pages:
  • Between "Services and tools" and "Events", or at the bottom.

1. Set title to "<Enhetsnavn> i sosiale medier"

2. Select "Source" and paste the following HTML code:

   <ul class="vrtx-social-list">
       <li><a class="facebook" href="/">Facebook</a></li>
       <li><a class="twitter" href="/">Twitter</a></li>
       <li><a class="google-plus" href="/">Google+</a></li>
       <li><a class="youtube" href="/">YouTube</a></li>
       <li><a class="linkedin" href="/">LinkedIn</a></li>
       <li><a class="instagram" href="/">Instagram</a></li>
       <li><a class="tripadvisor" href="/">Tripadvisor</a></li>
       <li><a class="snapchat" href="/">Snapchat</a></li>
       <li><a class="pinterest" href="/">Pinterest</a></li>
   </ul>

3. Go out of source view and remove links to social media that are not relevant

4. Enter the correct URL between the quotes after href=" / " to the social media you want to link to

5. Save the web page and you will get clickable icons for the the social media you have linked to

Share on E-mail, Facebook or Twitter

How to insert a Share on-feature

• Component for tips and share feature on pagers that do not automatically have these features, for example project pages or thematic front pages. Should not be used on general front pages where there is no need for sharing.
• Copy the code below and paste at the bottom of the web page you want to share.
• Code:

<div class="vrtx-social-components">${resource:email-friend} ${resource:share-at}</div>

Link to newsletter

How to insert a link to newsletter

• Copy the code below and paste on the web page.
• Code:

${lib:newsletter-link url=[/lenke/til/nyhetsbrev]}

• If you want to override link text, you can enter text=[] with your own text.

Inbuilt Twitter feed

How to insert an inbuilt Twitter feed

• Copy the code below and paste on the web page.
• Code:

${lib:twitter-feed user=[brukernavn]}

• The height of the Twitter frame is by default 400 pixels. If you want to override, you can enter height=[] with your own height.

Facebook and Social Plugins

• Se egne veiledninger hos Facebook for hvilke muligheter som finnes.

Twitter Cards

How to share articles on Twitter with picture and text

Twitter cards currently only work when sharing articles. It is on the development plan to have this as an option throughout the whole website.

Picture: In order for a picture to be displayed on Twitter when someone shares an article from UiO, the picture must be inserted in the "Image" field  in connection with the introduction to the article template.

Text: In order for your own text to be displayed when articles are shared, it must be entered specifically in "Metadata" field under "About" tab in the article. If no text is entered here, the standard text "Les denne saken p? UiOs nettsider" will be displayed in the Twitter feed.

Twitter has its own web page to show previews of how your shared links look:

• Twitter Card Validator