ElkArte Community

Elk Development => Feature Discussion => Topic started by: Wizard on September 11, 2015, 03:17:41 pm

Title: Twitter embed
Post by: Wizard on September 11, 2015, 03:17:41 pm
Do we have a Twitter embed plugin ?
Title: Re: Twitter embed
Post by: Flavio93Zena on September 11, 2015, 06:00:33 pm
Shouldn't be crazy hard to port this over: http://custom.simplemachines.org/mods/index.php?mod=3837
Title: Re: Twitter embed
Post by: emanuele on September 11, 2015, 08:43:58 pm
I think I wrote something a while ago, but I couldn't find anything around... maybe it was just a déjà vu... OMG The Matrix is changing!! :P
Title: Re: Twitter embed
Post by: Joshua Dickerson on September 11, 2015, 10:32:00 pm
Hmm... at some point I'll try that as a test of the hooks in my BBC parser. You couldn't do the automatic Tweet link to embedded tweet without code edits in the current version but you can do the tag version pretty easily with a single simple hook.
Title: Re: Twitter embed
Post by: Wizard on October 16, 2015, 03:03:13 am
Found this. Want to use ?

https://twitframe.com/
Title: Re: Twitter embed
Post by: oblivion on August 03, 2016, 08:26:25 pm
I was looking for a twitter-embed add-on today and it looks like none exists.  Has anyone gone the bbcode route on their forums?  Have some tips on how to implement?
Title: Re: Twitter embed
Post by: emanuele on August 03, 2016, 10:58:25 pm
I had a moment of madness[1] and put together something fancy. :P

The php code could be just:
Code: [Select]
	$message = preg_replace_callback('~<a href="(http[s]?://twitter.com/\w+/status/\d+)" (.*?)>\1</a>~',
function($matches) {
$matches[2] = str_replace('class="', 'class="twitter_embed ', $matches[2]);
return '<a href="' . $matches[1] . '" ' . $matches[2] . '>' . $matches[1] . '</a>';
},
$message
);
static $load_js = true;
if ($load_is === true)
{
loadJavascriptFile('twitter_embed.jquery.js');
addInlineJavascript('
$(document).ready(function() {
$(".twitter_embed").lazyload();
});');
$load_js = false;
}
put in a function and attached to the integrate_post_parsebbc hook.
Then there is a bit of javascript that is a modified version of https://github.com/tuupola/jquery_lazyload (and is attached here).
The two will work together to embed the twitter post only when scrolling the message appears in the viewport.
And all those waiting for the 1.0.8.1 fixes will be in front of my door with torches and pitchforks... :P
Title: Re: Twitter embed
Post by: ahrasis on August 04, 2016, 02:59:13 am
Hey!! Put this in addons will ya... :P
Title: Re: Twitter embed
Post by: emanuele on August 04, 2016, 08:07:58 am
Too lazy and too many other things to do. :P
Title: Re: Twitter embed
Post by: oblivion on August 06, 2016, 11:19:56 pm
Quote from: emanuele  -  I had a moment of madness[1] and put together something fancy. :P

The php code could be just:
Code: [Select]
	$message = preg_replace_callback('~<a href="(http[s]?://twitter.com/\w+/status/\d+)" (.*?)>\1</a>~',
function($matches) {
$matches[2] = str_replace('class="', 'class="twitter_embed ', $matches[2]);
return '<a href="' . $matches[1] . '" ' . $matches[2] . '>' . $matches[1] . '</a>';
},
$message
);
static $load_js = true;
if ($load_is === true)
{
loadJavascriptFile('twitter_embed.jquery.js');
addInlineJavascript('
$(document).ready(function() {
$(".twitter_embed").lazyload();
});');
$load_js = false;
}
put in a function and attached to the integrate_post_parsebbc hook.
Then there is a bit of javascript that is a modified version of https://github.com/tuupola/jquery_lazyload (and is attached here).
The two will work together to embed the twitter post only when scrolling the message appears in the viewport.

I'm too new to modifying ElkArte to make much sense of this, I'm afraid.

"put in a function"?  How do you do this? Put it in an existing php file of functions? And how do you attach to the hook?  jquery_lazyload doesn't exist currently in my installation, so I assume it's just an upload.

goddamnit I'm going to have to learn fudge nuggets, aren't I?


And all those waiting for the 1.0.8.1 fixes will be in front of my door with torches and pitchforks... :P
Title: Re: Twitter embed
Post by: emanuele on August 07, 2016, 12:33:02 am
If nobody else will pack it before, I can have a look at it... let's say before the end of next week.
Title: Re: Twitter embed
Post by: Trekkie101 on August 07, 2016, 06:43:46 pm
Candidate for default  ;D
Title: Re: Twitter embed
Post by: ahrasis on August 08, 2016, 01:50:56 am
Nice but nicer if we can also do vice versa tweet post from elkarte to tweeter. Will be great if can the same with FB as well. And instagram etc...  :D  :D  :D

Title: Re: Twitter embed
Post by: meetdilip on August 08, 2016, 09:22:53 am
Quote from: ahrasis  -  Nice but nicer if we can also do vice versa tweet post from elkarte to tweeter. Will be great if can the same with FB as well. And instagram etc...  :D  :D  :D



You mean auto sharing on social media ?
Title: Re: Twitter embed
Post by: oblivion on August 20, 2016, 01:59:16 am
Quote from: emanuele  -  If nobody else will pack it before, I can have a look at it... let's say before the end of next week.

Hello!  Wondering if you've had any time to think about this.
Title: Re: Twitter embed
Post by: emanuele on August 20, 2016, 07:12:10 am
In the last few days I barely had time to look at the bug reports. xD
Next week. ;)
Title: Re: Twitter embed
Post by: oblivion on September 20, 2016, 08:43:48 pm
 I feel like such a pest!
Title: Re: Twitter embed
Post by: emanuele on September 22, 2016, 08:51:07 pm
Not tested at all.
I have not even idea if it installs. O:-)
Title: Re: Twitter embed
Post by: oblivion on September 23, 2016, 08:40:30 pm
Thank you!  I'll install it on a test system tonight and let you know how it goes!
Title: Re: Twitter embed
Post by: oblivion on March 05, 2017, 07:50:23 am
Sorry for the delay in feedback.

