Help needed with Tweetie plug-in

[spark]

Hello,

I’m trying to show a Twitter feed on my site using Tweetie.js. I’ve been following this thread Best recommendation for displaying Twitter feed?
I have copy/pasted the api folder into assets, and I do have c::set('twitter.key', consumer key); c::set('twitter.secret', consumer secret); in the config.php, but nothing shows up

This is what I have in my template:

<div id="tweet">
</div>

Console errors are:
[Error] ReferenceError: Can’t find variable: require
Global Code (tweetie.js:7)
[Error] SyntaxError: Can’t create duplicate variable: ‘config’
(anonymous function)
[Error] SyntaxError: Unexpected end of script
(anonymous function) (new-alt-times:936)

[texnixe]

1. Have you included jQuery in your project?
2. Have you linked to the script in your header/footer (after loading jQuery?)

[spark]

Yes, I have this in my header snippet
<?= js("https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js") ?>
<?= js("assets/js/tweetie.js") ?>
<?= js("assets/js/tweetie.min.js") ?>

[jimbobrjames]

The API folder needs to be in assets/js not just in assets. Maybe the javascript cant find the API. And your calling script twice. Delete <?= js("assets/js/tweetie.js") ?>. This is the uncompressed version that shouldnt be used in production.

The version jQuery might be too low. The demo page in the documentation file for tweetie uses jQuery 3.2.1.

Try:

<?= js("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js") ?>
<?= js("assets/js/tweetie.min.js") ?>

and make sure the tweetie.min.js file and the api folder are both in asseets/js.

[texnixe]

@jimbobrjames Have you got a working solution?

[jimbobrjames]

i have used it before but not with Kirby. Give me 5…I’ll see if i can get it going on my sandbox…

[jimbobrjames]

So ive been messing about with this and I think kirby is preventing access to the php api file (.htaccess rules im guessing)

I get a 404 when the script tries to hit:

http://starterkit.salt/assets/js/api/tweetie.php?type=timeline&params%5Bcount%5D=15&params%5Bexclude_replies%5D=true&params%5Binclude_rts%5D=true

Im getting console warnings and If i visit that file directly, i get the fancy starterkit 404 page.

Not really sure what to change to let that file through the rules.

[texnixe]

Seems to be some CORS issue…

But in the JS file, the path to the PHP file has to be changed, and the file is called tweetie.php, not tweet.php

[jimbobrjames]

Yes i noticed that to, but thats the default built into the script. you override the default path like so:

The docs for the script are not terribly good, and it seems to have changed a bit since i last used it. I got the cors issue when trying to use the api path set in the example file that comes with the script, but not locally running from the same server.

<ul id="tweetie"></ul>

  <?= js("https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js") ?>
  <?= js("assets/js/tweetie.min.js") ?>

  <script>
  $('#tweetie').tweetie({
    "url": "<?= kirby()->urls()->assets() . '/js/api/tweetie.php' ?>",
    "type": "timeline",
    "template": "<li>{{tweet.created_at}} - {{tweet.text}}</li>",
    "dateFormat": "%b %d, %Y",
    "params": {
      "count": 15,
      "exclude_replies": true,
      "include_rts": true
    }
  });
  </script>

[jimbobrjames]

I solved it another way, without the need for jQuery or JavaScript at all. Took 2 minutes with Twitter for PHP.

Install with Composer, and then put this in a snippet and fill in with your secrets and keys.

<?php require_once 'vendor/autoload.php';

$consumerKey = 'YOURKEY';
$consumerSecret = 'YOURSECRET';
$accessToken = 'YOURTOKEN';
$accessTokenSecret = 'YOURTOKENSECRET';

$twitter = new Twitter($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);
$statuses = $twitter->load(Twitter::ME);

?>

<ul>
<?php foreach ($statuses as $status): ?>
	<li><a href="https://twitter.com/<?php echo $status->user->screen_name ?>"><img src="<?php echo htmlspecialchars($status->user->profile_image_url_https) ?>">
		<?php echo htmlspecialchars($status->user->name) ?></a>:
		<?php echo Twitter::clickable($status) ?>
		<small>at <?php echo date('j.n.Y H:i', strtotime($status->created_at)) ?></small>
	</li>
<?php endforeach ?>
</ul>

Change this line depending on what you want. If you just want your own tweets to show up:

$statuses = $twitter->load(Twitter::ME);

If your want your friends tweets as well:

$statuses = $twitter->load(Twitter::ME_AND_FRIENDS);

Default is the last 20 tweets in the last 24 hours. You can limit the results like this

$statuses = $twitter->request('statuses/user_timeline', 'GET', ['count' => 3]); //Just you
$statuses = $twitter->request('statuses/home_timeline', 'GET', ['count' => 3]); //You & freinds

