OUBlog: Google+ share a (publicly accessible) post #12157

moodleou · Oct 28, 2014 · 34073fd · 34073fd
1 parent d6b74bc
commit 34073fd
Show file tree

Hide file tree

Showing 5 changed files with 113 additions and 35 deletions.
diff --git a/internaldoc/testcase.socialmedia.txt b/internaldoc/testcase.socialmedia.txt
@@ -14,6 +14,7 @@ This test case requires:
 - a text file 'post1.txt' for attachment-upload.
 - a user with administration rights
 - access to the personal blog.
+- access to accounts on each of the social media systems.
 
 The test server must have debugging set to DEVELOPER level and to display
 errors; during all parts of the test script, there should be no debugging
@@ -25,6 +26,9 @@ without Javascript a "Tweet" link will be provided.
 Note: With Javascript enabled a Facebook "Share" widget button will be provided,
 without Javascript no "Share" link will be provided.
 
+Note: With Javascript enabled a Google+ "Share" widget button will be provided,
+without Javascript no "Share" link will be provided.
+
 TCR Creating blog data
 ======================
 
@@ -37,7 +41,7 @@ TCR01 / admin.
    Select 'Add post' button to save the new post and return to main blog view.
 -- Verify post created is displayed at the top of the posts area.
 -- Confirm that the post has a dark grey box in its top right corner,
-   with the label 'Share this post' with both a 'Tweet' and a 'Share'
+   with the label 'Share this post' with a 'Tweet', an 'f Share' and a 'g+ Share'
    button/link beneath.
 
 TCR02 / admin.
@@ -51,16 +55,15 @@ TCR02 / admin.
 -- Confirm that the post has a light grey box in its top right corner, with the label
    'Attachments' with an icon and 'post1.txt' download link beneath.
 -- Confirm that beneath the 'Attachments' box is the dark grey box, with the label
-   'Share this post' with both a 'Tweet' and a 'Share' button/link beneath.
+   'Share this post' with a 'Tweet', an 'f Share' and a 'g+ Share' button/link beneath.
 
 TCR03 / admin.
    Select the 'New blog post' button.
    Enter 'TCR03 can only tweet a public post' into the 'Title' field.
    Enter some text into the 'Message' field.
    Change 'Who can read this?' to 'Visible to everyone who is logged in to the system'.
 -- Verify that the post does not have the dark grey box, with the label
-   'Share this post' with both a 'Tweet' and a 'Share' button/link beneath.
-
+   'Share this post' with a 'Tweet', an 'f Share' and a 'g+ Share' button/link beneath.
 
 TWT Testing Tweet button
 ========================
@@ -78,18 +81,33 @@ TWT02a / admin
 -- Verify that the text box 'Share a link with your followers' contains
    'TCR01 tweet a titled post {Admin user's blog}'
 -- Confirm that this is followed by the URL of the viewpost.php page for the post "TCR01".
+-- Confirm that beneath this is are text boxes for user name and password and the
+   'Sign in and Tweet' button.
+   Close the popup window.
 
 TWT02b / admin
-   Click the 'Share' link for post "TCR01 tweet a titled post".
--- Confirm that a new 'Share on Facebook' window pops up.
+   Click the 'f Share' link for post "TCR01 tweet a titled post".
+-- Confirm that a new 'Facebook' window pops up.
+   After successful login the window will change to 'Share on Facebook'.
 -- Confirm that there is a dropdown selector with options for sharing to timelines.
 -- Verify that there is a text box which contains 'Say something about this..'
-   Beneath which is a box containing
-   'TCR01 tweet a titled post' with the domain url beneath.
+   beneath which is a box containing 'TCR01 tweet a titled post' with the domain url beneath.
 -- Confirm that this is followed by 'Public' a dropdown selector with options for
    privacy, a 'Cancel' and 'Share link' buttons.
    Close the popup window.
 
+TWT02c / admin
+   Click the 'g+ Share' link for post "TCR01 tweet a titled post".
+-- Confirm that a new 'login to Google' window pops up.
+   After successful login the window will disappear.
+   Click the "TCR01 tweet a titled post" 'g+ Share' button/link again.
+-- Confirm that a 'Share this on Google+ as {G+ User}' popup appears.
+-- Verify that there is a text box which contains 'Add a comment..'
+   Beneath which is a box containing the URL of the viewpost.php page for the post "TCR01".
+-- Confirm that this is followed by a dropdown selector with options for privacy,
+   and a 'Share' button.
+   Close the popup window.
+
 TWT03 / admin
    On the Untitled post "TCR02".
    Click 'Permalink' link, to open this post in another tab.
@@ -103,19 +121,30 @@ TWT04a / admin
 -- Verify that the text box 'Share a link with your followers' contains
    'Untitled post {Admin user's blog}'
 -- Confirm that this is followed by the URL of the viewpost.php page for the post "TCR02".
-
+-- Confirm that beneath this is are text boxes for user name and password and the
+   'Sign in and Tweet' button.
    Close the popup window.
 
 TWT04b / admin
-   Click the 'Share' link for the Untitled post "TCR02".
--- Confirm that a new 'Share on Facebook' window pops up.
+   Click the 'f Share' link for the Untitled post "TCR02".
+-- Confirm that a new 'Facebook' window pops up.
+   After successful login the window will change to 'Share on Facebook'.
 -- Confirm that there is a dropdown selector with options for sharing to timelines.
 -- Verify that there is a text box which contains 'Say something about this..'
-   Beneath which is a box containing the domain url.
+   beneath which is a box containing 'Untitled post TCR02' with the domain url beneath.
 -- Confirm that this is followed by 'Public' a dropdown selector with options for
    privacy, a 'Cancel' and 'Share link' buttons.
    Close the popup window.
 
+TWT04c / admin
+   Click the 'g+ Share' link for Untitled post "TCR02".
+-- Confirm that a 'Share this on Google+ as {G+ User}' popup appears.
+-- Verify that there is a text box which contains 'Add a comment..'
+   Beneath which is a box containing the URL of the viewpost.php page for the post "TCR02".
+-- Confirm that this is followed by a dropdown selector with options for privacy,
+   and a 'Share' button.
+   Close the popup window.
+
 TWT05a / admin
    On the post titled "TCR01 tweet a titled post".
    Click 'Permalink' link, to open the post in the viewpost.php page.
@@ -124,7 +153,6 @@ TWT05a / admin
 -- Verify that the text box 'Share a link with your followers' contains
    'TCR01 tweet a titled post {Admin user's blog}'
 -- Confirm that this is followed by the URL of this viewpost.php page for the post "TCR01".
-
    Close the popup window.
 
 TWT05b / admin
@@ -138,24 +166,36 @@ TWT05b / admin
    privacy, a 'Cancel' and 'Share link' buttons.
    Close the popup window.
 
+TWT05c / admin
+   Click the 'g+ Share' link for post "TCR01 tweet a titled post".
+-- Confirm that a 'Share this on Google+ as {G+ User}' popup appears.
+-- Verify that there is a text box which contains 'Add a comment..'
+   Beneath which is a box containing the URL of the viewpost.php page for the post "TCR02".
+-- Confirm that this is followed by a dropdown selector with options for privacy,
+   and a 'Share' button.
+   Close the popup window.
+   Return to the blog main page.
+
 TWT06 / admin
    In the Blog summary block.
    Click the 'View site entries' link.
 -- Verify the the allposts.php page opens showing 'Personal blogs'
 -- Confirm that only posts 'Visible to anyone in the world' have the dark grey box,
-   with the label 'Share this post' with both a 'Tweet' and a 'Share' button/link beneath.
+   with the label 'Share this post' with a 'Tweet', an 'f Share' and a 'g+ Share'
+   button/link beneath.
 
 TWT07 / admin
-   Repeat steps TWT01-TWT04 to confirm functionality for allposts, 'Personal blogs' page.
-
-   Log out or open a different browser.
+   Repeat steps TWT01-TWT05c to confirm functionality for allposts.php, the 'Personal blogs' page.
+   Return to the blog main page.
 
 TWT08 / Not logged in user
+   Log out or open a different browser.
+   Go to the {Admin user's blog} in 'Personal Blogs'.
 -- Confirm that only posts 'Visible to anyone in the world' are available.
 -- Confirm that they have the dark grey box, with the label 'Share this post'
-   with a 'Tweet' button/link beneath.
+   with a 'Tweet', an 'f Share' and a 'g+ Share' button/link beneath.
 
 TWT09 / Not logged in user
-   Repeat steps TWT01-TWT04 to confirm functionality for 'Non logged in user'.
+   Repeat steps TWT01-TWT05c to confirm functionality for 'Non logged in user'.
 
 Test ends.
diff --git a/locallib.php b/locallib.php
@@ -1756,10 +1756,10 @@ function oublog_get_meta_tags($oublog, $bloginstance, $groupid, $cm, $post = nul
     }
     if (isset($post)) {
         $postname = !(empty($post->title)) ? $post->title : get_string('untitledpost', 'oublog');
-        $meta .= '<meta property = "og:type" content="website" />';
-        $meta .= '<meta property = "og:title" content="' . $postname . '" />';
-        $meta .= '<meta property ="og:description" content="' . $oublog->name . '" />';
-        $meta .= '<meta property ="og:url" content="' .$CFG->wwwroot .
+        $meta .= '<meta property="og:type" content="article" />';
+        $meta .= '<meta property="og:title" content="' . $postname . '" />';
+        $meta .= '<meta property="og:description" content="' . $oublog->name . '" />';
+        $meta .= '<meta property="og:url" content="' . $CFG->wwwroot .
                 '/mod/oublog/viewpost.php?post=' . $post->id. '" />';
     }
 

diff --git a/renderer.php b/renderer.php
@@ -113,24 +113,41 @@ public function render_post($cm, $oublog, $post, $baseurl, $blogtype,
                 $output .= get_string('share', 'oublog');
                 $output .= html_writer::start_tag('div', array('class' => 'oublog-post-share'));
                 // Show tweet link.
+                $output .= html_writer::start_tag('div',
+                        array('class' => 'share-button'));
                 $params = array('url' => $purl, 'dnt' => true, 'count' => 'none',
                         'text' => $postname . " " . $oubloginstance->name,
                         'class' => 'twitter-share-button');
                 $turl = new moodle_url('https://twitter.com/share', $params);
                 $output .= html_writer::link($turl, $linktext, $params);
-
+                $output .= html_writer::end_tag('div');
                 // Show facebook link.
                 $output .= html_writer::start_tag('div',
-                        array('class'=>'fb-share-button',
+                        array('class' => 'share-button'));
+                $output .= html_writer::start_tag('div',
+                        array('class' => 'fb-share-button',
                         'data-href' => $purl,
                         'data-colorscheme' => 'dark'));
                 $output .= html_writer::end_tag('div');
+                $output .= html_writer::end_tag('div');
+                // Show googleplus link.
+                $output .= html_writer::start_tag('div',
+                        array('class' => 'share-button'));
+                $output .= html_writer::start_tag('div',
+                        array('class'=>'g-plus',
+                        'data-href' => $purl,
+                        'data-action' => 'share',
+                        'data-height' => 20,
+                        'data-annotation' => 'none'));
+                $output .= html_writer::end_tag('div');
+                $output .= html_writer::end_tag('div');
 
                 $output .= html_writer::end_tag('div');
                 $output .= html_writer::end_tag('div');
-                // With JS enabled show twitters widget button.
+                // With JS enabled show social widget buttons.
                 self::render_twitter_js();
                 $output .= self::render_facebook_js();
+                $output .= self::render_googleplus_js();
             }
 
         }
@@ -1407,18 +1424,27 @@ public function render_facebook_js() {
         } else {
             $facebookjs = <<<EOF
 <div id="fb-root"></div>
-<script>(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id)) return;
-  js = d.createElement(s); js.id = id;
-  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));</script>
 EOF;
+            $PAGE->requires->js_init_code("Y.Get.js('https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0', {async:true})");
             $loaded = true;
             return $facebookjs;
         }
     }
+
+    /**
+     * Renders Google+ widget js code into the page.
+     */
+    public function render_googleplus_js() {
+        global $PAGE;
+        static $loaded;
+        if ($loaded || $PAGE->devicetypeinuse == 'legacy') {
+            return;
+        } else {
+            $PAGE->requires->js_init_code("Y.Get.js('https://apis.google.com/js/platform.js', {async:true})");
+            $loaded = true;
+            return;
+        }
+    }
 }
 
 class oublog_statsinfo implements renderable {

diff --git a/styles.css b/styles.css
@@ -152,13 +152,14 @@
     -webkit-border-radius: 5px;
     border-radius: 5px;
     background-color: #6E6E6E;
-    width: 200px;
+    width: 201px;
     font-size: 0.85em;
     color: white;
     margin-bottom: .5em;
 }
 
 .oublog-post .oublog-post-attachment {
+    display: inline;
     word-break: break-all;
     margin-right: .75em;
 }
@@ -172,6 +173,17 @@
     z-index: 4;
 }
 
+.share-button {
+    display: inline;
+    padding-left: 5px;
+    vertical-align: top;
+}
+
+.twitter-share-button {
+    /* JS disabled text link */
+    color: white;
+}
+
 .fb-share-button {
     padding-left: 5px;
     vertical-align: top;

diff --git a/version.php b/version.php
@@ -23,7 +23,7 @@
  * @package oublog
  **/
 
-$plugin->version  = 2014102701;
+$plugin->version  = 2014102702;
 $plugin->requires = 2014051200;
 $plugin->cron     = 60*60*4; // 4 hours.
 $plugin->component = 'mod_oublog';// Full name of the plugin (used for diagnostics)