Skip to:
Content
Pages
Categories
Search
Top
Bottom

How can I add Twitch.tv streams to BuddyPress profiles?


  • chickencurry
    Participant

    @chickencurry

    I want to display the users twitch stream in his or her profile. Instead of just showing the url to the link I want the stream to show up? Somebody knows how I can do this?

Viewing 4 replies - 1 through 4 (of 4 total)

  • techhnyne
    Participant

    @andrewpina

    I would also like to know this has anyone figured this out? maybe team p and get a dev to work on a plugin for us?


    Scarecrow
    Participant

    @scarecr0w12

    I’ve been attempting to get the below to work, but little trouble with getting it to load the stream itself due to changes that Twitch has done

    // Add's Twitch Channel To BuddyPress Profiles
    if(!class_exists('BP_Twitch_Tab')):
    class BP_Twitch_Tab {
        public $tab_name = 'Twitch TV';
        public $content_title = 'Twitch TV Channel';
        public $url_slug = 'twitchtv';
        public $subnav_slug = 'twtchtv';
        public $tab_position = 40;
        public $show_chat = true;
    
        // channel name will be grabbed from buddypress field $field_name
        public $channelName = null;
        public $field_name = 'Twitch Channel';
        public function __construct () {
            add_action('bp_setup_nav', array($this, 'profile_tab'));
        }
    
        // add profile tab
        public function profile_tab() {
            global $bp;
            // get channel name
            $this->channelName = bp_get_profile_field_data('field=' . $this->field_name . '&user_id=' . bp_loggedin_user_id());
            if($this->channelName) {
                bp_core_new_nav_item( array(
                    'parent_url'           => bp_loggedin_user_domain() . '/' . $this->url_slug . '/',
                    'slug'                 => $this->url_slug,
                    'default_subnav_slug'  => $this->subnav_slug,
                    'parent_slug'          => $bp->profile->slug,
                    'name'                 => $this->tab_name,
                    'position'             => $this->tab_position,
                    'screen_function'      => array($this, 'screen_function')
                ) );
            }
        }
    
        // call actions on profile screen
        public function screen_function() {
            add_action( 'bp_template_title', array($this, 'template_title') );
            add_action( 'bp_template_content', array($this, 'template_content') );
            bp_core_load_template( 'buddypress/members/single/plugins' );
        }
    
        // add content title
        public function template_title() {
            echo $this->content_title;
        }
    
        // show iframe
        public function template_content() {
            ?> <iframe src="//www.twitch.tv/<?php echo $this->channelName; ?>/embed" frameborder="0" scrolling="no" height="500" width="100%"></iframe> <?php
            // show chat
            if ($this->show_chat) {
                ?> <iframe frameborder="0" scrolling="no" class="chat_embed" src="//twitch.tv/chat/embed?channel=<?php echo $this->channelName; ?>&popout_chat=true" height="400" width="100%"></iframe> <?php
            }
        }
    }
    endif;
    new BP_Twitch_Tab;

    clickallco
    Participant

    @clickallco

    Your iframe needs a parent to be shown, twitch doesn’t allow live streams to be shown in embeds without it. Here’s an example:

    <iframe src="https://player.twitch.tv/?channel=NAMEOFCHANNEL&parent=www.yourwebsite.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>

    Otherwise you could always do something like this and alter the buddypress member templates to fit it whereever you want.

    <?php 
    global $bp;
    $user_id = get_the_author_id();
    //Fill out the PROFILE FIELD NAME with your own field name
    $Twitch_Data = xprofile_get_field_data( 'PROFILE FIELD NAME', $user_id );
    
    if ( ! empty( $Twitch_Data) ) {
    ?>
    
    <div id="twitch-embed"></div>
    
    <script src="https://player.twitch.tv/js/embed/v1.js"></script>
    <script type="text/javascript">
      new Twitch.Player("twitch-embed", {
         channel: "<?php echo $Twitch_Data ?>"
      });
    </script>
    
    <?php } ?>

    The user would then go ahead and fill in their own channel name in the Buddypress profile field you’ve provided for them.


    clickallco
    Participant

    @clickallco

    – or just in an iframe like this

    <?php 
    global $bp;
    $user_id = get_the_author_id();
    //Fill out the PROFILE FIELD NAME with your own field name
    $Twitch_Data = xprofile_get_field_data( 'PROFILE FIELD NAME', $user_id );
    
    if ( ! empty( $Twitch_Data) ) { ?>
    
    <iframe src="https://player.twitch.tv/?channel=<?php echo $Twitch_Data ?>&parent=www.yourwebsite.com" frameborder="0" allowfullscreen="true" scrolling="no" height="378" width="620"></iframe>
    
    <?php } ?>
Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Skip to toolbar