The package throws a "Modification parse error" in the preinstall check.  Is the package complete?
Title: Re: Twitter embed
Post by: Antechinus on March 07, 2017, 11:02:32 pm
Some more detail: the parse error is nothing to do with existing files. It's related to the extraction of /themes/default/scripts/nofollow.twitter_embed.bbcode.js from the package.

The problem is that there is no such file in the package, which makes it a bit difficult to extract the thing. The only js file in the package is twitter_embed.jquery.js, and when I looked at the code in that file it turned out to be a jQuery plug-in for lazy loading images.

Code: [Select]
/*!
 * Lazy Load - jQuery plugin for lazy loading images
 *
 * Copyright (c) 2007-2015 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Project home:
 *   http://www.appelsiini.net/projects/lazyload
 *
 * Version:  1.9.7
 *
 */
Methinks the package has a minor bug or two. :D
Title: Re: Twitter embed
Post by: emanuele on March 07, 2017, 11:43:08 pm
Yes, I used the lazyloading plugin in order to fetch twitter only when it's needed (i.e. when the potential embed enters the visible screen).
Sooo... yes, I guess I didn't pay much attention to the renaming, you can unzip, rename "nofollow.twitter_embed.bbcode.js" to "twitter_embed.bbcode.js", zip again and upload. :)
Title: Re: Twitter embed
Post by: Spuds on March 08, 2017, 01:08:35 am
Since @emanuele‍  is being lazy  :P I repacked it with the js name correction.   

There were also a couple of other little things that I updated, without which you may have gotten a white screen after you installed it.
Title: Re: Twitter embed
Post by: Antechinus on March 08, 2017, 05:24:50 am
Bonzer. I'll give it a whirl and see what else it kills. :D

Edit: Seems to be fine. Tweets work. No errors in log. Throw the deranged on the add-ons site.

