Twitter integration on hybrid app

12 posts, 0 answers
  1. Leonard
    Leonard avatar
    17 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2014 Link to this post

    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.
  2. Iva Koevska
    Admin
    Iva Koevska avatar
    286 posts

    Posted 21 Mar 2014 Link to this post

    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
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET. Seats are limited.

     
  3. riyaz
    riyaz avatar
    1 posts
    Member since:
    Nov 2016

    Posted 14 Dec 2016 in reply to Iva Koevska Link to this post

    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

  4. Tsvetina
    Admin
    Tsvetina avatar
    2059 posts

    Posted 19 Dec 2016 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  5. Riyaz
    Riyaz avatar
    11 posts
    Member since:
    Sep 2016

    Posted 27 Dec 2016 in reply to Tsvetina Link to this post

    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

  6. Riyaz
    Riyaz avatar
    11 posts
    Member since:
    Sep 2016

    Posted 27 Dec 2016 in reply to Tsvetina Link to this post

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

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

     

     

  7. Tsvetina
    Admin
    Tsvetina avatar
    2059 posts

    Posted 28 Dec 2016 Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  8. Riyaz
    Riyaz avatar
    11 posts
    Member since:
    Sep 2016

    Posted 11 Jan in reply to Tsvetina Link to this post

    Dear Tsvetina,

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

     

  9. Riyaz
    Riyaz avatar
    11 posts
    Member since:
    Sep 2016

    Posted 11 Jan in reply to Riyaz Link to this post

    sorry...i missed the attachment in my last reply
  10. Riyaz
    Riyaz avatar
    11 posts
    Member since:
    Sep 2016

    Posted 11 Jan in reply to Riyaz Link to this post

    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();
    ?>

  11. Riyaz
    Riyaz avatar
    11 posts
    Member since:
    Sep 2016

    Posted 11 Jan in reply to Tsvetina Link to this post

    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)

     

     

  12. Tsvetina
    Admin
    Tsvetina avatar
    2059 posts

    Posted 12 Jan Link to this post

    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
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top