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
  • 2
[ C ] Embedding a tweet/instagram post
Topic Started: Dec 23 2014, 05:18 PM (2,291 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
 
Replies:
Skyon Archer
Member Avatar
Member
[ *  *  *  * ]
I believe what he's saying is you don't add the entire URL from the browser address bar.

For example, when looking at a tweet, the address bar looks like this:

Quote:
 


You would NOT use the https://twitter.com/ from the URL. Your bbcode should look like this:

Quote:
 
[twitter=TierraHosting/status/551501880140890112]


Notice that the https://twitter.com/ is missing?

Try doing it that way and it should work.
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
Skyon Archer
Jan 3 2015, 08:39 PM
I believe what he's saying is you don't add the entire URL from the browser address bar.

For example, when looking at a tweet, the address bar looks like this:

Quote:
 


You would NOT use the https://twitter.com/ from the URL. Your bbcode should look like this:

Quote:
 
[twitter=TierraHosting/status/551501880140890112]


Notice that the https://twitter.com/ is missing?

Try doing it that way and it should work.
Works, but when I try to center the code it doesn't work. Are we unable to center it?
Offline Profile Goto Top
 
sneakyfreaky
Member
[ *  * ]
Skyon Archer
Jan 3 2015, 08:39 PM
I believe what he's saying is you don't add the entire URL from the browser address bar.

For example, when looking at a tweet, the address bar looks like this:

Quote:
 


You would NOT use the https://twitter.com/ from the URL. Your bbcode should look like this:

Quote:
 
[twitter=TierraHosting/status/551501880140890112]


Notice that the https://twitter.com/ is missing?

Try doing it that way and it should work.
Okay, that helped, it works. I wouldn't have known how to do all that if you didn't strip the steps down for me like that.

Does Cory's code add the button that I can enable so I don't have to type the code in like below?


Code:
 
[twitter=............ ]



Also I notice when I select not to show the media (photo or video) it still shows up and how can I can control how big the embedded tweet is when it gets posted? I find it too big and it might stretch the board for those using an older browser on my board.
Edited by sneakyfreaky, Jan 3 2015, 09:54 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Skyon Archer: Thanks for explaining it.

extraordinary: How did you try to center it?

sneakyfreaky: Use this instead to add the BBCode button:
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>'));
});

$('#c_bbcode button:last').after(' <button type="button" onclick="twitter()">Twitter</button>');

function twitter() {
var tweet = window.prompt('Insert the Twitter status URL without \'https://twitter.com/\'', '');
ZetaInsert('[twitter=' + tweet + ']');
}
//]]>
</script>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
Offline Profile Goto Top
 
sneakyfreaky
Member
[ *  * ]
Thanks Cory. That worked. Can you assist me with my other two issues? How do I get it to post without the media selected? And also how do I make the embedded tweet post much smaller? Like the original post in this thread? Thanks.
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
Cory
Jan 3 2015, 09:58 PM
extraordinary: How did you try to center it?
[ CENTER ][ Twitter = ] (without spaces, of course)
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
sneakyfreaky: Add this to the Javascripts wrapper to specify a width and height:
Code:
 
<style type="text/css">
iframe[id*="twitter-widget-"] {
width: #px !important;
height: #px;
}
</style>
Replace the number signs (#) as necessary.

What 'media' are you referring to?

extraordinary: Add this to the Javascripts wrapper:
Code:
 
<style type="text/css">
span[style*="center"] iframe[id*="twitter-widget-"] {
display: inline !important;
}
</style>
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
Cory
Jan 3 2015, 10:25 PM
sneakyfreaky: Add this to the Javascripts wrapper to specify a width and height:
Code:
 
<style type="text/css">
iframe[id*="twitter-widget-"] {
width: #px !important;
height: #px;
}
</style>
Replace the number signs (#) as necessary.

What 'media' are you referring to?

extraordinary: Add this to the Javascripts wrapper:
Code:
 
<style type="text/css">
span[style*="center"] iframe[id*="twitter-widget-"] {
display: inline !important;
}
</style>
I put in in several places and it killed the code all-together.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
What do you mean by 'killed' the code and did you specifically put it in the Javascripts wrapper of the Board Template?

It worked fine for me on my test board.

By the way, in your previous post you showed me the code that you used and you did not input the ending center tag, like so:
Code:
 
[CENTER][Twitter=][/CENTER]
Offline Profile Goto Top
 
sneakyfreaky
Member
[ *  * ]



This is what I meant, Cory. When I go to get the embedded code for a tweet, it takes me to page pictured below. That embedded code posts the tweet in its entirety.

http://i60.tinypic.com/m8pbg3.jpg

I want the option however to post the truncated version below. However, when I deselect the media - it still posts the tweet in its entirety. What do I have to not copy to get the truncated version to post?


http://i58.tinypic.com/16qq7d.jpg
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
Cory
Jan 3 2015, 10:39 PM
What do you mean by 'killed' the code and did you specifically put it in the Javascripts wrapper of the Board Template?

It worked fine for me on my test board.

By the way, in your previous post you showed me the code that you used and you did not input the ending center tag, like so:
Code:
 
[CENTER][Twitter=][/CENTER]
Because on my board it normally inputs itself at the end, so I usually don't include it.

edit; Whoops. I put it in the wrong place, like the idiot I am. I put it in the script for the Twitter coding, not in the Javascript. It works... Cory, you're f**king amazing; so sorry if I annoyed you!
Edited by extraordinary, Jan 3 2015, 10:46 PM.
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
sneakyfreaky: Please post the Twitter BBCode you're trying to use.

extraordinary: Glad you managed to figure it out.
Offline Profile Goto Top
 
sneakyfreaky
Member
[ *  * ]
Cory
Jan 3 2015, 10:53 PM
sneakyfreaky: Please post the Twitter BBCode you're trying to use.

extraordinary: Glad you managed to figure it out.
The full code:


Spoiler: click to toggle



But I'm using this as it was taught to me above to only use:



CUTEST_ANlMALS/status/551559913026375681
Offline Profile Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
I'm not sure if there's really much you can do for the BBCode format, at least not that I know of. It seems it uses the exact format that's on the Twitter status page.
Offline Profile Goto Top
 
extraordinary
Member
[ *  * ]
Is there anyway to fix how images are presented in the embedding? The quality they appear in is quite low, even when the original is of the highest quality.
Offline Profile Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Closed Requests · Next Topic »
Locked Topic
  • Pages:
  • 1
  • 2