10WebSocial Shortcode

Below, you’ll find a detailed guide on how to add the 10WebSocial Shortcode to your WordPress website, including its parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the 10WebSocial Plugin shortcode not to show or not to work correctly.

Before starting, here is an overview of the 10WebSocial Plugin and the shortcodes it provides:

Plugin Icon
10WebSocial

"10WebSocial is a dynamic WordPress plugin that effortlessly integrates Instagram feeds into your site. It enhances your website's aesthetic, encourages social engagement, and boosts user interaction."

★★★★✩ (351) Active Installs: 30000+ Tested with: 5.0.20 PHP Version: 5.2
Included Shortcodes:
  • [wdi_feed]

10WebSocial [wdi_feed] Shortcode

The wd-instagram-feed plugin shortcode, ‘wdi_feed’, is used to display an Instagram feed on a WordPress site. This shortcode fetches Instagram feed data based on the feed ID. If no ID is provided, it selects the first available feed. The shortcode also manages feed display settings, such as the number of photos and feed type – thumbnails, masonry, blog style, or image browser. It also handles error scenarios, like non-existing or unpublished feeds.

Shortcode: [wdi_feed]

Parameters

Here is a list of all possible wdi_feed shortcode parameters and attributes:

  • id – Unique identifier for the Instagram feed

Examples and Usage

Basic example – Displaying an Instagram feed by referencing the feed ID.

[wdi_feed id=1 /]

Advanced examples

Displaying an Instagram feed by referencing both ID and widget parameters. The feed will first try to load by ID, but if not found, it will try to load by widget parameters.

[wdi_feed id=1 widget_params='{"widget": true, "widget_image_num": 5, "widget_show_description": true, "widget_show_likes_and_comments": true, "number_of_columns": 3, "enable_loading_buttons": 0}']

Displaying an Instagram feed with specific user’s media. The feed will load media from the user’s Instagram account by referencing the username in the widget parameters.

[wdi_feed id=1 widget_params='{"widget": true, "username": "john_doe", "widget_image_num": 5, "widget_show_description": true, "widget_show_likes_and_comments": true, "number_of_columns": 3, "enable_loading_buttons": 0}']

PHP Function Code

In case you have difficulties debugging what causing issues with [wdi_feed] shortcode, check below the related PHP functions code.

Shortcode line:

add_shortcode('wdi_feed', 'wdi_feed');

Shortcode PHP function:

function wdi_feed($atts, $widget_params = '') {
  require_once(WDI_DIR . '/framework/WDILibrary.php');
  global $post;
  global $wdi_options;
  global $wdi_feed_counter;
  ob_start();
  $feed_id = WDILibrary::get('feed_id', 0, 'intval');
  if ( $feed_id != 0 && $post->post_type === "wdi_instagram" && $widget_params === '' ) {
    if ( !is_array($atts) ) {
      $atts = array();
    }
    $atts['id'] = $feed_id;
  }
  $attributes = shortcode_atts( array('id' => 'no_id'), $atts );
  $current_feed_id = $attributes['id'];

  if ( $attributes['id'] == 'no_id' ) {
    //including feed model
    require_once(WDI_DIR . '/admin/models/WDIModelEditorShortcode.php');
    $shortcode_feeds_model = new WDIModelEditorShortcode();
    /*if there are feeds select first one*/
    $first_feed_id = $shortcode_feeds_model->get_first_feed_id();
    $attributes['id'] = isset($first_feed_id) ? $first_feed_id : $attributes['id'];
    if ( $attributes['id'] == 'no_id' ) {
      ob_get_clean();

      return __('No feed. Create and publish a feed to display it.', "wd-instagram-feed");
    }
  }
  //including feed model
  require_once(WDI_DIR . '/admin/models/feeds.php');
  $feed_model = new Feeds_model_wdi();
  //getting all feed information from db
  $feed_row = WDILibrary::objectToArray( $feed_model->get_feed_row( $attributes['id'] ) );
  $feed_row = WDILibrary::keep_only_self_user($feed_row);
  
  if ( !isset($feed_row) || $feed_row == NULL ) {
    ob_get_clean();

    return __('Feed with such ID does not exist', "wd-instagram-feed");
  }
  if ( isset($feed_row['published']) && $feed_row['published'] === '0' ) {
    ob_get_clean();

    return __('Unable to display unpublished feed ', "wd-instagram-feed");
  }
  if ( $feed_row['nothing_to_display'] === '1' ) {
    ob_get_clean();

    return __('Cannot get other user media. API shut down by Instagram. Sorry. Display only your media.', "wd-instagram-feed");
  }

  if ( isset($feed_row["feed_item_onclick"]) && $feed_row["feed_item_onclick"] === 'lightbox' ){
    global $wdi_feed_item_onclick_type;
    $wdi_feed_item_onclick_type = true;
  }

  if ( !empty($feed_row['feed_users']) ){
    $feed_users = json_decode($feed_row['feed_users'], true);
    if( !empty( $feed_users) ) {
      foreach( $feed_users as $user) {
        if ( empty($user['tag_id']) ) {
          $feed_row['username'] = $user['username'];
          break;
        }
      }
    }
  }

  $params = array(
    'current_feed_id' => $current_feed_id,
    'number_of_photos' => $feed_row['number_of_photos'],
    'options' => $wdi_options
  );
  wdi_register_frontend_scripts( $params );
  if ( WDILibrary::is_ajax() || WDILibrary::elementor_is_active() ) {
    if ( $wdi_feed_counter == 0 ) {
      $wdi_feed_counter = wp_rand(1000, 9999);
      global $wdi_feed_counter_init;
      $wdi_feed_counter_init = $wdi_feed_counter;
    }
    //load scripts and styles from view files
  }
  else {
    wdi_load_frontend_scripts();
  }

  $feed_row['widget'] = false;
  if ($widget_params != '' && $widget_params['widget'] == true) {
    $feed_row['widget'] = true;
    $feed_row['number_of_photos'] = (string)$widget_params['widget_image_num'];
    $feed_row['show_description'] = (string)$widget_params['widget_show_description'];
    $feed_row['show_likes'] = (string)$widget_params['widget_show_likes_and_comments'];
    $feed_row['show_comments'] = (string)$widget_params['widget_show_likes_and_comments'];
    $feed_row['show_usernames'] = '0';
    $feed_row['display_header'] = '0';
    $feed_row['number_of_columns'] = (string)$widget_params['number_of_columns'];
    if ( $widget_params['enable_loading_buttons'] == 0 ) {
      $feed_row['feed_display_view'] = 'none';
    }
  }

  global $user_feed_header_args;
  $user_feed_header_args = array();
  if ( !empty($wdi_options['wdi_authenticated_users_list']) ) {
    $authenticated_users = json_decode($wdi_options['wdi_authenticated_users_list'], true);
    if ( !empty($authenticated_users[$feed_row['username']]) ) {
      $ig_user = $authenticated_users[$feed_row['username']];
      $user_feed_header_args['user'] = $ig_user;
    }
    else {
      ob_get_clean();

      return __('Please check your feed, the data was entered incorrectly.', "wd-instagram-feed");
    }
  }

  $user_feed_header_args['settings'] = array(
    'show_usernames' => $feed_row['show_usernames'],
    'show_follow' => $feed_row['follow_on_instagram_btn'],
    'media_followers' => $feed_row['display_user_post_follow_number'],
    'biography_website' => $feed_row['display_user_info'],
  );
  wp_localize_script("wdi_frontend", 'wdi_object', array(
    'user' => $user_feed_header_args['user']
  ));
  // checking feed type and using proper MVC
  $feed_type = isset($feed_row['feed_type']) ? $feed_row['feed_type'] : '';
  switch ($feed_type) {
    case 'thumbnails': {
      // including thumbnails controller
      require_once(WDI_DIR . '/frontend/controllers/thumbnails.php');
      $controller = new WDI_Thumbnails_controller();
      $controller->execute($feed_row, $wdi_feed_counter);
      $wdi_feed_counter++;
      break;
    }
    case 'masonry': {
      // including masonry controller
      require_once(WDI_DIR . '/frontend/controllers/masonry.php');
      $controller = new WDI_Masonry_controller();
      $controller->execute($feed_row, $wdi_feed_counter);
      $wdi_feed_counter++;
      break;
    }
    case 'blog_style': {
      // including thumbnails controller
      require_once(WDI_DIR . '/frontend/controllers/blogstyle.php');
      $controller = new WDI_BlogStyle_controller();
      $controller->execute($feed_row, $wdi_feed_counter);
      $wdi_feed_counter++;
      break;
    }
    case 'image_browser': {
      // including thumbnails controller
      require_once(WDI_DIR . '/frontend/controllers/imagebrowser.php');
      $controller = new WDI_ImageBrowser_controller();
      $controller->execute($feed_row, $wdi_feed_counter);
      $wdi_feed_counter++;
      break;
    }
    default: {
      ob_get_clean();

      return __('Invalid feed type', "wd-instagram-feed");
    }

  }
  // @TODO. All views pass_feed_data_to_js(), add_theme_styles(), generate_feed_styles() functions can be moved here
  // model and $feed_row - available here

  if ( isset($wdi_options['wdi_custom_css']) ) {
    wp_add_inline_style('generate_feed_styles', $wdi_options['wdi_custom_css']);
  }
  if ( isset($wdi_options['wdi_custom_js']) ) {
    ?>
    <?php echo wp_kses('<script>' . str_replace('&quot;', '"', $wdi_options['wdi_custom_js']) . '</script>', array('script' => array())); ?>
    <?php
  }

  return ob_get_clean();
}

Code file location:

wd-instagram-feed/wd-instagram-feed/frontend/shortcode.php

Conclusion

Now that you’ve learned how to embed the 10WebSocial Plugin shortcode, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *