OUBlog: Facebook share a (publicly accessible) post #12098

internaldoc/testcase.socialmedia.txt

@@ -1,5 +1,5 @@
-This script describes steps to test OU Blog standard tweet functionality.
-It is intended to cover just the Tweet UI feature.
+This script describes steps to test OU Blog socialmedia functionality.
+It is intended to cover just the UI features.
 
 NOTE: In this test case, the word 'blog' always refers to the OU blog.
 
@@ -22,6 +22,9 @@ warnings.
 Note: With Javascript enabled a Twitter "Tweet" widget button will be provided,
 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.
+
 TCR Creating blog data
 ======================
 
@@ -34,7 +37,8 @@ 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 a 'Tweet' button/link beneath.
+   with the label 'Share this post' with both a 'Tweet' and a 'Share'
+   button/link beneath.
 
 TCR02 / admin.
    Select the 'New blog post' button.
@@ -47,15 +51,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 a 'Tweet' button/link beneath.
+   'Share this post' with both a 'Tweet' and a '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 a 'Tweet' button/link beneath.
+   'Share this post' with both a 'Tweet' and a 'Share' button/link beneath.
 
 
 TWT Testing Tweet button
@@ -68,13 +72,22 @@ Note the post=id in the viewpost.php page URL.
 
    Return to the post "TCR01" on the blog main page.
 
-TWT02 / admin
+TWT02a / admin
    Click the 'Tweet' button/link for post "TCR01 tweet a titled post".
 -- Confirm that a new 'Share a link on Twitter' window pops up.
 -- 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".
 
+TWT02b / admin
+   Click the 'Share' link for post "TCR01 tweet a titled post".
+-- Confirm that a new 'Share on Facebook' window pops up.
+-- 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.
+-- Confirm that this is followed by 'Public' a dropdown selector with options for
+   privacy, a 'Cancel' and 'Share link' buttons.
    Close the popup window.
 
 TWT03 / admin
@@ -84,7 +97,7 @@ Note the post=id in the viewpost.php page URL.
 
    Return to the post "TCR02" on the blog main page.
 
-TWT04 / admin
+TWT04a / admin
    Click the 'Tweet' button/link for the Untitled post "TCR02".
 -- Confirm that a new 'Share a link on Twitter' window pops up.
 -- Verify that the text box 'Share a link with your followers' contains
@@ -93,7 +106,17 @@ TWT04 / admin
 
    Close the popup window.
 
-TWT05 / admin
+TWT04b / admin
+   Click the 'Share' link for the Untitled post "TCR02".
+-- Confirm that a new 'Share on Facebook' window pops up.
+-- 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.
+-- Confirm that this is followed by 'Public' a dropdown selector with options for
+   privacy, a 'Cancel' and 'Share link' buttons.
+   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.
    Click the 'Tweet' button/link for the post.
@@ -104,12 +127,23 @@ TWT05 / admin
 
    Close the popup window.
 
+TWT05b / admin
+   Click the 'Share' link for post "TCR01 tweet a titled post".
+-- Confirm that a new 'Share on Facebook' window pops up.
+-- 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.
+-- Confirm that this is followed by 'Public' a dropdown selector with options for
+   privacy, a 'Cancel' and 'Share link' buttons.
+   Close the popup window.
+
 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 a 'Tweet' button/link beneath.
+   with the label 'Share this post' with both a 'Tweet' and a 'Share' button/link beneath.
 
 TWT07 / admin
    Repeat steps TWT01-TWT04 to confirm functionality for allposts, 'Personal blogs' page.

locallib.php

@@ -1743,7 +1743,7 @@ function oublog_get_feedblock($oublog, $bloginstance, $groupid, $postid, $cm, $i
  * @param object $context
  * @return string
  */
-function oublog_get_meta_tags($oublog, $bloginstance, $groupid, $cm) {
+function oublog_get_meta_tags($oublog, $bloginstance, $groupid, $cm, $post = null) {
     global $CFG;
 
     $meta = '';
@@ -1754,6 +1754,14 @@ function oublog_get_meta_tags($oublog, $bloginstance, $groupid, $cm) {
         $meta .= '<link rel="alternate" type="application/atom+xml" title="'.get_string('atomfeed', 'oublog').'" href="'.$blogurlatom .'" />';
         $meta .= '<link rel="alternate" type="application/atom+xml" title="'.get_string('rssfeed', 'oublog').'" href="'.$blogurlrss .'" />';
     }
+    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 .
+                '/mod/oublog/viewpost.php?post=' . $post->id. '" />';
+    }
 
     return ($meta);
 }

renderer.php

@@ -118,11 +118,21 @@ public function render_post($cm, $oublog, $post, $baseurl, $blogtype,
                         'class' => 'twitter-share-button');
                 $turl = new moodle_url('https://twitter.com/share', $params);
                 $output .= html_writer::link($turl, $linktext, $params);
+
+                // Show facebook link.
+                $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');
                 $output .= html_writer::end_tag('div');
                 // With JS enabled show twitters widget button.
                 self::render_twitter_js();
+                $output .= self::render_facebook_js();
             }
+
         }
         $output .= html_writer::end_tag('div');
 
@@ -1386,6 +1396,29 @@ public function render_twitter_js() {
         }
     }
 
+    /**
+     * Renders Facebook widget js code into the page.
+     */
+    public function render_facebook_js() {
+        global $PAGE;
+        static $loaded;
+        if ($loaded || $PAGE->devicetypeinuse == 'legacy') {
+            return;
+        } 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;
+            $loaded = true;
+            return $facebookjs;
+        }
+    }
 }
 
 class oublog_statsinfo implements renderable {

styles.css

@@ -168,6 +168,14 @@
     margin-right: .75em;
 }
 
+.fb_iframe_widget {
+    z-index: 4;
+}
+
+.fb-share-button {
+    padding-left: 5px;
+    vertical-align: top;
+}
 .oublog-post-content,
 .oublog-comment-content {
     margin:0.4em 0;

tests/behat/personalblog.feature

@@ -268,7 +268,7 @@ Feature: Test Post and Comment on Personal OUBlog
     And I should not see "Personal OUBlog post21"
     And ".oublog-paging .next" "css_element" should not exist
 
-      # New scenario tests the tweet widget availability
+  # New scenario tests the Socialmedia widgets availability
   Scenario: Admin tests the blog tweet facility
     Given I log in as "admin"
     And I am on homepage
@@ -288,8 +288,9 @@ Feature: Test Post and Comment on Personal OUBlog
     And I should see "sc02edap01"
     And I should not see "Share this post"
     And I should not see "Tweet"
+    And I should not see "Share"
 
-    # Admin adds a WorldVis post and Tweet is available
+    # Admin adds a WorldVis post and Socialmedia widgets are available
     Given I press "New blog post"
     And I should see "New blog post"
     And I set the following fields to these values:
@@ -303,14 +304,16 @@ Feature: Test Post and Comment on Personal OUBlog
     And I should see "sc02edap02"
     And I should see "Share this post"
     And I should see "Tweet"
+    And I should see "Share"
 
-    # Admin opens viewpost page and Tweet is available
+    # Admin opens viewpost page and Socialmedia widgets are available
     And I click on "//a[contains(@href,'viewpost.php?post=2')]" "xpath_element"
     And I wait to be redirected
     Then I should see "SC02 Personal OUBlog post02"
     And I should see "SC02 Admin Persblog post02 content WorldVis"
     And I should see "sc02edap02"
     And I should see "Share this post"
     And I should see "Tweet"
+    And I should see "Share"
     And I should not see "SC02 Personal OUBlog post01"
     And I should not see "SC02 Admin Persblog post01 content Private"

version.php

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

viewpost.php

@@ -147,8 +147,8 @@
 $event->add_record_snapshot('oublog_posts', $post);
 $event->trigger();
 
-$CFG->additionalhtmlhead .= oublog_get_meta_tags($oublog, $oubloginstance, $currentgroup, $cm);
-$PAGE->set_title(format_string($oublog->name));
+$CFG->additionalhtmlhead .= oublog_get_meta_tags($oublog, $oubloginstance, $currentgroup, $cm, $post);
+$PAGE->set_title(format_string($post->title));
 $PAGE->set_heading(format_string($course->fullname));
 oublog_get_post_extranav($post, false);
 echo $OUTPUT->header();