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:
"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."
- [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('"', '"', $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.
Leave a Reply