Cheers.
Title: Re: Twitter embed
Post by: oblivion on March 08, 2017, 07:11:53 am
Thank you!!!
Title: Re: Twitter embed
Post by: emanuele on March 08, 2017, 09:37:55 pm
Quote from: Spuds  -  There were also a couple of other little things that I updated, without which you may have gotten a white screen after you installed it.
If it was just a couple I consider myself pretty lucky! xD
Title: Re: Twitter embed
Post by: Antechinus on March 11, 2017, 02:47:19 am
Ok, next question: can we haz hard working load? As is not lazy? :D

Coz although I understand the idea of lazy load, and although it's a good one as far as it goes, in practice the jumpy flashing tweets are not exactly the thing to soothe savage beasts. So if they weren't all lazy they would be easier to get along with, and I don't think the number of them per page is likely to be a serious issue.

So AFAICT simply killing this in TwitterEmbedder.integrate.php should do the trick, yes?

Code: (Nuke it from orbit) [Select]
	protected static $load_js = true;

Code: (Exterminate) [Select]
		if (self::$load_js === true)
{
loadJavascriptFile('twitter_embed.jquery.js', array('defer' => true));
addInlineJavascript('
$(document).ready(function() {
$(".twitter_embed").lazyload();
});', true);
self::$load_js = false;
}
Title: Re: Twitter embed
Post by: Antechinus on March 11, 2017, 07:59:29 am
Ok so that doesn't work. However this gets rid of most of the annoying behaviour.

Code: [Select]
		if (self::$load_js === true)
{
loadJavascriptFile('twitter_embed.jquery.js', array('defer' => true));
addInlineJavascript('
$(document).ready(function() {
$(".twitter_embed").lazyload({
threshold : 800
});
});', true);
self::$load_js = false;
}
Title: Re: Twitter embed
Post by: emanuele on March 11, 2017, 05:28:29 pm
Quote from: Antechinus  -  Ok, next question: can we haz hard working load? As is not lazy? :D

Coz although I understand the idea of lazy load, and although it's a good one as far as it goes, in practice the jumpy flashing tweets are not exactly the thing to soothe savage beasts. So if they weren't all lazy they would be easier to get along with, and I don't think the number of them per page is likely to be a serious issue.
It's not that I did them thinking about loading time or some performances issues, just because I had the plugin handy and it seemed easy to make it work that way. :P
Title: Re: Twitter embed
Post by: Antechinus on March 17, 2017, 06:27:18 am
Hey Ema, there has been a little bit of grumbling about the add-on. Yes, I know, it's amazing. Who would have thought that users would grumble about results of someone's coding? Ungrateful mongrels, the lot of them.

Anyway, the first catch is the ?ref_src=twsrc%5Etfw suffix that is added when tweets are linked via social media. Copying the complete url, including suffix, breaks embedding. So as an example this is fine:

Code: [Select]
https://twitter.com/Shareblue/status/842491578191110146

But this breaks the add-on:

Code: [Select]
https://twitter.com/Shareblue/status/842491578191110146?ref_src=twsrc%5Etfw

We have told the grumblers that all they have to do is remove the suffix, but apparently this is a gross infringement of their sacred human rights and there should be a law against it. It's the first step on the road to fascism and will undoubtedly result in kittens having sex with warthogs.

The other catch is if someone is browsing on a phone. In that case Twitter will send them to this:

Code: [Select]
https://mobile.twitter.com/Shareblue/status/842491578191110146

or this:

Code: [Select]
https://.mobile.twitter.com/Shareblue/status/842491578191110146?ref_src=twsrc%5Etfw

Both of those will break the add-on.

So, how hard would it be to tweak the PHP so that it can handle both the mobile prefix (if it exists) and/or the bafflecrud suffix (if that exists) as well as the basic url that it can deal with now?
Title: Re: Twitter embed
Post by: Frenzie on March 17, 2017, 08:33:45 pm
Code: [Select]
https://.mobile.twitter.com/Shareblue/status/842491578191110146?ref_src=twsrc%5Etfw
Is that even a valid URL? But yes, that'd be very easy to do. See line 19 in 0.0.2.

Code: [Select]
$message = preg_replace_callback('~<a href="(http[s]?://twitter.com/\w+/status/\d+)" (.*?)>\1</a>~',

I can't be bothered to look up the specific PHP regex syntax atm, but the basic idea would be something like this:

Code: [Select]
(http[s]?://(\.?mobile\.)?twitter.com/\w+/status/\d+(\?.*)?)

Edit: Or more concretely as part of the whole, like this:
Code: [Select]
$message = preg_replace_callback('~<a href="(http[s]?://(\.?mobile\.)?twitter.com/\w+/status/\d+(\?.*)?)" (.*?)>\1</a>~',

You should probably replace that greedy .* with something slightly safer, for example:
Code: [Select]
\?ref_src=[\w%]+
However, I don't know enough about that ref_src thing to tell.

Also you would need to make those groups non-matching with (?:blabla) or whichever syntax applies, or otherwise name your actually relevant groups. Sorry, that quick drive-by is all I have time for. :)
Title: Re: Twitter embed
Post by: emanuele on March 17, 2017, 08:52:33 pm
Quote from: Frenzie  - 
Code: [Select]
https://.mobile.twitter.com/Shareblue/status/842491578191110146?ref_src=twsrc%5Etfw
Is that even a valid URL? But yes, that'd be very easy to do. See line 19 in 0.0.2.
Yes, it is, nothing particularly wrong with it.
BTW, Twitter is famous for find any kind of funky url, I still remember the fuss for the autolinking when they were using the # as part of the URL and not as the identifier of the beginning of the fragment (that is valid according to the URL specifications).

Quote from: Frenzie  -  You should probably replace that greedy .* with something slightly safer, for example:
Code: [Select]
\?ref_src=[\w%]+
However, I don't know enough about that ref_src thing to tell.
Judging by what I can seen on the internet, I think the first is fine. You can at maximum add the ref_src, bit the . is probably a must:
Code: [Select]
$message = preg_replace_callback('~<a href="(http[s]?://(\.?mobile\.)?twitter.com/\w+/status/\d+(\?ref_src=.*)?)" (.*?)>\1</a>~',
Title: Re: Twitter embed
Post by: Antechinus on March 17, 2017, 11:59:17 pm
Cool. I'll do some testing later and see how it goes.
Title: Re: Twitter embed
Post by: Frenzie on March 18, 2017, 10:36:55 am
Quote from: emanuele  - 
Quote from: Frenzie  - 
Code: [Select]
https://.mobile.twitter.com/Shareblue/status/842491578191110146?ref_src=twsrc%5Etfw
Is that even a valid URL? But yes, that'd be very easy to do. See line 19 in 0.0.2.
Yes, it is, nothing particularly wrong with it.
BTW, Twitter is famous for find any kind of funky url, I still remember the fuss for the autolinking when they were using the # as part of the URL and not as the identifier of the beginning of the fragment (that is valid according to the URL specifications).

Something is wrong with it though. Are you sure you can actually have an empty subdomain? In any case, .mobile.twitter.com doesn't resolve in any browser or tool I've tried, so in the unlikely case it does make sense either they haven't set it up correctly or none of the tools consider a technical loophole in the rules a sensible interpretation.
Code: [Select]
$ ping .mobile.twitter.com
ping: .mobile.twitter.com: Name or service not known
$ ping mobile.twitter.com
PING mobile.twitter.com (199.16.156.107) 56(84) bytes of data.

Edit: https://tools.ietf.org/html/rfc1123#page-13

It says that the first character of a host name can be "either a letter or a digit". Not a nothing. Admittedly I only briefly checked the RFCs that may have superseded this document that's almost as old as I am. I couldn't find anything that seemed relevant, but methinks the only sensible overrides would be widening the definition of "letter" (e.g., to all or at least a great many UTF-8 characters) and allowing longer domain names.
Title: Re: Twitter embed
Post by: emanuele on March 18, 2017, 02:06:08 pm
Ohh... I didn't notice the dot, no it is most likely a typo. The correct address is mobile.twitter.com
Title: Re: Twitter embed
Post by: Frenzie on March 19, 2017, 10:58:31 am
But why would I think a little URL-encoded ^ was invalid? lol :P
Title: Re: Twitter embed
Post by: emanuele on March 19, 2017, 02:36:53 pm
I have no idea. xD
Title: Re: Twitter embed
Post by: Antechinus on March 23, 2017, 11:52:59 pm
Quote from: emanuele  -  Ohh... I didn't notice the dot, no it is most likely a typo. The correct address is mobile.twitter.com
Yup, typo on my part. Sorry about that.

Haven't got around to testing the proposed code yet. Will try to remember.
Title: Re: Twitter embed
Post by: Frenzie on March 24, 2017, 08:22:43 pm
In that case you can simplify the regex to something like this:
Code: [Select]
$message = preg_replace_callback('~<a href="(http[s]?://(mobile\.)?twitter.com/\w+/status/\d+(\?.*)?)" (.*?)>\1</a>~',

I think you can make named groups using (?P<name>stuff to match) if necessary.
Title: Re: Twitter embed
Post by: Jason on April 26, 2018, 07:30:01 pm
Is the addon updated? I get "Modification parse error" for ./themes/default/scripts/nofollow.twitter_embed.bbcode.js
Title: Re: Twitter embed
Post by: emanuele on April 28, 2018, 08:48:00 pm
Hi @Jason which one did you use?
Did you try the one from Spuds https://www.elkarte.net/community/index.php?topic=2937.msg31153#msg31153 ?
Title: Re: Twitter embed
Post by: Jason on April 29, 2018, 04:03:42 pm
@emanuele I used the file which was given by you, now tried Spuds. It installed without any issues.. But once again a noob question. How to embed twitter link. Should i use the Embed Tweet link or Twitter post link?
Title: Re: Twitter embed
Post by: emanuele on April 29, 2018, 10:40:05 pm
I'm not expert of twitter either, I think that if you just put the url of a twit it should just work... I think.
Something like this:
https://twitter.com/ElkArteForum/status/974425972354224128
Title: Re: Twitter embed
Post by: forumsearch0r2 on April 30, 2018, 12:28:47 pm
Twitter supports OEmbed, by the way ...
Title: Re: Twitter embed
Post by: Jason on April 30, 2018, 06:44:52 pm
I tried pasting the link as well as the embed tweet code. It doesn't work
Title: Re: Twitter embed
Post by: emanuele on April 30, 2018, 07:29:04 pm
What a pain... why did the hook name changed? xD

Same considerations done with my first package: I have no idea if it installs properly.
Title: Re: Twitter embed
Post by: emanuele on April 30, 2018, 07:30:28 pm
@forumsearch0r2 it's just a javascript library that uses OEmbed. The php trick is just to add the correct class to the tag.
Title: Re: Twitter embed
Post by: forumsearch0r2 on April 30, 2018, 08:14:15 pm
I wouldn't use JavaScript for that. It would have to be fetched on every page call.
Title: Re: Twitter embed
Post by: emanuele on April 30, 2018, 08:56:44 pm
Yeah, but then it's a problem of the client (and twitter). :P
Title: Re: Twitter embed
Post by: Jason on May 01, 2018, 04:54:44 pm
Sorry emanuele, still the same thing. It displays as link
Title: Re: Twitter embed
Post by: emanuele on May 01, 2018, 11:15:43 pm
Can I see an example?
Title: Re: Twitter embed
Post by: Jason on May 02, 2018, 06:32:30 pm
@emanuele

Title: Re: Twitter embed
Post by: emanuele on May 02, 2018, 09:43:31 pm
A  live one was my idea, can't get much out of a picture. :P
Title: Re: Twitter embed
Post by: forumsearch0r2 on May 02, 2018, 10:03:25 pm
Have I mentioned that mine works?
Title: Re: Twitter embed
Post by: emanuele on May 02, 2018, 10:09:14 pm
Where is it? So I can get rid of another addon to "support"?  8)

BTW there were a couple of other issues. O:-)
Title: Re: Twitter embed
Post by: forumsearch0r2 on May 02, 2018, 10:12:18 pm
Quote from: emanuele  -  Where is it? So I can get rid of another addon to "support"?  8)

The OEmbed one ...
Title: Re: Twitter embed
Post by: Jason on May 03, 2018, 07:27:44 pm
@emanuele sorry again it failed.. and @forumsearch0r2 let me try this addon itself..
Title: Re: Twitter embed
Post by: SHANKS on April 24, 2020, 10:59:53 pm
The plugin does not work