Share annotations using Annotator
JavaScript CSS HTML
Latest commit a882bf9 Jun 9, 2015 @danielcebrian fix issue #3
Permalink
Failed to load latest commit information.
build fix issue #3 Jun 9, 2015
lib API only at the beginning Jan 9, 2014
src fix issue #3 Jun 9, 2015
License.rst added License Jan 27, 2014
README.md Added baseUrl in the options Nov 20, 2013
demo.css First Commit Oct 13, 2013
demo.html Created the possibility to add whatever social network by options Oct 24, 2013

README.md

Share and an API for Annotator Plugin

Share Annotator Plugin

share-annotator.js is a plugin for Annotator. This project has two objectives. On the one hand, to share with social networks (Google, Facebook, Twitter, email...). On the other hand, the annotations API to create a URL that open automatically the annotation, no matter if the annotation is not in the database.

The share plugin allow you to share text annotations and video annotations with Open Video Annotator. The code is written in javascript/jquery, but you can translate to coffee using js2coffee, the language used in Annotator.

This plugin will be used in Open Video Annotation tool. A project supported by Center for Hellenic Studies, at Harvard University and the Becas Talentia program from the Junta de Andalucia, Spain.

Live-Demo

There is a demo of the share annotation plugin in the next webpage:

http://danielcebrian.com/share-annotation/demo.html

Installation

To use the tool you need to install the Annotator plugin to annotate text. But if you want to annotate video you will need the Open Video Annotation plugin.

In addition add share-annotator.min.js and share-annotator.min.css CDN distributed file to your head tag, just after videojs:

    <head>
        <!-- Annotator -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script src="http://assets.annotateit.org/annotator/v1.2.7/annotator-full.min.js"></script>
        <link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.7/annotator.min.css">

        <!--Share Pluging-->
        <script src="build/share-annotator.min.js"></script>
        <link href="build/share-annotator.min.css" rel="stylesheet">

    </head>

Furthermore, you will need to create an instance of Annotator with the plugin, as follow:

    <script>
        $('#div_id').annotator().annotator('addPlugin','Share');
    </script>

Change #div_id for the real id where the Annotator is.

Options

It is possible to add new social networks and sort in the display using the options. The two parameters in the options are:

  • shareIn: This is an array with the social networks sorted (by default: ['facebook','twitter','email','google'])
  • getUrl: This is an important parameter, because with this you could add your own social network. In order to use this, you will need to create a function with three inlet parameters (title, link, noteText).
  • baseUrl: This is the base url for all the shared annotations (by default: the current webpage)

  • Title is the static text by default ("Sharing a annotation with Open Video Annotation")

  • Link is the url that you will share
  • noteText is the text that you have added in your annotation

As example you can see by default the next social network functions:

 {
    'facebook':function(title,link,noteText){
        return 'https://www.facebook.com/sharer/sharer.php?s=100&p[url]='+link+'&p[title]='+encodeURIComponent('Open Video Annotation')+'&p[summary]='+noteText;
    },
    'twitter':function(title,link,noteText){
        return 'https://twitter.com/intent/tweet?original_referer='+link+'&source=tweetbutton&url='+link+ "&via=OpenVideoAnnotation&text=" +encodeURIComponent('I want to share the next Open Video Annotation: ');
    },
    'google':function(title,link,noteText){
        return 'https://plus.google.com/share?url='+link;
    },
    'email': function(title,link,noteText){
        return 'mailto:?subject='+title+'&body='+link;
    }
}

Ways to share

There is two way to share an annotation.

The first one is using an old stored annotation in the back-end with its id, the url will use "ovaId" to know the Id of the annotation.

The second one won't store the annotation and it will need the annotation parameters (ovaStart, ovaEnd and ovaText).

For Text Annotation is necessary in addition:

  • ovastartOffset and ovaendOffset like annotator does with the text annotations

For Video Annotation is necessary in addition:

  • ovaContainer with the id of the video player
  • ovaSrc with the source url of the video to be loaded