WordPress.org

Plugin Directory

Changeset 1469119


Ignore:
Timestamp:
08/06/16 11:18:11 (14 months ago)
Author:
mikeyott
Message:

Added Facebook App ID field.
Added a convenient FB Debug button for easier troubleshooting.
Preview of homepage for when shared on Facebook.
Fixed some errors.
Updated help topics.

Location:
facebook-thumb-fixer/trunk
Files:
8 edited

Legend:

Unmodified
Added
Removed
  • facebook-thumb-fixer/trunk/_facebook-thumb-fixer.php

    r1211261 r1469119  
    55Description: Fixes the problem of the missing (or wrong) thumbnail when a post is shared on Facebook and Google+. 
    66Author: Michael Ott 
    7 Version: 1.5.1 
     7Version: 1.6 
    88Author URI: http://michaelott.id.au 
    99*/ 
     
    2424add_action('admin_enqueue_scripts', 'admin_load_fbf_css'); 
    2525 
    26 // Add field into the general settings page 
     26// Add image path field into the general settings page 
    2727$general_setting_default_fb_thumb = new general_setting_default_fb_thumb(); 
    28  
    2928class general_setting_default_fb_thumb { 
    3029    function general_setting_default_fb_thumb( ) { 
     
    3332    function register_fields() { 
    3433        register_setting( 'general', 'default_fb_thumb', 'esc_attr' ); 
    35         add_settings_field('fav_color', '<label for="default_fb_thumb" id="dfb">'.__('Default Facebook Thumb' , 'default_fb_thumb' ).'</label>' , array(&$this, 'fields_html') , 'general' ); 
     34        add_settings_field('dft', '<label for="default_fb_thumb" id="dfb">'.__('Default Facebook Thumb' , 'default_fb_thumb' ).'</label>' , array(&$this, 'fields_html') , 'general' ); 
    3635    } 
    3736    function fields_html() { 
    38         $fbt_value = get_option( 'default_fb_thumb', '' ); 
     37        $fbt_value = get_option( 'default_fb_thumb', 'medium' ); 
    3938        if ($fbt_value) { ?> 
    4039 
     
    4847 
    4948        <?php if ($fbt_value) { 
    50         echo '<span class="ftf-tick">&#10003;</span>'; 
     49        list($width, $height) = @getimagesize($fbt_value); 
     50        echo '<span class="ftf-tick">&#10004;</span>'; 
    5151        } 
    5252        echo '<p class="description">This is the full path to your default thumb. Facebook <a href="https://developers.facebook.com/docs/sharing/best-practices#images" target="_blank">recommends</a> your image be 1200x630 or 600x315. View help topics <a href="' . admin_url( '/options-general.php?page=facebook-thumb-fixer' ) . '">here</a>.</p>'; 
     
    5454        echo '<a href="' . $fbt_value . '?TB_iframe=true&width=600&height=550" class="thickbox" title="Your default open graph image is ' . $width . ' x ' . $height . ' pixels."><img src="' . $fbt_value . '" title="Default Facebook Thumb" class="thickbox ftf-preview" /></a>'; 
    5555        echo '<p class="description">Note: The image shown above is scaled down. The real dimensions are actually '; 
    56         list($width, $height) = @getimagesize($fbt_value); echo $width . ' x ' . $height . '.</p>'; 
    57         if ($image_width < 600 || $image_height < 315) { 
     56        echo $width . ' x ' . $height . '.</p>'; 
     57        if ($width < 600 || $height < 315) { 
    5858            echo '<p class="ftf-warning"><strong>WARNING:</strong> Your default Facebook thumbnail image dimensions are smaller than the minimum 600 x 315 <a href="https://developers.facebook.com/docs/sharing/best-practices#images" target="_blank">recommended</a> by Facebook.</p>'; 
    5959        } 
     
    6262} 
    6363 
     64// Add Facebook App ID field into the general settings page 
     65$general_setting_fb_app_ID = new general_setting_fb_app_ID(); 
     66class general_setting_fb_app_ID { 
     67    function general_setting_fb_app_ID( ) { 
     68        add_filter( 'admin_init' , array( &$this , 'register_fields' ) ); 
     69    } 
     70    function register_fields() { 
     71        register_setting( 'general', 'fb_app_ID', 'esc_attr' ); 
     72        add_settings_field('faid', '<label for="fb_app_ID" id="fb_app_ID">'.__('Facebook App ID' , 'fb_app_ID' ).'</label>' , array(&$this, 'fb_app_ID_field') , 'general' ); 
     73    } 
     74    function fb_app_ID_field() { 
     75    $fbaid_value = get_option( 'fb_app_ID', '' ); ?> 
     76         
     77    <input type="text" id="fb_app_ID" class="regular-text ltr" name="fb_app_ID" value="<?php echo $fbaid_value; ?>" /> 
     78    <p class="description">Find your Facebook App ID <a href="https://developers.facebook.com/apps/" target="_blank">here</a>.</p> 
     79    <?php } 
     80} 
     81 
    6482 
    6583// Add object type selection into the general settings page 
    6684$general_setting_object_type = new general_setting_object_type(); 
    67  
    6885class general_setting_object_type { 
    6986    function general_setting_object_type( ) { 
     
    165182                // TODO: additional fields for specific object types (commented out below). 
    166183        ?> 
     184        <p><strong>Object Type</strong></p> 
    167185        <select value="ftf_open_type_field" name="ftf_open_type_field" style="width:100%;"> 
    168186            <option></option> 
     
    195213            <option value="website"<?php $ot = get_post_meta($post->ID, "ftf_open_type", TRUE); if($ot == "website") { echo " selected"; } ?>>website</option> 
    196214        </select> 
    197         <p>Learn about Object Types <a href="https://developers.facebook.com/docs/reference/opengraph" target="_blank">here</a>.</p> 
    198         <p class="howto"><strong>Note: </strong>If no selction is made, the Object Type for this post/page will be 'article'.</p> 
     215        <p>If no selection is made, the Object Type for this post/page will be 'article'. Learn about Object Types <a href="https://developers.facebook.com/docs/reference/opengraph" target="_blank">here</a>.</p> 
    199216 
    200217        <?php require("inc-preview.php"); ?> 
     
    230247function ftfixer_menu() { 
    231248    $icon_path = get_option('siteurl').'/wp-content/plugins/'.basename(dirname(__FILE__)).'/images/facebook-admin.png'; 
    232     add_menu_page( __( 'Facebook Thumb' ), __( 'Facebook Thumb' ), 'manage_options', 'facebook-thumb-fixer', 'myfbft_plugin_options' ,$icon_path); 
     249    add_menu_page( __( 'FB Thumb Fixer' ), __( 'FB Thumb Fixer' ), 'manage_options', 'facebook-thumb-fixer', 'myfbft_plugin_options' ,$icon_path); 
    233250} 
    234251function myfbft_plugin_options() { 
     
    238255 
    239256<div class="task-rocket"> 
    240     <h3>Introducing Task Rocket</h3> 
    241     <p style="color:#fff; text-align:center;">Task Rocket is a simple front-end task management tool built on Wordpress.</p> 
    242     <p><a href="http://taskrocket.info/" target="_blank">Take it for a test flight</a></p> 
     257    <h3>Task Rocket</h3> 
     258    <p style="color:#fff; text-align:center;">The awesomest front-end project management theme built on WordPress.</p> 
     259    <p><a href="https://taskrocket.info/?source=ftf" target="_blank">Take it for a test flight</a></p> 
    243260</div> 
    244261 
     
    250267    list($width, $height) = @getimagesize($fbt_value); ?> 
    251268    <p class="ftf-good">Well done! You have a default Facebook thumbnail set. This will be used when a page or post you share doesn't already have a featured image. You can change the default image <a href="<?php echo get_admin_url(); ?>/options-general.php#dfb">here</a>.</p> 
    252     <a href="<?php echo $fbt_value; ?>?TB_iframe=true&width=600&height=550" class="thickbox" title="Your default open graph image is <?php echo $width . " x " . $height; ?> pixels."> 
    253     <img src="<?php echo $fbt_value; ?>" alt="" class="ftf-preview thickbox" /></a> 
     269     
     270    <h2>Homepage Preview</h2> 
     271    <p>This is an approximate preview of your homepage when shared on Facebook:</p> 
     272     
     273    <div class="ftf-live-home-preview"> 
     274        <img src="<?php echo get_option('siteurl').'/wp-content/plugins/'.basename(dirname(__FILE__)).'/images/preview-top.png'; ?>" /> 
     275     
     276        <div class="ftf-preview-details"> 
     277     
     278            <a href="<?php echo $fbt_value; ?>?TB_iframe=true&width=600&height=550" class="thickbox" title="Your default open graph image is <?php echo $width . " x " . $height; ?> pixels."> 
     279            <img src="<?php echo $fbt_value; ?>" class="thickbox" /></a> 
     280     
     281            <h1><?php echo get_bloginfo( 'name' ); ?> <a href="<?php echo get_admin_url(); ?>/options-general.php" class="edit">(edit)</a></h1> 
     282     
     283            <p> 
     284                <?php 
     285                    $tagline = get_bloginfo( 'description' ); 
     286                    $tagline_chars = substr($tagline, 0, 150); 
     287                    echo strip_tags($tagline_chars); 
     288                ?> <a href="<?php echo get_admin_url(); ?>/options-general.php" class="edit">(edit)</a> 
     289            </p> 
     290            <span class="ftf-domain"><?php echo $_SERVER['SERVER_NAME']; ?></span> 
     291        </div> 
     292    </div> 
     293     
    254294    <p class="description">Note: Facebook <a href="https://developers.facebook.com/docs/sharing/best-practices#images" target="_blank">recommends</a> your image be 1200x630 or 600x315. Your image (show here scaled down) is <?php echo $width . " x " . $height; ?>.</p> 
    255295    <?php 
    256     if ($image_width < 600 || $image_height < 315) { 
     296    if ($width < 600 || $height < 315) { 
    257297        echo '<p class="ftf-warning"><strong>WARNING:</strong> Although you do have a default Facebook thumbnail, the dimensions are smaller than the minimum 600 x 315 <a href="https://developers.facebook.com/docs/sharing/best-practices#images" target="_blank">recommended</a> by Facebook.</p>'; 
    258298    } 
     
    286326            <p>This plug-in will place the appropriate  <a href="http://ogp.me/" target="_blank">Open Graph</a> meta properties into the &lt;head&gt; of your web pages, so that when someone links to your page on Facebook (or any other service that utilises the Open Graph protocol) the correct thumbnail and other information will show.</p> 
    287327            <p>The thumbnail is derived from the featured image of your post (or page).</p> 
    288             <p>If your post does not have a featured image, then the default thumbnail will take over.</p> 
     328            <p>If your post does not have a featured image, then the <a href="<?php echo get_admin_url(); ?>/options-general.php#dfb">default thumbnail</a> will be used.</p> 
    289329            <p>If someone links to your home page (which traditionally doesn't have a featured image) then the default image is used.</p> 
    290330        </div> 
     
    305345            <p><strong>Note: </strong>If no selection is made for the homepage then the Object Type will be 'webpage'.</p> 
    306346        </div> 
    307  
    308         <p class="topic">How do I customise the description?</p> 
     347         
     348        <p class="topic">Where can I find my Facebook App ID</p> 
     349        <div class="help-answer"> 
     350            <p>If you have a Facebook App, you can get the App ID from <a href="https://developers.facebook.com/apps/" target="_blank">your developer dashboard</a>.</p> 
     351            <p>You can specify your Facebook App ID <a href="<?php echo get_admin_url(); ?>/options-general.php#fb_app_ID">here</a>.</p> 
     352        </div> 
     353 
     354        <p class="topic">How do I customise the text shown when a post is shared on Facebook?</p> 
    309355        <div class="help-answer"> 
    310356            <p>By default the description is derived from the content, but if you want to customise it then simply add content into the excerpt field.</p> 
    311357        </div> 
     358         
     359        <p class="topic">How do I customise the text shown when the homepage is shared on Facebook?</p> 
     360        <div class="help-answer"> 
     361            <p>When your homepage is shared on Facebook, the content from the <a href="<?php echo get_admin_url(); ?>/options-general.php">tagline</a> is used.</p> 
     362        </div> 
    312363 
    313364        <p class="topic">How can I test a post/page without sharing it on Facebook first?</p> 
    314365        <div class="help-answer"> 
    315             <p>Run the URL through the <a href='http://developers.facebook.com/tools/debug' target='_blank'>Facebook debugger</a> tool and examine the information that is returned.</p> 
    316         </div> 
    317  
    318         <p class="topic">What if you don't use Featured Images on your pages or posts?</p> 
     366            <p>Run the URL through the <a href='http://developers.facebook.com/tools/debug' target='_blank'>Facebook debugger</a> tool and examine the information that is returned. It's a good idea to hit the <strong>Scrape Again</strong> button to force Facebook to see the latest version of your page.</p> 
     367        </div> 
     368 
     369        <p class="topic">What if I don't use Featured Images?</p> 
    319370        <div class="help-answer"> 
    320371            <p>If you don't have featured images attached to your posts, then you can still use this plug-in just to show a default thumbnail on Facebook (as opposed to no thumbnail). This plug-in has been engineered so that if you don't use a featured image on posts then a default thumbnail is used instead. You can set a <strong>Default Facebook Thumb</strong> in the Wordpress<strong> Settings -&gt; General</strong> page <a href="<?php echo get_admin_url(); ?>options-general.php">here</a>.</p> 
     
    344395        </div> 
    345396 
    346         <p class="topic">Where can I get support and discuss this plug-in?</p> 
    347         <div class="help-answer"> 
    348             <p>There are two places to discuss this plug-in and reach out to me for support: <a href="http://www.thatwebguyblog.com/post/facebook-thumb-fixer-for-wordpress/" target="_blank">my blog</a> or on the <a href="https://wordpress.org/support/plugin/facebook-thumb-fixer">Wordpress plug-in page</a>.</p> 
     397        <p class="topic">Where can I get support?</p> 
     398        <div class="help-answer"> 
     399            <p>Reach for support at the <a href="https://wordpress.org/support/plugin/facebook-thumb-fixer">Wordpress plug-in repo</a>.</p> 
    349400        </div> 
    350401 
     
    373424                // Set '$featuredimg' variable for the featured image. 
    374425                $featuredimg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "Full"); 
    375                 $ftf_description = get_the_excerpt($post->ID); 
     426                $ftf_description = get_the_excerpt($post); 
    376427                global $post; 
    377428                $ot = get_post_meta($post->ID, 'ftf_open_type', true); 
     
    392443                } //...otherwise, if there is no post image. 
    393444                else { 
    394                 $ftf_description = get_the_excerpt($post->ID); 
     445                $ftf_description = get_the_excerpt($post); 
    395446                global $post; 
    396447                $ot = get_post_meta($post->ID, 'ftf_open_type', true); 
     
    442493            // Set '$featuredimg' variable for the featured image. 
    443494            $featuredimg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), "Full"); 
    444             $ftf_description = get_the_excerpt($post->ID); 
     495            $ftf_description = get_the_excerpt($post); 
    445496            global $post; 
    446497            $ot = get_post_meta($post->ID, 'ftf_open_type', true); 
     
    461512            } //...otherwise, if there is no post image. 
    462513            else { 
    463             $ftf_description = get_the_excerpt($post->ID); 
     514            $ftf_description = get_the_excerpt($post); 
    464515            global $post; 
    465516            $ot = get_post_meta($post->ID, 'ftf_open_type', true); 
     
    486537            if($ot == "") { $default = "website"; } else $default = get_option( 'homepage_object_type', ''); 
    487538            $ftf_head = ' 
    488             <!--/ Facebook Thumb Fixer Open Graph /--> 
    489             <meta property="og:type" content="' . $default . '" /> 
    490             <meta property="og:url" content="' . get_option('home') . '" /> 
    491             <meta property="og:title" content="' . wp_kses($ftf_name, array ()) . '" /> 
    492             <meta property="og:description" content="' . wp_kses_data($ftf_description, array ()) . '" /> 
    493             <meta property="og:site_name" content="' . wp_kses($ftf_name, array ()) . '" /> 
    494             <meta property="og:image" content="' . get_option('default_fb_thumb') . '" /> 
    495  
    496             <meta itemscope itemtype="'. $default . '" /> 
    497             <meta itemprop="description" content="' . wp_kses($ftf_description, array ()) . '" /> 
    498             <meta itemprop="image" content="' . get_option('default_fb_thumb') . '" /> 
     539                <!--/ Facebook Thumb Fixer Open Graph /--> 
     540                <meta property="og:type" content="' . $default . '" /> 
     541                <meta property="og:url" content="' . get_option('home') . '" /> 
     542                <meta property="og:title" content="' . wp_kses($ftf_name, array ()) . '" /> 
     543                <meta property="og:description" content="' . wp_kses_data($ftf_description, array ()) . '" /> 
     544                <meta property="og:site_name" content="' . wp_kses($ftf_name, array ()) . '" /> 
     545                <meta property="og:image" content="' . get_option('default_fb_thumb') . '" /> 
     546 
     547                <meta itemscope itemtype="'. $default . '" /> 
     548                <meta itemprop="description" content="' . wp_kses($ftf_description, array ()) . '" /> 
     549                <meta itemprop="image" content="' . get_option('default_fb_thumb') . '" /> 
    499550            '; 
    500551        } 
    501552    } 
     553         
    502554  echo $ftf_head; 
    503555  print "\n"; 
    504 } 
     556 $fbaid_value = get_option('fb_app_ID'); 
     557 if (!empty($fbaid_value)) { ?> 
     558                <meta property="fb:app_id" content="<?php echo get_option('fb_app_ID'); ?>" /> 
     559  <?php } 
     560  print "\n"; 
     561} 
  • facebook-thumb-fixer/trunk/css/ftf.css

    r1159389 r1469119  
    1 #dfb{position:relative}#dfb:before{content:"";display:block;position:absolute;left:192px;top:6px;width:20px;height:20px;background:url(../images/facebook.png);background-size:100% auto}#default_fb_thumb{width:50%}.no-fb-thumb,.no-object-type{border:dashed 1px #ff0000 !important}.ftf-tick{font-size:25px;color:#7ad03a}.ftf-preview{max-width:315px;margin:15px 0}.ftf-header{padding:25px 0 0 0;margin:25px 0 20px 0}.ftf-live-preview{display:none;width:470px;padding:18px;background:#fff;position:fixed;left:calc(50% - 235px);top:50%;transform:translateY(-50%);z-index:99999;box-shadow:0 0 30px rgba(0,0,0,0.4)}.ftf-live-preview.show-ftf-live-preview{display:block}.ftf-live-preview .wp-post-image{width:468px;height:auto;display:block}.ftf-live-preview .ftf-preview-details{padding:10px;border:solid 1px #e5e5e5}.ftf-live-preview .ftf-preview-details h1{font-weight:normal;font-size:18px;font-family:Georgia,'lucida grande',tahoma,verdana,arial,sans-serif;margin:0 0 10px 0;color:#000}.ftf-live-preview .ftf-preview-details p{font-size:12px;line-height:16px;font-family:helvetica,arial,'lucida grande',sans-serif;margin:0;color:#000}.ftf-live-preview .ftf-preview-details .ftf-domain{font-size:11px;line-height:11px;text-transform:uppercase;display:block;margin:10px 0 0 0;color:#9197a3}.ftf-live-preview .ftf-preview-details .overflow{width:468px;max-height:235px;overflow:hidden;margin:0 0 5px 0;border-bottom:solid 1px #e5e5e5;position:relative;top:-10px;left:-10px}.open-ftf-preview,.no-thumb-set{background:#3b5998;color:#fff;padding:5px 10px;text-decoration:none;border-radius:3px;text-align:center;cursor:pointer;display:inline-block}.open-ftf-preview:hover,.no-thumb-set:hover{color:#fff;background:#00a0d2}.ftf-warning strong{color:#ff0000}.no-thumb-set{background:#ccc}.ftf-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:#3b5998;opacity:0.7;z-index:9999;display:none}.ftf-mask.show-ftf-mask{display:block}.topic{padding:5px 0;margin:0;font-weight:bold;cursor:pointer}.open-help{color:#d54e21}.help-answer{border-bottom:dashed 1px #ccc;padding:0 0 20px 25px;margin:0 0 20px 0}.help-answer h4{color:#0074a2}.task-rocket{position:fixed;bottom:0;right:-5px;width:250px;padding:10px 20px 180px 20px;background:#135571 url(../images/tr-promo-background.png) no-repeat bottom;box-shadow:rgba(0,0,0,0.0980392) 0px 1px 1px 0px;margin:55px 25px 0 0;z-index:9}.task-rocket h3{color:#fff;text-align:center;text-transform:uppercase}.task-rocket a{display:block;width:195px;margin:10px auto 0 auto;font-weight:bold;text-transform:uppercase;color:#fff;background:#fab13f;border-bottom:solid 3px #e89b22;padding:14px 0;text-decoration:none;text-align:center;border-radius:3px}.ftf-wrap{margin:0 340px 0 0 !important}.ftf-good{border-left:solid 4px #7ad03a;padding:8px;background:#fff;border-radius:2px;box-shadow:rgba(0,0,0,0.0980392) 0px 1px 1px 0px}.ftf-bad{border-left:solid 4px #ff0000;padding:8px;background:#fff;border-radius:2px;box-shadow:rgba(0,0,0,0.0980392) 0px 1px 1px 0px} 
     1#dfb { 
     2  position: relative; 
     3} 
     4 
     5#default_fb_thumb { 
     6  width: 50%; 
     7} 
     8 
     9.no-fb-thumb, 
     10.no-object-type { 
     11  border-bottom: solid 2px #e34c6b !important; 
     12} 
     13 
     14.ftf-tick { 
     15  font-size: 25px; 
     16  color: #7ad03a; 
     17} 
     18 
     19.ftf-preview { 
     20  width: 315px !important; 
     21  height: auto !important; 
     22  margin: 15px 0; 
     23  display: block; 
     24} 
     25 
     26.ftf-header { 
     27  padding: 25px 0 0 0; 
     28  margin: 25px 0 20px 0; 
     29} 
     30 
     31#toplevel_page_facebook-thumb-fixer img { 
     32  width: 16px; 
     33  height: 16px; 
     34} 
     35 
     36.ftf-live-preview, 
     37.ftf-live-home-preview { 
     38  display: none; 
     39  width: 470px; 
     40  padding: 18px; 
     41  background: #fff; 
     42  position: fixed; 
     43  left: calc(50% - 235px); 
     44  top: 50%; 
     45  -webkit-transform: translateY(-50%); 
     46      -ms-transform: translateY(-50%); 
     47          transform: translateY(-50%); 
     48  z-index: 9999999; 
     49  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
     50} 
     51 
     52.ftf-live-preview.show-ftf-live-preview, 
     53.ftf-live-home-preview.show-ftf-live-preview { 
     54  display: block; 
     55} 
     56 
     57.ftf-live-preview .wp-post-image, 
     58.ftf-live-home-preview .wp-post-image { 
     59  width: 468px; 
     60  height: auto; 
     61  display: block; 
     62} 
     63 
     64.ftf-live-preview .ftf-preview-details, 
     65.ftf-live-home-preview .ftf-preview-details { 
     66  padding: 10px; 
     67  border: solid 1px #e5e5e5; 
     68} 
     69 
     70.ftf-live-preview .ftf-preview-details h1, 
     71.ftf-live-home-preview .ftf-preview-details h1 { 
     72  font-weight: normal; 
     73  font-size: 18px; 
     74  font-family: Georgia, 'lucida grande',tahoma,verdana,arial,sans-serif; 
     75  margin: 0 0 10px 0; 
     76  color: #000; 
     77  padding: 0; 
     78} 
     79 
     80.ftf-live-preview .ftf-preview-details p, 
     81.ftf-live-home-preview .ftf-preview-details p { 
     82  font-size: 12px; 
     83  line-height: 16px; 
     84  font-family: helvetica, arial, 'lucida grande', sans-serif; 
     85  margin: 0; 
     86  color: #000; 
     87} 
     88 
     89.ftf-live-preview .ftf-preview-details .ftf-domain, 
     90.ftf-live-home-preview .ftf-preview-details .ftf-domain { 
     91  font-size: 11px; 
     92  line-height: 11px; 
     93  text-transform: uppercase; 
     94  display: block; 
     95  margin: 10px 0 0 0; 
     96  color: #9197a3; 
     97} 
     98 
     99.ftf-live-preview .ftf-preview-details .overflow, 
     100.ftf-live-home-preview .ftf-preview-details .overflow { 
     101  width: 468px; 
     102  max-height: 235px; 
     103  overflow: hidden; 
     104  margin: 0 0 5px 0; 
     105  border-bottom: solid 1px #e5e5e5; 
     106  position: relative; 
     107  top: -10px; 
     108  left: -10px; 
     109} 
     110 
     111.ftf-live-home-preview { 
     112  display: block; 
     113  position: relative; 
     114  top: auto; 
     115  left: auto; 
     116  -webkit-transform: translateY(0); 
     117      -ms-transform: translateY(0); 
     118          transform: translateY(0); 
     119  z-index: 2; 
     120  box-shadow: none; 
     121  margin: 25px 0; 
     122} 
     123 
     124.ftf-live-home-preview .edit { 
     125  display: none; 
     126  line-height: 1em; 
     127} 
     128 
     129.ftf-live-home-preview:hover .edit { 
     130  display: inline-block; 
     131  position: relative; 
     132} 
     133 
     134.ftf-live-home-preview .thickbox img { 
     135  width: calc(100% + 20px); 
     136  padding: 0; 
     137  margin: 0; 
     138  position: relative; 
     139  top: -10px; 
     140  left: -10px; 
     141  display: block; 
     142} 
     143 
     144.ftf-live-home-preview h1 a { 
     145  font-size: .65em; 
     146  font-family: sans-serif; 
     147} 
     148 
     149.open-ftf-preview, 
     150.no-thumb-set, 
     151.debugger-button { 
     152  background: #3b5998; 
     153  color: #fff; 
     154  padding: 5px 10px; 
     155  text-decoration: none; 
     156  border-radius: 3px; 
     157  text-align: center; 
     158  cursor: pointer; 
     159  display: inline-block; 
     160} 
     161 
     162.open-ftf-preview:hover, 
     163.no-thumb-set:hover, 
     164.debugger-button:hover { 
     165  color: #fff; 
     166  background: #00a0d2; 
     167} 
     168 
     169.open-ftf-preview:active, 
     170.no-thumb-set:active, 
     171.debugger-button:active { 
     172  color: #fff; 
     173} 
     174 
     175.open-ftf-preview::-moz-selection, 
     176.no-thumb-set::-moz-selection, 
     177.debugger-button::-moz-selection { 
     178  color: #fff; 
     179} 
     180 
     181.open-ftf-preview::selection, 
     182.no-thumb-set::selection, 
     183.debugger-button::selection { 
     184  color: #fff; 
     185} 
     186 
     187.debugger-button { 
     188  width: 67px; 
     189  background: #ce3895; 
     190  box-sizing: border-box; 
     191} 
     192 
     193.debugger-button:hover { 
     194  background: #f058b6; 
     195} 
     196 
     197.ftf-rule { 
     198  margin: 15px 0; 
     199  height: 1px; 
     200  border-top: dashed 1px #ccc; 
     201} 
     202 
     203.ftf-warning strong { 
     204  color: #ff0000; 
     205} 
     206 
     207.no-thumb-set { 
     208  background: #ccc; 
     209} 
     210 
     211.ftf-mask { 
     212  position: fixed; 
     213  top: 0; 
     214  left: 0; 
     215  width: 100%; 
     216  height: 100%; 
     217  background: #3b5998; 
     218  opacity: .7; 
     219  z-index: 999999 !important; 
     220  display: none; 
     221} 
     222 
     223.ftf-mask.show-ftf-mask { 
     224  display: block; 
     225} 
     226 
     227.ftf-help { 
     228  margin: 0 340px 0 0; 
     229} 
     230 
     231.topic { 
     232  padding: 5px 0; 
     233  margin: 0; 
     234  font-weight: bold; 
     235  cursor: pointer; 
     236} 
     237 
     238.open-help { 
     239  color: #0074a2; 
     240} 
     241 
     242.help-answer { 
     243  border-bottom: dashed 1px #ccc; 
     244  padding: 0 0 20px 25px; 
     245  margin: 0 0 20px 0; 
     246} 
     247 
     248.help-answer h4 { 
     249  color: #0074a2; 
     250} 
     251 
     252.task-rocket { 
     253  position: fixed; 
     254  bottom: 0; 
     255  right: -5px; 
     256  width: 300px; 
     257  padding: 35px 20px 35px 20px; 
     258  background: #f09950; 
     259  /* Old browsers */ 
     260  /* FF3.6-15 */ 
     261  /* Chrome10-25,Safari5.1-6 */ 
     262  background: linear-gradient(to bottom, #f09950 0%, #1d005c 100%); 
     263  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
     264  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09950', endColorstr='#1d005c',GradientType=0 ); 
     265  /* IE6-9 */ 
     266  box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px 0px; 
     267  margin: 55px 25px 0 0; 
     268  z-index: 9; 
     269  box-sizing: border-box; 
     270} 
     271 
     272.task-rocket:after { 
     273  content: ""; 
     274  display: block; 
     275  width: 260px; 
     276  height: 152px; 
     277  background: url(../images/tr-promo-background.png) no-repeat bottom; 
     278  background-size: 100%; 
     279} 
     280 
     281.task-rocket h3 { 
     282  color: #fff; 
     283  text-align: center; 
     284  text-transform: uppercase; 
     285  font-size: 2em; 
     286  margin: 0; 
     287} 
     288 
     289.task-rocket p { 
     290  margin: 25px 0; 
     291} 
     292 
     293.task-rocket a { 
     294  display: block; 
     295  width: 195px; 
     296  margin: 10px auto 0 auto; 
     297  font-weight: bold; 
     298  text-transform: uppercase; 
     299  color: #fff; 
     300  background: #fab13f; 
     301  border-bottom: solid 3px #e89b22; 
     302  padding: 14px 0; 
     303  text-decoration: none; 
     304  text-align: center; 
     305  border-radius: 3px; 
     306} 
     307 
     308.ftf-good { 
     309  background: #2CBB5F; 
     310  color: #fff; 
     311  padding: 15px; 
     312} 
     313 
     314.ftf-good a { 
     315  color: #fff; 
     316} 
     317 
     318.ftf-bad { 
     319  background: #e34c6b; 
     320  color: #fff; 
     321  padding: 15px; 
     322} 
     323 
     324.ftf-bad a { 
     325  color: #fff; 
     326} 
  • facebook-thumb-fixer/trunk/css/ftf.scss

    r1159389 r1469119  
    22 
    33#dfb { 
    4  
    54    position:relative; 
    6  
    7     &:before { 
    8         content:""; 
    9         display:block; 
    10         position:absolute; 
    11         left:192px; 
    12         top:6px; 
    13         width:20px; 
    14         height:20px; 
    15         background:url(../images/facebook.png); 
    16         background-size:100% auto; 
    17     } 
    185} 
    196 
     
    2411.no-fb-thumb, 
    2512.no-object-type { 
    26     border:dashed 1px #ff0000 !important; 
     13    border-bottom: solid 2px #e34c6b !important; 
    2714} 
    2815 
     
    3320 
    3421.ftf-preview { 
    35     max-width:315px; 
     22    width: 315px !important; 
     23    height: auto !important; 
    3624    margin:15px 0; 
     25    display: block; 
    3726} 
    3827 
     
    4231} 
    4332 
    44  
    45 .ftf-live-preview { 
     33#toplevel_page_facebook-thumb-fixer { 
     34    img { 
     35        width: 16px; 
     36        height: 16px; 
     37    } 
     38} 
     39 
     40.ftf-live-preview, 
     41.ftf-live-home-preview { 
    4642    display: none; 
    4743    width: 470px; 
     
    5248    top: 50%; 
    5349    transform: translateY(-50%); 
    54     z-index: 99999; 
     50    z-index: 9999999; 
    5551    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); 
    5652 
     
    7571            margin: 0 0 10px 0; 
    7672            color: #000; 
     73            padding: 0; 
    7774        } 
    7875 
     
    110107} 
    111108 
     109.ftf-live-home-preview { 
     110    display: block; 
     111    position: relative; 
     112    top: auto; 
     113    left: auto; 
     114    transform: translateY(0); 
     115    z-index: 2; 
     116    box-shadow: none; 
     117    margin: 25px 0; 
     118     
     119    .edit { 
     120        display: none; 
     121        line-height: 1em; 
     122    } 
     123     
     124    &:hover { 
     125        .edit { 
     126            display: inline-block; 
     127            position: relative; 
     128        } 
     129    } 
     130     
     131    .thickbox img { 
     132        width: calc(100% + 20px); 
     133        padding: 0; 
     134        margin: 0; 
     135        position: relative; 
     136        top: -10px; 
     137        left: -10px; 
     138        display: block; 
     139    } 
     140     
     141    h1 a { 
     142        font-size: .65em; 
     143        font-family: sans-serif; 
     144    } 
     145} 
     146 
    112147.open-ftf-preview, 
    113 .no-thumb-set { 
     148.no-thumb-set, 
     149.debugger-button { 
    114150    background: #3b5998; 
    115151    color:#fff; 
     
    125161        background: #00a0d2; 
    126162    } 
     163     
     164    &:active { 
     165        color: #fff; 
     166    } 
     167     
     168    &::selection { 
     169        color: #fff; 
     170    } 
     171} 
     172 
     173.debugger-button { 
     174    width: 67px; 
     175    background: #ce3895; 
     176    box-sizing: border-box; 
     177     
     178    &:hover { 
     179        background: #f058b6; 
     180    } 
     181} 
     182 
     183.ftf-rule { 
     184    margin: 15px 0; 
     185    height: 1px; 
     186    border-top: dashed 1px #ccc; 
    127187} 
    128188 
     
    145205    background: #3b5998; 
    146206    opacity: .7; 
    147     z-index: 9999; 
     207    z-index: 999999 !important; 
    148208    display: none; 
    149209 
     
    151211        display: block; 
    152212    } 
     213} 
     214 
     215.ftf-help { 
     216    margin: 0 340px 0 0; 
    153217} 
    154218 
     
    161225 
    162226.open-help { 
    163     color:#d54e21; 
     227    color:#0074a2; 
    164228} 
    165229 
     
    178242    bottom:0; 
    179243    right:-5px; 
    180     width:250px; 
    181     padding:10px 20px 180px 20px; 
    182     background:#135571 url(../images/tr-promo-background.png) no-repeat bottom; 
     244    width: 300px; 
     245    padding: 35px 20px 35px 20px; 
     246    background: #f09950; /* Old browsers */ 
     247    background: -moz-linear-gradient(top,  #f09950 0%, #1d005c 100%); /* FF3.6-15 */ 
     248    background: -webkit-linear-gradient(top,  #f09950 0%,#1d005c 100%); /* Chrome10-25,Safari5.1-6 */ 
     249    background: linear-gradient(to bottom,  #f09950 0%,#1d005c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
     250    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09950', endColorstr='#1d005c',GradientType=0 ); /* IE6-9 */ 
    183251    box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px 0px; 
    184     margin:55px 25px 0 0; 
     252    margin: 55px 25px 0 0; 
    185253    z-index: 9; 
     254    box-sizing: border-box; 
     255     
     256    &:after { 
     257        content: ""; 
     258        display: block; 
     259        width: 260px; 
     260        height: 152px; 
     261        background: url(../images/tr-promo-background.png) no-repeat bottom; 
     262        background-size: 100%; 
     263    } 
    186264 
    187265    h3 { 
     
    189267        text-align:center; 
    190268        text-transform:uppercase; 
     269        font-size: 2em; 
     270        margin: 0; 
     271    } 
     272     
     273    p { 
     274        margin: 25px 0; 
    191275    } 
    192276 
     
    208292 
    209293.ftf-wrap { 
    210     margin:0 340px 0 0 !important; 
    211294} 
    212295 
    213296.ftf-good { 
    214     border-left:solid 4px #7ad03a; 
    215     padding:8px; 
    216     background:#fff; 
    217     border-radius:2px; 
    218     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px 0px; 
     297    background: #2CBB5F; 
     298    color: #fff; 
     299    padding: 15px; 
     300     
     301    a { 
     302        color: #fff; 
     303    } 
    219304} 
    220305 
    221306.ftf-bad { 
    222     border-left:solid 4px #ff0000; 
    223     padding:8px; background:#fff; 
    224     border-radius:2px; 
    225     box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 1px 0px; 
    226 } 
     307    background: #e34c6b; 
     308    color: #fff; 
     309    padding: 15px; 
     310     
     311    a { 
     312        color: #fff; 
     313    } 
     314} 
  • facebook-thumb-fixer/trunk/inc-preview.php

    r1211261 r1469119  
    55$image_height = $image_data[2]; 
    66?> 
     7    <hr class="ftf-rule" /> 
    78    <a class="open-ftf-preview">Preview</a> 
    8     <p>This is an approximate preview of how your post should appear on Facebook. If in doubt, try troubleshooting with the <a href="https://developers.facebook.com/tools/debug" target="_blank">Facebook Debugger</a>.</p> 
    9  
     9    <p>This is an approximate preview of your post when shared on Facebook.</p> 
     10    <hr class="ftf-rule" /> 
     11    <p><a href="https://developers.facebook.com/tools/debug/sharing/?q=<?php echo get_the_permalink(); ?>" target="_blank" class="debugger-button">Debug</a></p> 
     12    <p>If in doubt, try forcing Facebook to fetch your page with their debugging tool.</p> 
     13     
    1014    <?php if ($image_width < 600 || $image_height < 315) { ?> 
    1115        <p class="ftf-warning"><strong>WARNING:</strong> Your featured image dimensions are <?php echo $image_width . " x " . $image_height; ?> which is smaller than the minimum 600 x 315 <a href="https://developers.facebook.com/docs/sharing/best-practices#images" target="_blank">recommended</a> by Facebook.</p> 
     
    3236                if ( has_excerpt( $post->ID ) ) { 
    3337                    $excerpt = get_the_excerpt(); 
    34                     $excerpt_chars = substr($excerpt, 0, 400); 
     38                    $excerpt_chars = substr($excerpt, 0, 150); 
    3539                    echo strip_tags($excerpt_chars); 
    3640                } else { 
    3741                    $post = get_post($post->ID); 
    3842                    $content = apply_filters('the_content', $post->post_content); 
    39                     $content_chars = substr($content, 0, 400); 
     43                    $content_chars = substr($content, 0, 150); 
    4044                    echo strip_tags($content_chars); 
    4145                } 
  • facebook-thumb-fixer/trunk/readme.txt

    r1211261 r1469119  
    33Tags: facebook, thumb, fixer, default, thumbnail, thumbnails, thumbs, og:image, og:description, og:title, open, graph, open graph 
    44Requires at least: 4.0 
    5 Tested up to: 4.2.3 
     5Tested up to: 4.5.3 
    66Stable tag: trunk 
    77 
     
    1515 
    1616The plug-in inserts the open graph meta properties, which Facebook and other social services look for when someone shares your page. These properties contain information about the page and of course the image you specify. 
    17  
    18 <strong>NEW!</strong> View a preview of how your page will look when shared on Facebook. 
    1917 
    2018== Installation == 
     
    3634Go to Settings -> General and scroll down until you find 'Default Facebook Thumb'. Put the path to your fall-back image there. Make sure it's at least 1200x630 or 600x315. 
    3735 
     36== How to set a Facebook App ID == 
     37 
     38If you have a Facebook App, you can get the App ID from <a href="https://developers.facebook.com/apps/" target="_blank">your developer dashboard</a>. 
     39 
     40Specify your Facebook App ID Settings -> General. 
     41 
    3842== How to set an object type == 
    3943 
     
    5155 
    5256== Changelog == 
     57 
     58= 1.6 = 
     59 
     60Added Facebook App ID field. 
     61Added a convenient FB Debug button for easier troubleshooting. 
     62Preview of homepage for when shared on Facebook. 
     63Fixed some errors. 
     64Updated help topics. 
    5365 
    5466= 1.5.1 = 
Note: See TracChangeset for help on using the changeset viewer.