Support » Plugin: Crafty Social Buttons » social button on tabbed content

Viewing 15 replies - 1 through 15 (of 34 total)
  • Plugin Author Sarah

    (@shen045)

    The plugin is really designed to share the URL of the page as WordPress sees it, so it might be a little tricky in this case, as it looks like all the tab changes are only on the client.

    You could quite easily manage it with a little JavaScript added to your theme which would detect whenever the tab changes and add the tab information to the URL in each of the sharing buttons. The sharing button set has several ids and classes attached which should make it easy to target them and update the url.

    You wouldn’t need to modify the plugin to do this.

    Cheers,
    Sarah

    hi
    thanks for response. So please let know the JavaScript implementation. to proceed.
    best regards
    rubel

    Plugin Author Sarah

    (@shen045)

    Most of the details will depend on the tab framework you are using.

    There are two elements:
    1. Your tab framework needs to display the correct tab depending on the URL.
    2. Whenever the tab changes, you need to update the crafty social button links with the new tab information

    You can target the links with $('a.crafty-social-button') and then loop through each and update the href with the new tab information. the details of exactly what you need to change depend on how the tab information is encoded in the urls.

    Good luck,
    Sarah

    hi
    Thanks for reply think getting complex for me as i am newbie to implement the code in proper pace. As those tab actually create by table each table represents 1 a short code and this short paste in to a page. i am in junction to understand. i think what i understand-
    1) In each tab i have to implement the upper crafty code when crafty button get press that tabbed information will shows in exactly in sharing box.
    If i not misunderstand you…
    thanks…rubel

    Plugin Author Sarah

    (@shen045)

    Are you able to modify the code that is generating the tabs?

    You can test this out on a local development site. Find the template for displaying the tabs and find where within the tab you want the buttons to go. At that point, add this line of code:
    <?php echo "SHARING BUTTONS GO HERE"; ?>

    If that works, and you can see the words ‘SHARING BUTTONS GO HERE’ in your tabs, then you can replace it with this:
    <?php do_action('crafty-social-share-buttons'); ?>

    That should make the buttons show up in your tabs.

    hi
    thanks for response. i have massive table and buttons uploaded in my site approx 2400 table uploaded and 3000 button generated for article to read. if i not misunderstand you you stats- to modify tab plugin editor.
    i am concerning about pluin`<?php
    /*
    Plugin Name: Squelch Tabs and Accordions Shortcodes
    Plugin URI: http://squelchdesign.com/wordpress-plugin-squelch-tabs-accordions-shortcodes/
    Description: Provides shortcodes for adding tabs and accordions to your website
    Version: 0.3.5
    Author: Matt Lowe
    Author URI: http://squelchdesign.com/matt-lowe
    License: GPL2
    */

    /* Copyright 2013 Matt Lowe / Squelch Design (http://squelch.it/ … email: hi@squelchdesign.com)

    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License, version 2, as
    published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA

    */

    $taas_plugin_ver = ‘0.3.5’;

    $taas_title_counter = 0;
    $taas_accordion_counter = 0;
    $taas_accordion_content_counter = 0;
    $taas_haccordion_counter = 0;
    $taas_haccordion_content_counter = 0;
    $taas_tab_counter = -1;
    $taas_tab_content_counter = 0;
    $taas_current_tab_group = 0;
    $taas_tabs = array();
    $taas_toggle_counter = 0;
    $taas_toggle_content_counter = 0;

    /* =Activation
    —————————————————————————- */

    /**
    * On activation of the plugin generate random names for the extra fields.
    */
    function squelch_taas_activate() {
    global $taas_plugin_ver;

    if (get_option( ‘squelch_taas_v’ ) != $taas_plugin_ver) {
    // Upgrade, ensure the appropriate defaults are set
    squelch_taas_set_defaults();
    update_option(‘squelch_taas_v’, $taas_plugin_ver);
    }
    }
    //register_activation_hook( __FILE__, ‘squelch_taas_activate’ );
    add_action( ‘plugins_loaded’, ‘squelch_taas_activate’ );

    /**
    * Set defaults
    */
    function squelch_taas_set_defaults() {
    // Show welcme message
    update_option( ‘squelch_taas_showmessage’, 1 );

    // Default options
    set_default_option( ‘squelch_taas_jquery_ui_theme’, ‘smoothness’ );
    }

    /**
    * Displays the welcome message.
    */
    function squelch_taas_welcome_message() {
    // Message hiding/showing etc
    if ( get_option( ‘squelch_taas_showmessage’ ) > 0 ) {
    update_option( ‘squelch_taas_showmessage’, 0 );
    $url = squelch_taas_get_plugin_admin_url();

    // Output a welcome message
    ?>
    <div class=”notice notice-success is-dismissible message”>
    <p>
    <strong>
    Thank you for installing
    <em>
    Squelch Tabs and Accordions Shortcodes
    </em>
    for WordPress.
    Your WordPress website is now ready to start showing awesome tabs and accordions!
    </strong>
    </p>
    <p>
    To get started please go to the
    <a href=”<?php echo $url; ?>”>settings</a> page.
    </p>
    </div>
    <?php
    }

    if (function_exists( ‘thethe_fix’ )) {
    ?>
    <div class=”error”>
    <p>
    Squelch Tabs and Accordions Shortcodes has detected that you are using a fix for
    TheThe Fly’s Accordions and Tabs plugin that was made available by Squelch some time ago.
    The fix in question is NOT intended as a long-term solution and should be removed as soon
    as possible. By using Squelch Tabs and Accordions you do NOT need the fix. Please see
    <a href=”http://squelchdesign.com/web_design_newbury/you-are-using-a-fix-for-thethe-fly-accordions-tabs-plugin/”>this article</a>
    for instructions on how to remove the fix from your
    website.
    </p>
    <p>
    This message will disappear automatically once you have removed the old fix.
    </p>
    </div>
    <?php
    }
    }
    add_action( ‘admin_notices’, ‘squelch_taas_welcome_message’ );

    /* =Shortcodes
    —————————————————————————- */

    /**
    * [accordions] shortcode
    *
    * Attributes:
    * title The title shown above the accordion
    * disabled Disables or enables the accordion
    * active Index of the active pane. Set to false to collapse all
    * autoheight Makes all panes the same height, based on the longest pane
    * collapsible Whether all panes can be closed at once
    * animated Not yet supported: Will allow choosing of animation
    * clearstyle Not yet supported: Will clear height/overflow after animation
    * event Not yet supported: Will allow selecting of event that fires opening, click or mouseover
    * fillspace Not yet supported: If true, accordion will occupy full height of its parent element
    */
    function squelch_taas_accordions_shortcode( $atts, $content ) {
    global $taas_title_counter, $taas_accordion_counter;

    $defaults = array(
    ‘title’ => ”,
    ‘disabled’ => false,
    ‘active’ => false,
    ‘autoheight’ => false,
    ‘collapsible’ => true
    );

    $atts = wp_parse_args( $atts, $defaults );

    $content = do_shortcode( shortcode_unautop( tidy_up_shortcodes( $content ) ) );
    $rv = ”;

    if (!empty($atts[‘title’])) {
    $id = “squelch-taas-title-$taas_title_counter”;
    $class = “squelch-taas-group-title”;

    $rv .= ‘<h2 id=”‘.$id.'” class=”‘.$class.'”>’.$atts[‘title’].'</h2>’;

    $taas_title_counter++;
    }

    $data = ”;
    $data .= ‘data-active=”‘.$atts[‘active’].'” ‘;
    $data .= ‘data-disabled=”‘. ( $atts[‘disabled’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-autoheight=”‘. ( $atts[‘autoheight’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-collapsible=”‘. ( $atts[‘collapsible’] == “true” ? ‘true’ : ‘false’ ).'”‘;

    $id = “squelch-taas-accordion-$taas_accordion_counter”;
    $class = ‘squelch-taas-accordion squelch-taas-override’;

    $rv .= ‘<div id=”‘.$id.'” class=”‘.$class.'” ‘.$data.’>’;
    $rv .= $content;
    $rv .= ‘</div>’;
    $rv .= “\n”;

    $taas_accordion_counter ++;

    return $rv;
    }
    add_shortcode( ‘accordions’, ‘squelch_taas_accordions_shortcode’ );
    add_shortcode( ‘subaccordions’, ‘squelch_taas_accordions_shortcode’ );
    add_shortcode( ‘subsubaccordions’, ‘squelch_taas_accordions_shortcode’ );

    /**
    * [accordion] shortcode
    *
    * Attributes:
    * title The title shown in the heading of this pane
    */
    function squelch_taas_accordion_shortcode( $atts, $content ) {
    global $taas_accordion_content_counter;

    $defaults = array(
    ‘title’ => ‘       ‘
    );
    $atts = wp_parse_args( $atts, $defaults );

    $content = do_shortcode( shortcode_unautop( $content ) );
    $rv = ”;

    $id = “squelch-taas-header-$taas_accordion_content_counter”;

    $rv .= ‘<h3 id=”‘.$id.'”>’;
    $rv .= ‘<a href=”#squelch-taas-accordion-shortcode-content-‘.$taas_accordion_content_counter.'”>’;
    $rv .= $atts[‘title’];
    $rv .= ‘</a>’;
    $rv .= ‘</h3>’;

    $rv .= ‘<div class=”squelch-taas-accordion-shortcode-content-‘.$taas_accordion_content_counter.'”>’;
    $rv .= $content;
    $rv .= ‘</div>’;

    $taas_accordion_content_counter++;

    return $rv;
    }
    add_shortcode( ‘accordion’, ‘squelch_taas_accordion_shortcode’ );
    add_shortcode( ‘subaccordion’, ‘squelch_taas_accordion_shortcode’ );
    add_shortcode( ‘subsubaccordion’, ‘squelch_taas_accordion_shortcode’ );

    /**
    * [haccordions] shortcode
    *
    * Attributes:
    * title The title shown above the haccordion
    * width Width of the haccordion in px
    * height Height of the haccordion in px
    * hwidth Width of each header (vertical bars) in px
    * activateon “click” or “mouseover”: Which user input triggers opening of slides
    * active Index of the header that should be active on page load
    * speed Duration of animation in ms
    * autoplay Set to true to automatically scroll through slides
    * pauseonhover If true the autoplay will be paused when the mouse is in the haccordion
    * cyclespeed Time between opening each slide (when autoplay is true)
    * theme jqueryui (default), basic, dark, light or stitch
    * rounded Set to true to round the corners of the haccordion
    * enumerate If true the slide number will be shown in each slide
    * disabled Not yet supported: If true the haccordion will be disabled
    */
    function squelch_taas_haccordions_shortcode( $atts, $content ) {
    global $taas_title_counter, $taas_haccordion_counter, $taas_haccordion_content_counter;

    $defaults = array(
    ‘title’ => ”,
    ‘width’ => 960,
    ‘height’ => 320,
    ‘hwidth’ => 48,
    ‘activateon’ => ‘click’,
    ‘active’ => 0,
    ‘speed’ => 800,
    ‘autoplay’ => false,
    ‘pauseonhover’ => true,
    ‘cyclespeed’ => 6000,
    ‘theme’ => ‘jqueryui’,
    ’rounded’ => false,
    ‘enumerate’ => false,
    ‘disabled’ => false
    );

    // jQuery-UI theme needs to default to a narrower header width
    if (empty($atts[‘theme’]) || $atts[‘theme’] == ‘jqueryui’) {
    $defaults[‘hwidth’] = 28;
    }

    $atts = wp_parse_args( $atts, $defaults );
    $atts[‘active’] = $atts[‘active’] + 1;

    $content = do_shortcode( shortcode_unautop( tidy_up_shortcodes( $content ) ) );
    $rv = ”;

    if (!empty($atts[‘title’])) {
    $id = “squelch-taas-title-$taas_title_counter”;
    $class = “squelch-taas-group-title”;

    $rv .= ‘<h2 id=”‘.$id.'” class=”‘.$class.'”>’.$atts[‘title’].'</h2>’;

    $taas_title_counter++;
    }

    $data = ”;

    $data .= ‘data-width=”‘ .$atts[‘width’] .'” ‘;
    $data .= ‘data-height=”‘ .$atts[‘height’] .'” ‘;
    $data .= ‘data-h-width=”‘ .$atts[‘hwidth’] .'” ‘;
    $data .= ‘data-activate-on=”‘ .$atts[‘activateon’] .'” ‘;
    $data .= ‘data-active=”‘ .$atts[‘active’] .'” ‘;
    $data .= ‘data-speed=”‘ .$atts[‘speed’] .'” ‘;
    $data .= ‘data-autoplay=”‘ .($atts[‘autoplay’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-pauseonhover=”‘ .($atts[‘pauseonhover’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-cyclespeed=”‘ .$atts[‘cyclespeed’] .'” ‘;
    $data .= ‘data-theme=”‘ .$atts[‘theme’] .'” ‘;
    $data .= ‘data-rounded=”‘ .($atts[’rounded’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-enumerate=”‘ .($atts[‘enumerate’] == “true” ? ‘true’ : ‘false’ ).'”‘;

    // TODO? Or remove?
    // $data .= ‘data-disabled=”‘.($atts[‘disabled’] == “true” ? ‘true’ : ‘false’ ).'” ‘;

    $id = “squelch-taas-haccordion-$taas_haccordion_counter”;
    $class = ‘squelch-taas-haccordion squelch-taas-override’;

    $rv .= ‘<div id=”‘.$id.'” class=”‘.$class.'” ‘.$data.’>’;
    $rv .= ‘<ol>’;
    $rv .= $content;
    $rv .= ‘</ol>’;
    $rv .= ‘</div>’;
    $rv .= “\n”;

    $taas_haccordion_counter ++;

    return $rv;
    }
    add_shortcode( ‘haccordions’, ‘squelch_taas_haccordions_shortcode’ );
    add_shortcode( ‘subhaccordions’, ‘squelch_taas_haccordions_shortcode’ );
    add_shortcode( ‘subsubhaccordions’, ‘squelch_taas_haccordions_shortcode’ );

    /**
    * [haccordion] shortcode
    *
    * Attributes:
    * title The title shown above the haccordion
    */
    function squelch_taas_haccordion_shortcode( $atts, $content ) {
    global $taas_haccordion_content_counter;

    $defaults = array(
    ‘title’ => ‘       ‘
    );
    $atts = wp_parse_args( $atts, $defaults );

    $content = do_shortcode( shortcode_unautop( $content ) );
    $rv = ”;

    $id = “squelch-taas-header-$taas_haccordion_content_counter”;

    $rv .= ‘<li>’;
    $rv .= ‘<h3 id=”‘.$id.'”>’;
    $rv .= ‘<span>’;
    $rv .= $atts[‘title’];
    $rv .= ‘</span>’;
    $rv .= ‘</h3>’;

    $rv .= ‘<div>’;
    $rv .= ‘<div class=”squelch-taas-haccordion-content”>’;
    $rv .= $content;
    $rv .= ‘</div>’;
    $rv .= ‘</div>’;
    $rv .= ‘</li>’;

    $taas_haccordion_content_counter++;

    return $rv;
    }
    add_shortcode( ‘haccordion’, ‘squelch_taas_haccordion_shortcode’ );
    add_shortcode( ‘subhaccordion’, ‘squelch_taas_haccordion_shortcode’ );
    add_shortcode( ‘subsubhaccordion’, ‘squelch_taas_haccordion_shortcode’ );

    /**
    * [tabs] shortcode
    *
    * Attributes:
    * title The title shown above the tab group
    * disabled If true the tabs will be disabled
    * collapsible If true, clicking the active tab will collapse the content into the tab bar similar to an accordion
    * active Index of the tab that should be selected on page load
    * event What event should trigger the tab: mouseover or click
    */
    function squelch_taas_tabs_shortcode( $atts, $content ) {
    global $taas_title_counter, $taas_tabs, $taas_tab_counter, $taas_current_tab_group;

    $taas_tab_counter ++;

    // Save current tab group and restore it at the end of the function
    $_ctg = $taas_current_tab_group;
    $taas_current_tab_group = $taas_tab_counter;

    $defaults = array(
    ‘title’ => ”,
    ‘disabled’ => false,
    ‘collapsible’ => false,
    ‘active’ => 0,
    ‘event’ => ‘click’
    );

    $atts = wp_parse_args( $atts, $defaults );

    $content = do_shortcode( shortcode_unautop( tidy_up_shortcodes( $content ) ) );
    $rv = ”;

    if (!empty($atts[‘title’])) {
    $id = “squelch-taas-title-$taas_title_counter”;
    $class = “squelch-taas-group-title”;

    $rv .= ‘<h2 id=”‘.$id.'” class=”‘.$class.'”>’.$atts[‘title’].'</h2>’;

    $taas_title_counter++;
    }

    $data = ”;

    $data .= ‘data-title=”‘ .$atts[‘title’] .'” ‘;
    $data .= ‘data-disabled=”‘ .($atts[‘disabled’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-collapsible=”‘ .($atts[‘collapsible’] == “true” ? ‘true’ : ‘false’ ).'” ‘;
    $data .= ‘data-active=”‘ .$atts[‘active’] .'” ‘;
    $data .= ‘data-event=”‘ .$atts[‘event’] .'”‘;

    $id = “squelch-taas-tab-group-$taas_tab_counter”;
    $class = ‘squelch-taas-tab-group squelch-taas-override’;

    $rv .= ‘<div id=”‘.$id.'” class=”‘.$class.'” ‘.$data.’>’;
    $rv .= ‘<ul>’;

    // We drop the content and build the tabs from the stored contents of $taas_tabs

    foreach ($taas_tabs[$taas_current_tab_group] as $tab) {
    $rv .= $tab[‘tab’];
    }
    $rv .= ‘</ul>’;
    foreach ($taas_tabs[$taas_current_tab_group] as $tab) {
    $rv .= $tab[‘content’];
    }

    $rv .= ‘</div>’;
    $rv .= “\n”;

    // Restore current tab group
    $taas_current_tab_group = $_ctg;

    return $rv;
    }
    add_shortcode( ‘tabs’, ‘squelch_taas_tabs_shortcode’ );
    add_shortcode( ‘subtabs’, ‘squelch_taas_tabs_shortcode’ );
    add_shortcode( ‘subsubtabs’, ‘squelch_taas_tabs_shortcode’ );

    /**
    * [tab] shortcode
    *
    * Attributes:
    * title The title shown in the tab
    * icon URL to an icon to add to the tab
    * iconalt Alternative text for the icon
    * iconw Width of the icon
    * iconh Height of the icon
    */
    function squelch_taas_tab_shortcode( $atts, $content ) {
    global $taas_current_tab_group, $taas_tabs, $taas_tab_content_counter;

    $defaults = array(
    ‘title’ => ‘       ‘,
    ‘icon’ => ”,
    ‘iconw’ => ”,
    ‘iconh’ => ”,
    ‘iconalt’ => ”,
    );
    $atts = wp_parse_args( $atts, $defaults );

    $content = do_shortcode( shortcode_unautop( $content ) );

    $id = “squelch-taas-header-$taas_tab_content_counter”;

    $tab_arr = array();

    // Build the tab
    $rv = ”;
    $rv .= ‘<li class=”squelch-taas-tab”>’;
    $rv .= ‘<a href=”#squelch-taas-tab-content-‘.$taas_current_tab_group.’-‘.$taas_tab_content_counter.'”>’;

    if (!empty($atts[‘icon’])) {
    if (empty($atts[‘iconalt’])) $atts[‘iconalt’] = $atts[‘title’];

    $rv .= ‘<img src=”‘.$atts[‘icon’].'” alt=”‘.$atts[‘iconalt’].'” class=”squelch-taas-tab-icon” ‘;

    if (!empty($atts[‘iconw’])) $rv .= ‘width=”‘.$atts[‘iconw’].'” ‘;
    if (!empty($atts[‘iconh’])) $rv .= ‘height=”‘.$atts[‘iconh’].'” ‘;

    $rv .= ‘/>  ‘;
    }

    $rv .= $atts[‘title’];
    $rv .= ‘</a>’;
    $rv .= ‘</li>’;
    $tab_arr[‘tab’] = $rv;

    // Build the tab content
    $rv = ”;
    $rv .= ‘<div id=”squelch-taas-tab-content-‘.$taas_current_tab_group.’-‘.$taas_tab_content_counter.'”>’;
    $rv .= $content;
    $rv .= ‘</div>’;
    $tab_arr[‘content’] = $rv;

    // Push onto the tab stack
    $tabs_array = array();
    if (!empty($taas_tabs[$taas_current_tab_group])) $tabs_array = $taas_tabs[$taas_current_tab_group];
    array_push( $tabs_array, $tab_arr );
    $taas_tabs[$taas_current_tab_group] = $tabs_array;

    $taas_tab_content_counter++;

    // The shortcode REMOVES the content and stores it for the tabs shortcode to use
    return ”;
    }
    add_shortcode( ‘tab’, ‘squelch_taas_tab_shortcode’ );
    add_shortcode( ‘subtab’, ‘squelch_taas_tab_shortcode’ );
    add_shortcode( ‘subsubtab’, ‘squelch_taas_tab_shortcode’ );

    /**
    * [toggles] shortcode
    *
    * Attributes:
    * title The title to show above the toggle group
    * speed Length in ms, duration the animation should last for
    * active Which pane of the toggle should be active on page load, comma-separated
    * theme The theme to apply to the toggle
    * style DEPRECATED: Alias for ‘theme’, provided for compatibility with TheThe Tabs and Accordions
    */
    function squelch_taas_toggles_shortcode( $atts, $content ) {
    global $taas_title_counter, $taas_toggle_counter;

    $defaults = array(
    ‘title’ => ”,
    ‘speed’ => 800,
    ‘active’ => false,
    ‘theme’ => ‘jqueryui’,
    );

    $atts = wp_parse_args( $atts, $defaults );

    // If shortcode has style set instead of theme then use that value for style
    if (array_key_exists( ‘style’, $atts )) $atts[‘theme’] = $atts[‘style’];

    $content = do_shortcode( shortcode_unautop( tidy_up_shortcodes( $content ) ) );
    $rv = ”;

    if (!empty($atts[‘title’])) {
    $id = “squelch-taas-title-$taas_title_counter”;
    $class = “squelch-taas-group-title”;

    $rv .= ‘<h2 id=”‘.$id.'” class=”‘.$class.'”>’.$atts[‘title’].'</h2>’;

    $taas_title_counter++;
    }

    $data = ”;
    $data .= ‘data-speed=”‘.$atts[‘speed’].'” ‘;
    $data .= ‘data-active=”‘.$atts[‘active’].'” ‘;
    $data .= ‘data-theme=”‘.$atts[‘theme’].'” ‘;

    $id = “squelch-taas-toggle-$taas_toggle_counter”;
    $class = ‘squelch-taas-toggle squelch-taas-override’;

    $rv .= ‘<div id=”‘.$id.'” class=”‘.$class.'” ‘.$data.’>’;
    $rv .= $content;
    $rv .= ‘</div>’;
    $rv .= “\n”;

    $taas_toggle_counter ++;

    return $rv;

    }
    add_shortcode( ‘toggles’, ‘squelch_taas_toggles_shortcode’ );
    add_shortcode( ‘subtoggles’, ‘squelch_taas_toggles_shortcode’ );
    add_shortcode( ‘subsubtoggles’, ‘squelch_taas_toggles_shortcode’ );

    /**
    * [toggle] shortcode
    *
    * Attributes:
    * title The title shown in the heading of this pane
    */
    function squelch_taas_toggle_shortcode( $atts, $content ) {
    global $taas_toggle_content_counter;

    $defaults = array(
    ‘title’ => ‘       ‘
    );
    $atts = wp_parse_args( $atts, $defaults );

    $content = do_shortcode( shortcode_unautop( $content ) );
    $rv = ”;

    $id = “squelch-taas-header-$taas_toggle_content_counter”;

    $rv .= ‘<h3 id=”‘.$id.'” class=”squelch-taas-toggle-shortcode-header”>’;
    $rv .= ‘<a href=”#squelch-taas-toggle-shortcode-content-‘.$taas_toggle_content_counter.'”>’;
    $rv .= $atts[‘title’];
    $rv .= ‘</a>’;
    $rv .= ‘</h3>’;

    $rv .= ‘<div class=”squelch-taas-toggle-shortcode-content squelch-taas-toggle-shortcode-content-‘.$taas_toggle_content_counter.'”>’;
    $rv .= $content;
    $rv .= ‘</div>’;

    $taas_toggle_content_counter++;

    return $rv;
    }
    add_shortcode( ‘toggle’, ‘squelch_taas_toggle_shortcode’ );
    add_shortcode( ‘subtoggle’, ‘squelch_taas_toggle_shortcode’ );
    add_shortcode( ‘subsubtoggle’, ‘squelch_taas_toggle_shortcode’ );

    /* =JavaScript and CSS
    —————————————————————————- */

    /**
    * Enqueue the JavaScript and CSS.
    */
    function squelch_taas_enqueue_scripts() {
    global $taas_plugin_ver;

    $protocol = (!empty($_SERVER[‘HTTPS’]) && $_SERVER[‘HTTPS’] !== ‘off’ || $_SERVER[‘SERVER_PORT’] == 443) ? “https:” : “http:”;

    // Enqueue the JavaScript
    wp_enqueue_script(
    ‘squelch_taas’,
    plugins_url( ‘js/squelch-tabs-and-accordions.js’, __FILE__ ),
    array( ‘jquery’, ‘jquery-ui-core’, ‘jquery-ui-accordion’, ‘jquery-ui-tabs’ ),
    $taas_plugin_ver,
    true
    );

    // Enqueue the jQuery UI theme (providing something else hasn’t already done so)
    if (!wp_style_is(‘jquery-ui-standard-css’)) {
    $jquery_ui_theme = get_option( ‘squelch_taas_jquery_ui_theme’ );

    if (‘custom’ == $jquery_ui_theme) {
    $custom_css_url = get_option( ‘squelch_taas_custom_css_url’ );

    wp_enqueue_style(
    ‘jquery-ui-standard-css’,
    $custom_css_url,
    false,
    $taas_plugin_ver,
    false);
    } elseif ($jquery_ui_theme != ‘none’) {
    $url = apply_filters( ‘squelch_taas_jquery_ui_theme_url’,
    plugins_url(‘css/jquery-ui/’.$jquery_ui_theme.’/jquery-ui-1.9.2.custom.min.css’, __FILE__),
    $jquery_ui_theme
    );

    wp_enqueue_style(
    ‘jquery-ui-standard-css’,
    $url,
    false,
    $taas_plugin_ver,
    false);
    }
    }

    // Enqueue the CSS
    wp_enqueue_style(
    ‘squelch_taas’,
    plugins_url( ‘css/squelch-tabs-and-accordions.css’, __FILE__),
    false,
    $taas_plugin_ver,
    ‘all’
    );
    }
    add_action( ‘wp_enqueue_scripts’, ‘squelch_taas_enqueue_scripts’, 20 );

    /* =Helper Functions
    —————————————————————————- */

    /**
    * Returns the URL of the dashboard, for creating links in messages.
    */
    function squelch_taas_get_plugin_admin_url() {
    return get_site_url().’/wp-admin/themes.php?page=squelch-tabs-and-accordions-shortcodes/squelch-tabs-and-accordions.php’;
    }

    /* Useful function for stripping superfluous crap from the between shortcodes to
    * prevent autop() from ever having a chance to insert more crap.
    */
    if (!function_exists( ‘tidy_up_shortcodes’ )) :
    function tidy_up_shortcodes( $content ) {
    $rv = trim( $content );
    $rv = preg_replace( ‘/\]<br \/>/i’, ‘]’, $rv );
    $rv = preg_replace( ‘/<br \/>\n\[/i’, ‘[‘, $rv );

    return $rv;
    }
    endif;

    /* Set an option to a specific value, unless it has already been set.
    *
    * Parameters:
    * opt The option to update
    * def The default value
    *
    * Returns:
    * The value of the option
    */
    if (!function_exists( ‘set_default_option’ )) {
    function set_default_option( $opt, $def = ” ) {
    $val = get_option( $opt, $def );
    update_option( $opt, $val );

    return $val;
    }
    }

    /* =Configuration
    —————————————————————————- */

    /**
    * Admin interface.
    */
    function squelch_taas_admin() {
    // Flag for the included page, if this is not set the page does nothing to ensure it cannot be accessed directly
    $squelch_taas_admin = true;
    require_once( dirname(__FILE__) . ‘/inc/admin.php’ );
    }

    /**
    * Enable the menu in the admin interface
    */
    function squelch_taas_admin_menu() {
    $hook_suffix = add_submenu_page(
    ‘themes.php’,
    ‘Squelch Tabs And Accordions Shortcodes’,
    ‘Tabs and Accordions’,
    ‘manage_options’,
    __FILE__,
    ‘squelch_taas_admin’);

    // Add action to enqueue admin scripts only on the relevant page
    add_action( ‘admin_print_scripts-‘.$hook_suffix, ‘squelch_taas_admin_scripts’ );

    // Add action to enqueue admin styles only on the relevant page
    add_action( ‘admin_print_styles-‘.$hook_suffix, ‘squelch_taas_admin_styles’ );
    }
    add_action(‘admin_menu’, ‘squelch_taas_admin_menu’);

    /**
    * Enqueue scripts for the admin interface.
    */
    function squelch_taas_admin_scripts() {
    global $taas_plugin_ver;

    wp_enqueue_script( ‘media-upload’ );
    wp_enqueue_script( ‘thickbox’ );
    wp_enqueue_script(
    ‘squelch_taas_admin’,
    plugins_url( ‘js/squelch-tabs-and-accordions-admin.js’, __FILE__ ),
    array( ‘jquery’, ‘media-upload’, ‘thickbox’ ),
    $taas_plugin_ver,
    true
    );
    }
    // action for above function is added in squelch_taas_admin_menu

    /**
    * Enqueue the styles for the admin interface.
    */
    function squelch_taas_admin_styles() {
    wp_enqueue_style( ‘thickbox’ );
    }
    // action for above function is added in squelch_taas_admin_menu

    /**
    * Disable jQuery / jQuery UI configuration options by default
    */
    function squelch_taas_disable_jquery_admin() {
    echo ‘ style=”opacity: 0.1;”‘;
    }
    add_action(‘squelch_taas_nonwp_jquery_config’, ‘squelch_taas_disable_jquery_admin’);

    /**
    * Disable jQuery / jQuery UI configuration options by default
    */
    function squelch_taas_disable_jquery_config_admin() {
    echo ‘disabled=”disabled” ‘;
    }
    add_action(‘squelch_taas_nonwp_jquery_config_disabled’, ‘squelch_taas_disable_jquery_config_admin’);

    /* =Deactivation
    —————————————————————————- */

    /**
    * On deactivation of the plugin, delete all options.
    */
    function squelch_taas_deactivate() {
    // On deactivation of the plugin we clean up our stored options.
    delete_option( ‘squelch_taas_showmessage’ );
    }
    register_deactivation_hook( __FILE__, ‘squelch_taas_deactivate’ );

    /* =Deprecated
    —————————————————————————- */

    /* Nothing but trouble. Had enough of chasing bugs in this function.
    */
    if (!function_exists( ‘tidy_up_content’ )) : function tidy_up_content( $content, $inline = ‘auto’ ) { return $content; } endif;`

    to edit. this is the Tab pluin editor mode i am using. where exactly i can put the code which will visibly fine.
    thanks for help
    rubel

    Plugin Author Sarah

    (@shen045)

    I just had a play with the Squelch tab plugin, and it looks like you can include the crafty-social-buttons shortcode inside the content of the tab.

    For example, using the Squelch tab demo code, you would add the [csbshare] shortcode to the end of each tab content area like this

    [tabs title="" disabled="false" collapsible="true" active="0″ event="click"]
    [tab title="Tab 0"]Tab 0 content[csbshare][/tab]
    [tab title="Tab 1"]Tab 1 content[csbshare][/tab]
    [tab title="Tab 2"]Tab 2 content[csbshare][/tab]
    [/tabs]

    I just tested this and it adds in the sharing buttons at the end of the tab content. But all tabs on the same page will share the same URL – the url of the current page.

    You mentioned that you have 2400 items, so I assume they are automatically generated somehow. If so, it would probably be easiest to add this to your automatic generation script.

    I haven’t yet tested the other option of modifying the Squelch plugin code. That would be a last resort, as modifying plugins means you can no longer update them and that can end up being a security risk. My earlier suggestion about adding the action hook to the PHP was on the assumption that your tabs were generated by your theme.

    One other thing you could consider is to look for another social buttons plugin that works entirely using jQuery. That would mean you wouldn’t need to edit your content or the plugin, and might be a better solution in your particular case.

    Cheers,
    Sarah

    hi Sarah
    thanks for great patient. yeap i tried some days before in the code its working also as you said, its not sharing tab data rather the upper content of url which not work for me. Actually i am concerning about editing plugin option of tab which will generate automatically.
    I have tested dozens social plugin but faild to reached requirements. some one suggest “og tag”.
    As you suggest plugin which works entirely using jQuery. i don’t know any social button. Your suggestion always welcome and thanks again being proceed to solve the issue.
    Thanks
    rubel

    Plugin Author Sarah

    (@shen045)

    As far as I can tell, Squelch tabs doesn’t support directly linking to particular tabs.

    Do you have variations of the URL for showing different content?
    For each tab that you want to share, you need to have a different url so that the page displays the correct content.

    For example, each section on the hadithbd.com site has a different URL, like this:
    http://www.hadithbd.com/share.php?hid=21868
    http://www.hadithbd.com/share.php?hid=21869
    http://www.hadithbd.com/share.php?hid=21870

    Those links take you directly to the content of a single section. Are you able to do this on your site? If not, this needs to be implemented first, before you can think about sharing each section.

    If yes, then you need to put each URL into the HTML inside each tab so that it is available for the sharing buttons.

    As far as OG tags go (Open Graph protocol) – those are a nice addition, but not directly related to this issue of being able to share a link to a specific tab. Many Search Engine Optimisation (SEO) plugins will generate those for you. Facebook will use them to determine the image and text it uses to share the URL.

    Cheers,
    Sarah

    hi Sarah
    At first I should give you big thank (not enough at all) to you to dig the problem root and make me understand easily. Now i understand why every tab aren’t able to share specific data.
    I think we are so near to solve the problem.
    Yes i can create url for every “bunch of tabs”. Let me clarify a little bit about “bunch of tab= 6 tab in horizontal line of a page”. this is a link-
    http://hadithonlinebd.com/brevelation/
    For each “bunch of tab” contains 4 language about same topic. you can say translations of 4 language of a topic.
    NOW i can create a page for every “bunch of tab” so that page URL can be made and ready to implement for social sharing in a table.
    But problem is that how to get short code for each page? so that i can bring it in table which will represents sequence of “bunch tab”?
    Again thanks Sarah to help me a lot about this complex issue.
    Best regards
    Have a nice day
    Dr. rubel

    Plugin Author Sarah

    (@shen045)

    If I understand correctly, each section is a hadith, and within each section you have different tabs for different views of the hadith (Bengali, Arabic, English, Urdu, Audio, Video).

    So you would need to have a URL which links to one hadith with a specific tab.
    Maybe something like these:
    http://hadithonlinebd.com/brevelation/share?hadith=8&tab=bengali
    http://hadithonlinebd.com/brevelation/share?hadith=12&tab=urdu
    http://hadithonlinebd.com/brevelation/share?hadith=8&tab=english

    The exact format of the URL can change, but the important point is that it needs two pieces of information in it: (1) which hadith to display, and (2) which tab to display.

    So, in order to share a URL that leads back to the correct view, each set of sharing buttons needs to know the url.

    I can modify the sharing buttons so that the shortcode works like this:
    [csbshare url="http://hadithonlinebd.com/brevelation/share?hadith=8&tab=bengali"] (I can do that this weekend)

    Then the question is how to generate the page so that the shortcode inside each tab has the correct URL. Are you able to generate something like that in each tab content, so that the URL includes both the hadith and the tab?

    Cheers,
    Sarah

    yeap you understand 100%. and thanks for swift response.For 1 multi-language hadith i can generate 1 page and those page will represent 6 button. As i understand you can create shortcode for each tab. Do you think that shortcode undersatnd tab changes? That will be great if it happen! as my concern when tab clicked the data changed, I think no problem if 1 multi-language hadith share same the same page url.
    My question was different as you said- previously each hadith represented shortcode which were generated by table (by table press plugin), now i am generating hadith in A PAGE how i can get shortcode for each page which need to put in TALBLE ROW. On the other hand i have to leave table.

    Just now i got a respose from Tab Plugin Author mattlaw he said- `Possibly the easiest option is to add a shortcode to display the social sharing buttons (if one doesn’t already exist). Then just used the shortcode inside of the tabs.
    Shortcode:
    function crafty_social_sharing_buttons_shortcode( $atts, $content, $tag ) {
    ob_start();
    do_action(‘crafty-social-share-buttons’);
    return ob_get_clean();
    }
    add_shortcode( ‘crafty_social_sharing_buttons’, ‘crafty_social_sharing_buttons_shortcode’);
    Usage in the page:
    [tabs]
    [tab title="Tab 1"]
    [crafty_social_sharing_buttons]

    Tab 1 content
    [/tab]
    [tab title="Tab 2"]
    [crafty_social_sharing_buttons]

    Tab 2 content
    [/tab]
    [/tabs]
    The other options is if you want to use the tabs inside of a page template, you could use do_shortcode to execute the bits and pieces you want to generate:
    <?php ob_start(); ?>
    [tabs]
    [tab title="Tab 1"]
    <?php do_action(‘crafty-social-share-buttons’); ?>

    Tab 1 content
    [/tab]
    [tab title="Tab 2"]
    <?php do_action(‘crafty-social-share-buttons’); ?>

    Tab 2 content
    [/tab]
    [/tabs]
    <?php echo do_shortcode( ob_get_clean() ); ?>
    NOTE: I’ve not tested either of these blocks of code but they should give you an idea of direction.`

    Best regards
    rubel

    Plugin Author Sarah

    (@shen045)

    OK, so the tab author is saying it has to use a shortcode inside the tabs. There is already a [csbshare] shortcode that you can use, I just need to make a modification to it.

    Are you able to generate the tabs for each page so that they look something like this:

    [tabs]
      [tab title="বাংলা"]
        Tab 1 content
        [csbshare url="url.of.this.page.with?tab=bengali"]
      [/tab]
    
      [tab title="اردو"]
        Tab 2 content
        [csbshare url="url.of.this.page.with?tab=urdu"]
      [/tab]
    
      [tab title="English"]
        Tab 3 content
        [csbshare url="url.of.this.page.with?tab=english"]
      [/tab]
    [/tabs]

    If you can generate it like this, then each tab will have its own set of share buttons with the right information, so there will be no need to track changes to the tab.

    Note that this url parameter in the shortcode doesn’t work yet – but if you can generate them like this, I can easily make an update to the plugin so it will work for you.

    If you can’t generate it like this, let me know what you can generate. There are other ways to solve this also.

    Cheers,
    Sarah

    this is the test page-
    http://hadithonlinebd.com/test-2/
    i think its sharing 1st tab data. other tab data doesn’t share rather then 1st tab.

    Plugin Author Sarah

    (@shen045)

    Right now the shortcode will only share the page url so all tabs will share the same url.
    But I will make a new version of the plugin where the shortcode will work with a custom url. I will try to finish it tomorrow.

    Cheers,
    Sarah

Viewing 15 replies - 1 through 15 (of 34 total)
  • The topic ‘social button on tabbed content’ is closed to new replies.