Twitter integration on hybrid app

[Leonard]

Hi,

how to integrate twitter for my hybrid app. So user can login and show their data in the app, include profile picture.
Thank you.

[Iva Koevska]

Hi Leonard,

There are a number of ways you can tackle putting Twitter functionality into your app.

• If you want to show a specific timeline, you can use the Twitter widgets, placing the code provided by Twitter directly in your HTML. You can get the code for such a widget from your profile.
• You can use the Twitter REST API. You can read more about it here. It is probably the most advanced option giving you the most options. You can read about using REST with Cordova here.
• You can utilize the Twitter plugin (currently available for iOS only). This plugin lets you send tweets.
• You can use the Social Message Plugin to post tweets.
• You can use the Share plugin to post tweets.
• You can use the SocialSharing plugin to post tweets.

Regards,
Iva Koevska
Telerik

 

 

[riyaz]

Hi there Iva,

Need a small help. We have integrated twitter tweet widget in our app. It works fine with android, but in iphone is fails to take the css. and shows the tweets in absurd ways. Can you please advise?

 

Regards

[Tsvetina]

Hello Riyaz,

Can you share the code you used to integrate the twitter tweet widget in your app? Which approach exactly you used? In order to help you identify the cause of the issue, we need to be able to reproduce it.

Regards,
Tsvetina
Telerik by Progress

 

 

[Riyaz]

Hi there....

we are fetching the data from a website which is made in wordpress. However we have made some customized pages to float the data in json format. The tweets are embedded there on the website.....and they are working just fine over there as well as in android ...while in iphone...it is not taking the css of twitter...u still want me to paste the code? 

many thanks for your reply and sorry for not replying before today as i was on vacation.

 

 

Regards

Riyaz

[Riyaz]

Here's the link for your kind reference..... 

http://www.jantakareporter.com/entertainment/salman-khan-tweets-says-hates-aamir-khan-professionally/87028/

 

 

[Tsvetina]

Hello Riyaz,

What I meant was that we need to see the code you used to integrate the feed in your mobile app. I don't see the issue when I open your site on an iPhone, so I guess the problem is related to the implementation inside the mobile app.
Please, share with us code snippets that are enough to reproduce the issue in a mobile app. Alternatively, you can open a support ticket and send us your AppBuilder project in it.

Regards,
Tsvetina
Telerik by Progress

 

 

[Riyaz]

Dear Tsvetina,

Many thanks for your help so far. Attached is the complete code of the page

 

[Riyaz]

sorry...i missed the attachment in my last reply

[Riyaz]

and here's our server side code we have used to fetch the data

<?php
header('Access-Control-Allow-Origin: *');
?>
<?php
include_once "../wp-load.php";

function getTermsByID($ID, $taxonomy = 'category', $field = 'slug')
{
    $terms      = wp_get_post_terms($ID, $taxonomy, $args);
    $termsArray = array();
    if (!is_wp_error($terms)) {
        foreach ($terms as $term) {
            $termsArray[] = $term->$field;
        }
        
    }
    
    return $termsArray;
}

$postData      = array();
$currentPostID = $_GET['id'];
$posts_per_page = td_util::get_option('td_posts_per_page_in_mobile');


$args = array(
    'post_type' => 'post',
    'post_status' => 'publish',
'posts_per_page'=> $posts_per_page ? $posts_per_page : 20,
'order'=>'DESC',
'orderby'=>'date',
'tax_query'=>array(array('taxonomy'=>'category','field'=>'id','terms'=>array($_GET['cid'])))    
);

$object = new WP_Query($args);

if ($object->have_posts()):
    while ($object->have_posts()) {
        $object->the_post();
        $content = '';
        //get post ids
        $ID     = get_the_ID();

        //get categories
        $categories = getTermsByID($ID, 'category', 'slug');
        
        // get images
        $fullfeatureimage = $thumbfeatureimage = '';
        if (has_post_thumbnail($currentPost->ID)) {
            $fullfeatureimage  = wp_get_attachment_image_src(get_post_thumbnail_id($ID), 'full');
            $thumbfeatureimage = wp_get_attachment_image_src(get_post_thumbnail_id($ID), 'thumbnail');
        }
        // get content
        $content = preg_replace('#(\\r\\n|\\r|\\n)#', '<br>', get_the_content());

$pattern = '#https://twitter.com/[a-zA-Z_0-9]+/status/+[0-9]+#';

preg_match_all($pattern, $content, $matches);

foreach ($matches[0] as $match) {
$urlSplit = explode('/',$match);
$replace = '[tweet id="'.end($urlSplit).'" width="100%"]<script async="" src="https://platform.twitter.com/widgets.js"></script>';
//replace data inside of those blocks
$content = str_replace($match,$replace,$content);
}
//https://www.youtube.com/watch?v=05CChwSIW14
$content = str_replace('https://www.youtube.com/watch?v=','https://youtu.be/',$content);

$content = str_replace('https://m.youtube.com/watch?v=','https://youtu.be/',$content);

$patternyoutube = '#https://youtu.be/[-a-zA-Z_0-9]+#';

preg_match_all($patternyoutube, $content, $matchesyoutube);

foreach ($matchesyoutube[0] as $match) {
$replaceyoutube = '<div class="youtubevideo">[youtube width="100%" height="300px"]'.trim($match).'[/youtube]</div>';
//replace data inside of those blocks
$content = str_replace($match,$replaceyoutube,$content);
}


$content = preg_replace("/<a\s(.+?)>(.+?)<\/a>/is", "$2", $content);

        // add data to array
        $currentPostDetails['id']                = $ID;
        $currentPostDetails['url']               = get_permalink($ID);
        $currentPostDetails['name']              = get_the_title();
        $currentPostDetails['content']           = preg_replace('#<script>(.*?)</script>#', '', do_shortcode($content));

        $currentPostDetails['date']              = date('H:i', strtotime(get_the_time())) . ' | ' . date('D d M Y', strtotime(get_the_date()));
        $currentPostDetails['fullfeatureimage']  = $fullfeatureimage[0];
        $currentPostDetails['thumbfeatureimage'] = $thumbfeatureimage[0];
        $currentPostDetails['category']          = $categories ? implode(',', $categories) : '';
$currentPostDetails['urls'] = $matchesyoutube;

        // get data in array
        $postData[] = $currentPostDetails;
        
    }
endif;

echo json_encode($postData);

die();
?>

[Riyaz]

Hello again Tzvetina,

For a simple reference... below is a simple code that we have tried as well... it is working fine on android / iphone simulator...however it doesn't load without styles or formatting in iphone

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Happy 50th anniversary to the Wilderness Act! Here&#39;s a great wilderness photo from <a href="https://twitter.com/YosemiteNPS">@YosemiteNPS</a>. <a href="https://twitter.com/hashtag/Wilderness50?src=hash">#Wilderness50</a> <a href="http://t.co/HMhbyTg18X">pic.twitter.com/HMhbyTg18X</a></p>&mdash; US Dept of Interior (@Interior) <a href="https://twitter.com/Interior/status/507185938620219395">September 3, 2014</a></blockquote><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

 

 

Also...here's what we have placed in config.xml (see attachment)

 

 

[Tsvetina]

Hi Riyaz,

I reproduced the issue and tried to inspect it but all requests to Twitter are successful (checked using Fiddler on iOS), however the content doesn't load. I did a search on the internet and found that this is unfortunately a known issue for quite some time:
Tweet Widget not working in Cordova and iOS (there are multiple artiles like this one in Stack Overflow, Twitter forums and other community channels)

I also tried some modifications in the config files and switching to the WKWebView but nothing seems to help. The only thing that worked for some was to load the Twitter widget outside of the app WebView using the InAppBrowser plugin.

Regards,
Tsvetina
Telerik by Progress