Geting twitter streaming contents in WordPress

Twitter plugins require credential information in order to get twitter contents. Here shows how I get the streaming contents directly from user's twitter without credential information.

Table of Contents

Idea

Get the contents from public twitter timeline, and use xpath to retrieve the real contents from the timeline.

xpath

//*[@id="timeline"]/div/div[@class="stream"]

php code

$url = "https://twitter.com/vincentkempp";
    $dom = new DOMDocument();
    @$dom->loadHTMLFile($url);
    $xpath = new DOMXpath($dom);
    $elements = $xpath->query('//*[@id="timeline"]/div/div[2]');
    $content = $dom->saveHTML($elements->item(0));
    echo '<div id="twitter">'.$content.'</div>';

wrap it as a shortcode

function twitter_contents_shortcode($atts){
    $a = shortcode_atts(array(
        'id' => 'vincentkempp',
    ),$atts);

    $url = "https://twitter.com/".$a[id];
    $dom = new DOMDocument();
    @$dom->loadHTMLFile($url);
    $xpath = new DOMXpath($dom);
    $elements = $xpath->query('//*[@id="timeline"]/div/div[2]');
    $content = $dom->saveHTML($elements->item(0));
    echo '<div id="twitter">'.$content.'</div>';
}

add_shortcode('twitter','twitter_contents_shortcode');

Special process

Some contents inside the timeline is to be hidden, e.g. "Pinned Tweet", dropdown items,footer...

to be hidden

Using the following css code to hide these noise content. There are two places to put these code: Additional CSS in the theme customization, and style.css file. Either way work well.

#twitter {
  width:100%;
  height:650px;
  overflow:scroll;
}
#twitter div ol li div div.dropdown,
#twitter div ol li div div.stream-item-header,
#twitter div ol li div div.context,
#twitter div ol li div div.stream-item-footer,
#twitter div ol li div.dismiss-module,
#twitter div div.stream-footer,
#twitter div div.stream-fail-container {
  display:none;
}
#twitter div div div div div div div div div img{
  width:100%;
  height:auto !important;
}

Usage

[twitter id="vincentkempp"]