Skip to content

Instantly share code, notes, and snippets.

@waseemsadiq
Last active January 9, 2021 00:37
Show Gist options
  • Save waseemsadiq/350ec626bcca26a16fc8a9dfaaa4bcfa to your computer and use it in GitHub Desktop.
Save waseemsadiq/350ec626bcca26a16fc8a9dfaaa4bcfa to your computer and use it in GitHub Desktop.
<?
$tweet = data('https://publish.twitter.com/oembed?url=https://twitter.com/twitter/status/'.$tweet_id);
//var_dump($tweet);exit;
$name = $tweet->author_name;
$url = $tweet->author_url;
$handle = '@'. preg_filter('#https://twitter.com/#siU', '', $url);
$html = preg_filter('#<script(.*)>(.*)<\/script>#siU', '', $tweet->html);
?>
<div class="w-96 m-auto bg-white rounded-xl border border-gray-300 pt-4 pb-2 px-4">
<div class="flex">
<a href="<?= $url ;?>" target="_blank" role="link" aria-hidden="true" tabindex="-1" class="rounded-full h-12 w-12 mr-1">
<img class="rounded-full" src="<?= $profile_img_url; ?>" >
</a>
<a href="<?= $url ;?>" class="text-left" target="_blank" role="link" data-focusable="true">
<span class="block"><?= $name ;?></span>
<span class="block"><?= $handle ;?></span>
</a>
<a href="<?= $url ;?>/status/<?= $tweet_id ;?>" target="_blank" aria-label="View on Twitter" role="link" data-focusable="true" class="w-6 ml-auto text-blue-500">
<svg viewBox="0 0 24 24" class="w-6">
<g>
<path fill="#1da1f2" d="M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z"></path>
</g>
</svg>
</a>
</div>
<style>
.twitter-tweet{margin:1rem 0;text-align:left;}
.twitter-tweet p{border-bottom:1px rgba(209, 213, 219,1) solid;margin-bottom;0.5em;padding-bottom:0.5em;}
.twitter-tweet p a:link{color:rgba(0,173,239,1);}
.twitter-tweet p a:hover,
.twitter-tweet p a:focus{color:rgba(0,104,144,1);}
</style>
<!-- start tweet blockquote here -->
<?= $html ;?>
<!-- end tweet blockquote here -->
</div>
@waseemsadiq
Copy link
Author

waseemsadiq commented Jan 8, 2021

Use it like this:

<?= import('/partials/social/embedded-tweet',[ 
    'tweet_id' => '1276485544156057604', 
    'profile_img_url' => (isset(config()->twitter_profile_img_url)) ? config()->twitter_profile_img_url : 'https://pbs.twimg.com/profile_images/660065817929846784/3KWHFG0Y_reasonably_small.png', 
 ]);
 ?>

@johanjanssens
Copy link

johanjanssens commented Jan 8, 2021

To get the tweet data use:

<?
$tweet = data('https://publish.twitter.com/oembed?url=https://twitter.com/joomlatoolsdev/status/1341019188203294726');

$name = $tweet->author_name;
$url = $tweet->author_url;
$html  = preg_filter('#<script(.*)>(.*)<\/script>#siU', '', $tweet->html);
?>

You could optimise the code to just use the tweet url.

@waseemsadiq
Copy link
Author

@johanjanssens @LearnCSS Updated the gist and the note

@waseemsadiq
Copy link
Author

waseemsadiq commented Jan 9, 2021

it turns out that instead of this:
$tweet = data('https://publish.twitter.com/oembed?url=https://twitter.com/joomlatoolsdev/status/1341019188203294726');

we can use this:
$tweet = data('https://publish.twitter.com/oembed?url=https://twitter.com/twitteroranythingesleyouwant/status/1341019188203294726');

So we only need the tweet's status ID :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment