We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Locked Topic
  • Pages:
  • 1
  • 3
[ C ] Embedding a tweet/instagram post
Topic Started: Dec 23 2014, 05:18 PM (2,290 Views)
slothly
Member
[ * ]
Would it be possible to embed a tweet/instagram picture in a post?

Here's what it would look like:

Twitter:
Posted Image

Instagram:
Posted Image

The developers of twitter have a documentation on embedding tweets which might be useful: https://dev.twitter.com/web/embedded-tweets

Likewise for instagram: http://blog.instagram.com/post/55095847329/introducing-instagram-web-embeds

And would it also be possible to simply post the link to the tweet/instagram and have it automatically embedded in the post? Similar to Cory's code on automatically embedding youtube videos with no BBcode (http://support.zathyus.com/topic/5153430/)

I think this would be a great addition for a forum so if anyone could help out here, it would be deeply appreciated. Thanks for your help guys.
Edited by slothly, Dec 23 2014, 05:23 PM.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
Your request doesn't seem likely to happen..
http://support.zathyus.com/topic/5171246/1/#new
Offline Profile Goto Top
 
slothly
Member
[ * ]
Kankuro
Dec 26 2014, 01:52 PM
Your request doesn't seem likely to happen..
http://support.zathyus.com/topic/5171246/1/#new
the twitter embed bbcode works until you quote it.

Posted Image

when you quote this post, it looks like this:

Posted Image

Any way to fix this? I'm using Cory's code in that thread.
Offline Profile Goto Top
 
Kankuro
Member Avatar
かんくろ
[ *  *  *  *  * ]
That would be something Cory would have to do. I'm still learning coding lol.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Change this:
Code:
 
$('td:contains([/twitter]), div.search_results:contains([/twitter])').each(function () {
To this:
Code:
 
$('td:contains([/twitter]):not(:has(textarea)), div.search_results:contains([/twitter])').each(function () {
Offline Profile Goto Top
 
slothly
Member
[ * ]
That code works, thank you. It no longer turns into html code when you quote/edit it.

Is there a way to simply the BBcode syntax? right now its
Code:
 
[twitter=Name; Date; Link]Post[/twitter]

I found out that I can add random characters to the name, date, and post area. The embedded tweet will still show up in the post if I supply the source link.
so instead can it be:
Code:
 
[twitter=Link][/twitter]


Edited by slothly, Dec 29 2014, 12:36 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Try this instead for that format:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('td:contains([twitter=):not(:has(textarea)), div.search_results:contains([twitter=)').each(function () {
$(this).html($(this).html().replace(/\[twitter=(.+?)\]/gi, '<blockquote class="twitter-tweet"><a href="https://twitter.com/$1"></a></blockquote>'));
if ($(this).find('blockquote.twitter-tweet a').length) {
if ($(this).find('blockquote.twitter-tweet a').attr('href').split(' ')[1].length) {
var sSpace = $(this).find('blockquote.twitter-tweet a').attr('href').split(' ')[1];
$(this).find('blockquote.twitter-tweet a').attr('href', 'https://twitter.com/' + sSpace);
}
}
});
//]]>
</script>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
With the above code, you don't even need the ending Twitter tag.
Offline Profile Goto Top
 
slothly
Member
[ * ]
Cory
Dec 29 2014, 11:43 PM
Try this instead for that format:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('td:contains([twitter=):not(:has(textarea)), div.search_results:contains([twitter=)').each(function () {
$(this).html($(this).html().replace(/\[twitter=(.+?)\]/gi, '<blockquote class="twitter-tweet"><a href="https://twitter.com/$1"></a></blockquote>'));
if ($(this).find('blockquote.twitter-tweet a').length) {
if ($(this).find('blockquote.twitter-tweet a').attr('href').split(' ')[1].length) {
var sSpace = $(this).find('blockquote.twitter-tweet a').attr('href').split(' ')[1];
$(this).find('blockquote.twitter-tweet a').attr('href', 'https://twitter.com/' + sSpace);
}
}
});
//]]>
</script>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
With the above code, you don't even need the ending Twitter tag.
Thank you, the new syntax works and it's a lot easier embedding a tweet with this new twitter tag. The only problem is that the first embed tweet posted on the page breaks the rest of the posts with the twitter bbcode. If I post first with the embed tweet, it will show up but if someone else tries to embed another tweet in their post on the same page, only the bbcode syntax shows up. Is there a way to fix this?

Sorry for the inconvenience, I really appreciate all your help
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
See what using just this does:
Code:
 
<script type="text/javascript">
//<![CDATA[
$('td:contains([twitter=):not(:has(textarea)), div.search_results:contains([twitter=)').each(function () {
$(this).html($(this).html().replace(/\[twitter=(.+?)\]/gi, '<blockquote class="twitter-tweet"><a href="https://twitter.com/$1"></a></blockquote>'));
});
//]]>
</script>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Offline Profile Goto Top
 
sneakyfreaky
Member
[ *  * ]
I like this code alot and would love to have it for mine as well, Cory. However I'm not not sure if placed in the right box (Below the Board)? I tried it and I copied an embedded link from twitter and posted directly in a post on my test board and it just comes up as html coding. Am I missing a step?

What am I doing wrong?
Edited by sneakyfreaky, Jan 1 2015, 02:53 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You just need to use the direct URL of the status without 'https://twitter.com/' since that is added automatically.
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
Where do we install this code? It'd come in major handy on my board, instead of screen capturing the tweets, etc. since I've tried installing all syntax and none of them are working. :-/
Edited by extraordinary, Jan 1 2015, 11:37 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Here should be fine:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
I tried that, but it still doesn't work, no matter what BBC Code I use, etc.
Offline Profile Goto Top
 
sneakyfreaky
Member
[ *  * ]
Cory
Jan 1 2015, 10:47 PM
You just need to use the direct URL of the status without 'https://twitter.com/' since that is added automatically.
Not sure what you mean, Cory. This is what is in the embedded box on twitter when I copy it. It doesn't work for me. It posts it as all html. This is an example of a tweet just to show you what it is I'm directly quoting and coping onto my test board.

<blockquoteclass="twitter-tweet" lang="en"><p>Me when my days are just too long. <a href="https://t.co/LvbNOgBigs">https://t.co/LvbNOgBigs</a></p>— Cute Emergency (@CuteEmergency) <a href="https://twitter.com/CuteEmergency/status/551403700426534912">January 3, 2015</a></blockquote> <script asyncsrc="//platform.twitter.com/widgets.js" charset="utf-8"></script>



....do I have to do anything else? I just copy and pasted on my board without doing anything else. Do I have to wrap it in a BBCode? Or do I have to enable a button for this to work??
Edited by sneakyfreaky, Jan 3 2015, 03:32 PM.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
ZetaBoards - Free Forum Hosting
Join the millions that use us for their forum communities. Create your own forum today.
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 3