How to add Twitter Expanded Tweets? (was: twitter media preview card for my site?) - twitter

I googled a lot about how to make twitter media preview for my website entities if they are linked in a tweet like images below:
Any idea where can I find some documentation about it? Or a tutorial? Is this possible or these media/site previews are hardcoded in twitter?
EDIT:
so, what I need:
If someone links my site on twitter, my widget appear under the tweet, like below:
UPDATE 2012-06-13
It appears this is an Expanded Tweet - -what the requirements are to integrate these expansions into Twitter are do not appear to be displayed - but this sure is interesting.

Nope your in luck. They're not hardcoded into Twitter, they're available in the JSON response. You actually have in your post the word you need to google for entities.
You can add include_entities=1 to the end of most REST api calls and it will give you expanded information about the URL's contained within the JSON. It will split out all the URL's where you can parse out the Youtube links for example. The JSON also includes a special media_url entity but it only works for pictures. In any case, you can still parse out the media easily like youtube with a regex match because you get the URL's split out nicely with this include_entities=1 parameter.
example call :
http://api.twitter.com/1/statuses/user_timeline.json?screen_name=twitterapi&include_entities=1
more documentation : https://dev.twitter.com/docs/tweet-entities
answer edited below based on clarification:
Editing Twitter itself with previews is impossible and it's also ineffective. 75% of traffic to Twitter happens outside of Twitter.com. However the most probable solution to achieving this request would be to download a browser extension.
This extension for example enbales previews of webpages directly in the users stream content preview pane on Twitter.com
https://chrome.google.com/webstore/detail/oijgblonhcagdhfbgjilnpjipmijimmn

Related

Adding multiple youtube playlists to site just like youtube has em

this is desired output for site
this is how youtube displays multiple playlist...how can I add this just like they have it to my site AND to linkedin profile?
embedding the share html link just brings in playlist but it does not display properly....I need it to appear exactly like it does in attached pic???
Linking to your LinkedIn profile, I have not tried. So perhaps someone else can tell you.
As to having a section like the one you showed to be on your own site is doable.
Firstly you will need to collect the playlist ID's that you are going to use.
Then you will need to get the video ID's from the video's in each Playlist.
This can be done with the API.
As to the displaying it like on youtube, you will need to do that yourself with one or more combination of table's, div's and CSS. Then With the information you grabbed in the APi, populate it.
Best to do it in a loop so as to be done all at the same time. Then put it to the page where you require it to be.

How to intergrate a single tweet into your website

Right now im building a simple html/css site for a friend. The homepage is a series of grid block divs that hold some content.
There are currently 3 block divs we have marked for social media posts. So for example, he wants his latest tweet to appear in one of those divs. His latest instagram post to appear in another and facebook in the last.
We can ignore facebook for the time being as I'm only focusing on the twitter/instagram for now.
I'm struggling with where to begin for this project. In the past I have only embedded twitter timelines, Instagram posts using widgets etc....nothing too complicated.
But for this project I will need separate stripped down posts, ie: just the plain text from his tweet inside the twitter div. The image from his Instagram post as the background image on the Instagram block etc...
I've spent the last few hours trying to get my head around oEmbed, and I can safely say I'm failing miserably.
I'm actually more confused now then before I started, so if any kind soul could give me a dummies guide to how I can approach this, that would be absolutely amazing.
Thank you!
You can acheive a single embedded tweet using an embedded timeline.
To get just one tweet, use the data-tweet-limit attribute on the embed tag, as detailed here:
https://dev.twitter.com/web/embedded-timelines/parameters
For example:
<a class="twitter-timeline" href="https://twitter.com/TwitterDev" data-widget-id="some_id" data-tweet-limit="1"></a>
According to twitter's documentation, that is the recommended way of getting tweets onto websites. From your description of the use case, I'd highly recommend just using Twitter's official widget.
If you really want to use Twitter's REST API and generate your page server side, I'd check out this stack overflow question as a starting point:
Setting up Twitter API, getting the last few Tweets
Hope that helps!

How to get links in comments from the YouTube api following the move to Google+ comments

In the new YouTube Google + comments system how can I retrieve comments that contain links.
For example if someone posts a link to another youtube video as follows:
http://www.youtube.com/watch?v=AZNHuFjnmUo
This gets converted to a link by the google plus system. The title of the video is shown as the text rather that the url. i.e. The html shown within the comments is this:
Francis HATES Google+
However the api for that comment only returns the title of the video which is pretty useless seeing as I want to get the link too. I am guessing that the system converts the url into an <a> tag which is stored in the database but then the api strips out the html when its requested so it only returns the videos title.
I have posted a defect here:
https://code.google.com/p/gdata-issues/issues/detail?id=5500
But that bug list seems to have very little activity going on in terms of responses to issues.
So is there another way to get the data I need?
What you can do while this bug remains is to extract the comment id and use it in the Google+ API with an activities.get request. This will return the full post with all links.
A bit cumbersome since it needs one request for each comment you want to check, but it seems to be the only way while the bug remains.
To take an example from the video you linked in the issue:
This YouTube comment returned by the API includes a YouTube link:
http://gdata.youtube.com/feeds/api/videos/rgkDKeSc-1o
/comments/z12hvvcgxznkufyo304ci1iqlnandzxjpes
You can use the z... ID in a request to the Google+ API:
https://developers.google.com/apis-explorer/#p/plus/v1/plus.activities.get?activityId=z12hvvcgxznkufyo304ci1iqlnandzxjpes
Which includes the full post including links.

Change tiny urls to expanded url inside tweet

I am getting Twitter tweets in my website using v1.1 user timeline API, but the problem is the URLs tweeted are displaying in short form like t.co... format.
Now I want to display expanded URL instead of tiny URLs, so how can I can do this? Please give me a solution.
Note: I referred Simplest PHP example for retrieving user_timeline with Twitter API version 1.1, this questions in stackoverflow for getting tweets.

Follow and Scrape Links In Tweets with Rails

I'm currently parsing twitter feeds through my rails app and wondering how it would be possible to follow links in the tweets and scrape the external content (for example, if the tweet contains a link to an article on TechCrunch, follow that link to the article and scrape the title and body content of the article). Flipboard for iPad is a perfect example of this.
I'm familiar with screen scraping using Nokogirl / Mechanize, but trying to figure out how to accomplish this in a way it could work regardless of where the link in the tweet is linking to (whether it be to TechCrunch, or Flickr, etc...).
Any thoughts / insights would be much appreciated!
Many of the major content providers provide a oembed endpoints. Take a look at the oembed_links gem. From the readme:
It allows you to easily parse text and
query configured providers for embedding information on the links
inside the text. A sample configuration file for configuring the
library has been included (oembed_links_example.yml), though you
may also configure the library programmatically (see rdocs).
If you use oembed_links in conjuction with http://oohembed.com/ you'll have dozens of content providers handled for you. You can easily write a custom provider to handle the rest.

Resources