Buddypress - Add Twitch Channel/Chat API

Hello community friends/devs!

I'm trying to figure out how I can utilize buddypress/Xprofile fields to utilize Twitch TV's API embed.

Basically I need to create a field titled "Twitch Channel" - The user will enter his/her twitch tv channel name. This information will then be passed into the code below:

<iframe
    src="http://player.twitch.tv/?channel={CHANNEL}"
    height="720"
    width="1280"
    frameborder="0"
    scrolling="no"
    allowfullscreen>
</iframe>

I'd like to create a buddypress profile tab called "My Twitch Channel" and inside of that tab I'd like to embed this code. The buddypress field "Twitch Channel" will then be passed into the code and be unique for each persons profile.

Hope this makes sense. I think I'm making it much more complicated than it actually is.

Thanks for your help in advance!

  • Joshua

    So I actually figured this part out :slight_smile:

    I added this code to my functions.php file

    //Custom Profile Menu
    function bp_content_setup_nav() {
    global $bp;
    
    bp_core_new_nav_item( array(
        'name'                  => __('Twitch TV', 'buddypress'),
        'slug'                  => 'my-twitch-tv',
        'screen_function'       => 'bp_twitch_tv_screen',
        'position'              => 40,//weight on menu, change it to whatever you want
        'default_subnav_slug'   => 'my-posts-subnav'
    ) );
    
    do_action( 'bp_content_setup_nav' );
    }
    add_action( 'bp_setup_nav', 'bp_content_setup_nav' );
    
    function bp_twitch_tv_screen() {
        add_action( 'bp_template_title', 'bp_twitch_tv_title' );
        add_action( 'bp_template_content', 'bp_twitch_tv_content' );
        bp_core_load_template( apply_filters( 'bp_core_template_plugin', 'members/single/plugins' ) );
    }
    
    function bp_twitch_tv_title() {
        echo 'Whatever Title You Want';
    }
    
    function bp_twitch_tv_content() {
        get_template_part( 'twitch/twitch' );
        //or you can put code here; only useful for short bits or echoing plain text
    }

    I then made my template file and added my html into it.

    For the {CHANNEL} I chaned it to this
    <?php bp_profile_field_data( 'field=Twitch Channel&user_id=' . bp_get_member_user_id() ) ?>

    Hard part is done as it works perfectly.

    Now, I need to make a conditional that says :
    IF my Xprofile field "Twitch Channel" is empty show some html else show the Iframe.

  • Joshua

    Figured it out

    <?php
    $bpProfileField = bp_get_profile_field_data( 'field=Twitch Channel&user_id=' . get_the_author_meta( 'ID' ) );
    if ( empty ( $bpProfileField) ):
    ?>
    <p>Apparently <?php echo get_the_author() ?> does not feel like sharing anything. Isn't this sad?</p>
    <?php else: ?>
    <div class="wpb_column vc_column_container vc_col-sm-6">
    <iframe
        src="http://player.twitch.tv/?channel=<?php bp_profile_field_data( 'field=Twitch Channel&user_id=' . bp_get_member_user_id() ) ?>"
        height="500"
        width="100%"
        frameborder="0"
        scrolling="no"
        allowfullscreen>
    </iframe>
    </div>
    <div class="wpb_column vc_column_container vc_col-sm-6">
    <iframe frameborder="0"
            scrolling="no"
            id="chat_embed"
            src="http://www.twitch.tv/<?php bp_profile_field_data( 'field=Twitch Channel&user_id=' . bp_get_member_user_id() ) ?>/chat"
            height="500"
            width="100%">
    </iframe>
    </div>
    <?php endif; ?>

    So now if my user doesn't fill out the xprofile field I've set up for their Twitch Channel , it will display some custom HTML saying that the user doesn't have a twitch channel. I might visit the idea later to actually remove the profile tab if the field isn't filled out, but that might be a bit too much at the moment.

  • Milan

    Hello @Joshua,

    I hope you are having a good day and thanks for the asking. :slight_smile:

    Please do follow these steps to create tab for twitch channel, :slight_smile:

    #1) Navigate to User > Profile Fields .
    #2) Create one new profile field, give it a name Channel Name.
    #3) Save your changes there.
    #4) Head over to your current active theme's functions.php file( I suggest you create stand alone plugin or child theme so your changes not removed when theme gets updated ). You can find functions.php file under your current theme's root folder.
    #5) Paste below code snippet at the end of the file.

    function profile_tab_twitch_tv() {
          global $bp;
    
          bp_core_new_nav_item( array(
    			'parent_url'      => bp_loggedin_user_domain() . '/twitchtv/',
    			'parent_slug'     => $bp->profile->slug,
    			'default_subnav_slug' => 'twtchtv',
                'name' => 'Tv Channel',
                'slug' => 'twitchtv',
                'screen_function' => 'twitch_tv_screen',
                'position' => 40,
          ) );
    }
    add_action( 'bp_setup_nav', 'profile_tab_twitch_tv' );
    
    function twitch_tv_screen() {
        //add title and content here - last is to call the members plugin.php template
        add_action( 'bp_template_title', 'twitch_tv_title' );
        add_action( 'bp_template_content', 'twitch_tv_content' );
        bp_core_load_template( 'buddypress/members/single/plugins' );
    }
    function twitch_tv_title() {
        echo 'Twitch Tv Channel';
    }
    
    function twitch_tv_content() {
    	//grab channel name first.
    	// global $bp;
    	// $the_user_id = $bp->loggedin_user->userdata->ID;
    	// $the_user_login = $bp->loggedin_user->userdata->user_login;
    
    	$channelName = bp_get_profile_field_data('field=Channel Name&user_id=' . bp_loggedin_user_id() );
        ?>
    	<iframe
        src=&quot;http://player.twitch.tv/?channel=<?php echo $channelName; ?>&quot;
        height=&quot;720&quot;
        width=&quot;1280&quot;
        frameborder=&quot;0&quot;
        scrolling=&quot;no&quot;
        allowfullscreen>
    	</iframe>
        <?php
    }

    #6) Save file. Create one dummy user for testing, enter tvf channel name, then head over to user profile page. You will see Channel tab which will render content in iframe the way you wanted. :slight_smile:

    I hope this helps you.

    Please let me know if there is anything else I can help you with.

    Best Regards,
    Milan Savaliya.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.