Perhaps thats workable for you instead?

[texnixe]

I got this Tweetie thing to work as well:

1- Create a new plugin folder tweetie with the following structure:

plugins/
  - tweetie/
      - tweetie.php
      - config.php
      - twitteroauth/

(don’t put these files into the assets folder). All that is needed in the assets/js folder is tweetie.min.js, then.

In the script:

  <script>
  $('#tweets').tweetie({
    "url": "api/tweet",
    "type": "timeline",
    "template": "<li>{{tweet.created_at}} - {{tweet.text}}</li>",
    "dateFormat": "%b %d, %Y",
    "params": {
      "count": 15,
      "screen_name": "whatever"
    }
  });
  </script>

In Kirby config.php, add a route with the content of the server.php file (apart from the require stuff):

c::set('routes', [
  [
    'pattern' => 'api/tweet',
    'action' => function() {
  
      $api = new Tweetie();
      $tweets = $api->fetch($_GET['type'], $_GET['params']);

      header('Content-Type: application/json');

      exit($tweets);
    }
  ]
]);

But I’d prefer your solution without jQuery if I needed a Twitter feed…

[jimbobrjames]

@texnixe

I got this Tweetie thing to work as well

Oh well done!

@texnixe

But I’d prefer your solution without jQuery if I needed a Twitter feed…

I would say thats a better way to go. From past experience Twitter likes to upset everyone occasionally by changing the way tweets can be fetched. I had to update about 20 websites a few years back because they rendered most of the JavaScript / jQuery solutions useless by requiring authentication. That was not a fun afternoon.

[texnixe]

@jimbobrjames

I had to update about 20 websites a few years back because they rendered most of the JavaScript / jQuery solutions useless by requiring authentication. That was not a fun afternoon.

But that is a general problem with these APIs, no matter if you use a JS solution or not. They keep changing them all the time.

[spark]

@texnixe So I tried your approach first to see if I could get the original plugin to work, but still nothing seems to show up? I made the plugins/tweetie folder with the structure you said and added the route in config.php, and the console isn’t showing any errors either, so I can’t really tell what’s wrong.

@jimbobrjames I’ve never used Composer so I downloaded the folder from GitHub. I did make a new twitter snippet with the code you provided, but where in the Kirby structure should I put the twitter-php-master folder? There is this error, but I don’t see the vendor/autoload.php file anywhere in the downloaded files anyway.

Whoops \ Exception \ ErrorException (E_COMPILE_ERROR)
Tpl::main(): Failed opening required 'vendor/autoload.php' (include_path='.:/Applications/MAMP/bin/php/php7.2.1/lib/php')

Thanks to both of you for all the help.

[jimbobrjames]

vendor/autoload is what composer does so you can load multiple things cleanly.

Since you just grabbed the files, you just need to point the snippet to where you put the files. See this in examples…

dg/twitter-php/blob/master/examples/load.php

You just need to change the require line in the snippet to point to were you put the files…

<?php require_once '../src/twitter.class.php';

$consumerKey = 'YOURKEY';
$consumerSecret = 'YOURSECRET';
$accessToken = 'YOURTOKEN';
$accessTokenSecret = 'YOURTOKENSECRET';

$twitter = new Twitter($consumerKey, $consumerSecret, $accessToken, $accessTokenSecret);
$statuses = $twitter->load(Twitter::ME);

?>

<ul>
<?php foreach ($statuses as $status): ?>
	<li><a href="https://twitter.com/<?php echo $status->user->screen_name ?>"><img src="<?php echo htmlspecialchars($status->user->profile_image_url_https) ?>">
		<?php echo htmlspecialchars($status->user->name) ?></a>:
		<?php echo Twitter::clickable($status) ?>
		<small>at <?php echo date('j.n.Y H:i', strtotime($status->created_at)) ?></small>
	</li>
<?php endforeach ?>
</ul>

[spark]

Works perfectly! Can I remove composer.json then?

[jimbobrjames]

Yup. You just need the 3 php files that are in the src folder.

[spark]

Do you know if there’s any way to include images that were attached to the tweet?

Edit: Never mind, figured it out

[jimbobrjames]

@spark

Edit: Never mind, figured it out

Awesome. Would you care to share

[spark]

Found most of it on stackoverflow, but it was basically this: `

<ul>
<?php foreach ($statuses as $status): ?>
<?php $media_url = $status->entities->media[0]->media_url; ?>

<li><a href="https://twitter.com/<?php echo $status->user->screen_name ?>"><img src="<?php echo htmlspecialchars($status->user->profile_image_url_https) ?>">
		<?php echo htmlspecialchars($status->user->name) ?></a>:
		<?php echo Twitter::clickable($status) ?>
    <img src=" <?= $media_url ?>">
</li>
    <?php endforeach ?>

</ul>