Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  ClosedNew TopicNew Poll

 Twitter BBCode [SOLVED]
#
I am curious if a coder could create a Twitter BBCode.

Something that would allow you to Embed Tweets into posts. When you click on the "More" setting in a tweet it gives you the option to "Embed Tweet" and then gives you some code like this:

CODE
<blockquote class="twitter-tweet" lang="en"><p>Premium not released. But, premium features/pricing page is up: <a href="http://t.co/XZS40k7u1H">http://t.co/XZS40k7u1H</a></p>&mdash; Jcink (@Jcink) <a href="https://twitter.com/Jcink/statuses/459858658999156736">April 26, 2014</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


Which then gives you a fancy little box like this:

user posted image

The BBCode would then be something like this:

[tweet]https://twitter.com/Jcink/status/459858658999156736[/tweet] and it would give you the fancy little box like above. I have no clue if something like this could be created, and is all above my head, which is why I ask if a coder on here could make it work, or if they have another idea on how they could make it work. Doing a Google search I did come across this, but it was abandoned after Twitter changed their API.

So if someone could create this, that would be awesome.....but if it can't be done, I understand. Thanks in advance.

This post has been edited by beermoney: May 31 2014, 02:33 PM
#
From a pure CSS / HTML standpoint I don't see any way that this would work. Maybe someone who has some Javascript knowledge can look it over and see if it's possible? With the way you pull the info from Twitter now, I doubt that there can be a custom BBcode that will exactly replicate the experience, even given some of that fancier coding, but who knows.

signature
user posted image

kindly do not use my site Discord / DM / PM me for support.
#
It's not possible sadly - at least not with the way tweets are embeddable with this method. The only way to do this is for me to try to code this into the system. Reason being that tweets are not truly embedded like for example a youtube video.

Twitter gives you a very static code - notice how it includes the tweet text and everything instead of something more simple.

They probably do this because it saves them tons of resources not having to load the actual tweet from their server over and over.

Unfortunately that doesn't play nice with a BBCode that can be dynamic.

signature
email: admin@jcink.com :: blog: John C.
#
Does JCink support oEmbed? I noticed in their embedding documentation they talk about oEmbed for Developers, where a user can provide a URL and then oEmbed takes care of displaying the content/formatting.

If JCink doesn't, then the original poster could inquire about a feature request for it (if it's possible at JCink, I'm not informed on the particulars of oEmbed).
PM
#
oEmbedding is a spec supported by any website. you wouldn't need to ask for a feature request. but I do not see where twitter supports oEmbed (oEmbed requires the site you want to embed FROM to have it installed)

signature
email: admin@jcink.com :: blog: John C.
#
QUOTE (Jcink @ May 31 2014, 02:54 PM)
They probably do this because it saves them tons of resources not having to load the actual tweet from their server over and over.

That's what I thought as well until I noticed that even if you use that static code, they retrieve the actual tweet from their server. It might still be more efficient because they can retrieve multiple tweets in one request. Also, it might also be more convenient for them than providing an iframe because injecting markup into the page lets it take as much space as needed, whereas you'd have to provide the exact dimensions (width × height) for an iframe.

I've created an iframe that can be used to embed tweets without oEmbed. The page only takes 677 bytes and you can see it in action at http://s9e.github.io/iframe/twitter.min.ht...858658999156736. It uses cross-document messaging to dynamically resize the iframe's height. Here's the iframe code: ({$id} needs to be replaced with the tweet's ID)
CODE
<iframe width="500" height="186" src="//s9e.github.io/iframe/twitter.min.html#{$id}" allowfullscreen="" frameborder="0" onload="var b=this;window.addEventListener('message',function(a){/^https?:\/\/s9e\.github\.io$/.test(a.origin)&amp;&amp;a.data.url&amp;&amp;a.data.height&amp;&amp;b.src==a.data.url&amp;&amp;(b.style.height=a.data.height+'px')});b.contentWindow.postMessage('s9e:init','*')"></iframe>


You can use it if you want, or rehost the external page's code on your domain if you prefer. The unminified source can be found on GitHub: page's code and iframe code.
PM
#
That is really sweet, thanks for posting that JoshyPHP. That was unexpected. Were you just a long time lurker or something that had this saved away?

I added it to a test board and it worked perfectly

So, here's the code + syntax for JFH users in case anyone reads this and doesn't follow:

BBCode Name: tweet

BBCode Type: 1 Param Type

BBCode HTML:

CODE
<iframe width="500" height="186" src="//s9e.github.io/iframe/twitter.min.html#(PARAM1)" allowfullscreen="" frameborder="0" onload="var b=this;window.addEventListener('message',function(a){/^https?:\/\/s9e\.github\.io$/.test(a.origin)&amp;&amp;a.data.url&amp;&amp;a.data.height&amp;&amp;b.src==a.data.url&amp;&amp;(b.style.height=a.data.height+'px')});b.contentWindow.postMessage('s9e:init','*')"></iframe>


And example use:

CODE
[tweet]459858658999156736[/tweet]


Embeds:

https://twitter.com/Jcink/status/459858658999156736

Will probably post this on the resources area later.

signature
email: admin@jcink.com :: blog: John C.
#
AWESOME!!!!!!!! Thank you guys so very much for making this work.
#
This topic has been solved. If you need anymore help please post a new thread. Thanks for choosing Jcink services.

signature

user posted image
YouTube | Email: crystal@jcink.com | Blog: Seriously Lacqueing
DeviantArt
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options ClosedNew TopicNew Poll