On a site I'd need it to show the latest tweet from an account.
Previously, going to Twitter's Goodies page and limiting to one tweet, would accomplish this. Now there new version of Timeline embeds do not seem to have an option for this, so how is it accomplished? I can use the old version 1 embed I have saved but all old ones will stop working next year according to Twitters FAQs, so want to use the new version 1.1 code..
Below is the new code Twitter provides. Just need to know how/where to add "count=1" as I could with the original version.
<a class="twitter-timeline" href="https://twitter.com/example" data-widget-id="0000000000">Tweets by #example</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Here is how to display the latest n tweets. Just change the value in data-tweet-limit.
<a class="twitter-timeline"
href="https://twitter.com/twittername"
data-tweet-limit="1">
Tweets by #twittername</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
jQuery(function($){
$(".tweet").tweet({
join_text: "auto",
username: "seaofclouds",
avatar_size: 48,
count: 3,
auto_join_text_default: " we said, ",
auto_join_text_ed: " we ",
auto_join_text_ing: " we were ",
auto_join_text_reply: " we replied ",
auto_join_text_url: " we were checking out ",
loading_text: "loading tweets..."
});
});
For more options go HERE
Related
Is there any way of building a profile image url with user id or screen name? I store user ids in database but i don't want to store profile image url.
edit:
I don't want to make a api call too. I want to put user_id inside a url like
<img src="https://twitter.com/users/profile_pic?user_id=123"> Is there a url to do this?
With API 1.1 you can achieve this using these URLs:
https://twitter.com/[screen_name]/profile_image?size=mini
https://twitter.com/[screen_name]/profile_image?size=normal
https://twitter.com/[screen_name]/profile_image?size=bigger
https://twitter.com/[screen_name]/profile_image?size=original
Official twitter documentation Profile Images and Banners
Example
https://twitter.com/TwitterEng/profile_image?size=original
will redirect to
https://pbs.twimg.com/profile_images/875168599299637248/84CkAq6s.jpg
As of June 2020, both the accepted answer and avatars.io no longer work. Here are two alternatives:
unavatar.io
(formerly unavatar.now.sh)
Unavatar can get pictures from quite a few different places including Twitter. Replace [screen_name] in the URL below with the Twitter username you want.
<img src="https://unavatar.io/twitter/[screen_name]" />
For example:
<img src="https://unavatar.io/twitter/jack" width="100" height"100" />
If the demo above ever stops working, it's probably because unavatar.io is no longer available.
Unavatar is open source though, so if it does go down, you can deploy it yourself from the GitHub repo — it even has "Deploy to Vercel/Heroku" buttons. The code to fetch Twitter avatars specifically is here, so you could also use that as part of your own backend.
twivatar.glitch.me
⚠️ As of July 2021 this option no longer works, see the one above instead!
If you want an alternative, you can also use twivatar.glitch.me. Replace [screen_name] in the URL below with the Twitter username you want.
<img src="https://twivatar.glitch.me/[screen_name]" />
For example:
<img src="https://twivatar.glitch.me/jack" width="100" height"100" />
If the demo above ever stops working, it's probably because twivatar.glitch.me is no longer available.
By the way, I didn't build either of these services, they were both made by other people.
Introducing the easiest way to get a Twitter Profile Image without using the Twitter API:
Using http://avatars.io/
As #AlexB, #jfred says, it doesn't work at all on mobile devices.
And it's quite a hard way to get a redirected URL using common frameworks like PHP or JavaScript in your single page.
Simply call http://avatars.io/twitter/ruucm at your image tag, like
<img src="https://avatars.io/twitter/ruucm" alt="twt_profile" border="0" width="259"/>
I've tested it with Angular 2+ and it works without any problem.
As of February 20, 2020 it would appear this is impossible. Using the API seems like the only option at the moment. For more info see my question I've opened here: Twitter profile picture images now blocked on most domains
Based on the answer by #Cristiana214
The following PHP snippet can be used to make the https://twitter.com/[screen_name]/profile_image?size=normal trick work on mobile.
Due to twitters redirect to the mobile version of the site links such as https://twitter.com/[screen_name]/profile_image?size=normal get broken on mobile devices
So the script gets the redirect response (to the user avatar) extracts the address then redirects the page itself
if (!isset($_GET['id'])) $_GET['id'] = 'twitter';
$urlget = curl_init();
curl_setopt($urlget, CURLOPT_URL, 'https://twitter.com/' . $_GET['id'] . '/profile_image?size=normal');
curl_setopt($urlget, CURLOPT_HEADER, true);
curl_setopt($urlget, CURLOPT_RETURNTRANSFER, 1);
$res = curl_exec($urlget);
preg_match_all("/location: (.*)/", $res, $found);
header('Location: ' . $found[1][0]);
So this could be accesses as twitteravatar.php?id=twitter which (at time of writing) reloads to https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I_normal.jpg
Not pretty but works.
You can get it using the users/show method of the Twitter API -- it does exactly what you described. You give it a the ID or the screen name, and it returns a bunch of data, including profile_image_url.
I found such a solution with C#:
public string Text_toTextFinder(string text, string Fromhere, string Here)
{
int start = text.IndexOf(Fromhere) + Fromhere.Length;
int finish = text.IndexOf(Here, start);
return text.Substring(start, finish - start);
}
string getPhotoURL(string UserName, string size ="x96")
{
using (WebClient client = new WebClient())
{
client.Headers[HttpRequestHeader.UserAgent] = "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.2 (KHTML, like Gecko) Chrome/15.0.874.121 Safari/535.2";
string htmlCode = client.DownloadString("https://twitter.com/" + UserName);
return Text_toTextFinder(Text_toTextFinder(htmlCode, "<td class=\"avatar\">", "</td>"), "src=\"", "\"").Replace("normal",size);
}
}
For use:
MessageBox.Show(getPhotoURL("screen_name")); //size = 96x96
MessageBox.Show(getPhotoURL("screen_name","normal"));
MessageBox.Show(getPhotoURL("screen_name","200x200"));
MessageBox.Show(getPhotoURL("screen_name","400x400"));
There is no way to do that. In fact Twitter doesn't provide a url to do that like facebook does ( https://graph.facebook.com//?fields=picture)
The issue is report but the status is: 'WontFix', take a look:
https://code.google.com/p/twitter-api/issues/detail?can=2&start=0&num=100&q=&colspec=ID%20Stars%20Type%20Bug%20Status%20Summary%20Opened%20Modified%20Component&groupby=&sort=&id=242#makechanges
Well I'm using a tricky way via PHP Dom Parser
include('simple_html_dom.php');
$html = file_get_html('http://twitter.com/mnckry');
$img = array();
foreach($html->find('img.size73') as $e)
$img[] = $e->src;
foreach($html->find('.profile-header-inner') as $e)
$img[] = str_replace("')", "", str_replace("url('", "", $e->{'data-background-image'}));
echo $img[0];//Avatar
echo "<br>";
echo end($img);//ProfileBG
This will give you something like this;
https://pbs.twimg.com/profile_images/378800000487958092/e04a191de329fcf8d000ca03073ad594_bigger.png
to get 2 other size; for big version remove, "_bigger" for smaller version replace "_bigger" with "_normal"
With version 1.1, use
http://a0.twimg.com/profile_images/XXXXX/afpecvf41m8f0juql78p_normal.png
where XXXXX is the User Id
I want to display the tweets of an account in my website. The problem is that the tweets appear always with the format http://t.co/..., instead of the full link as desired by me.
For instance, I obtain:
the rules of the game are all implemented - local players can play together in this link: http://t.co/Nf7j4TaB
if you are very curious... then, here is the link to the xodul's section under development: http://t.co/6Zbti36T
etc...
and I want that these tweets appear like this:
the rules of the game are all implemented - local players can play together in this link: http://xodul.com/tests/js/
if you are very curious... then, here is the link to the xodul's section under development: http://xodul.com/tests
etc...
To make my application I've followed the instructions from:
Simplest PHP example for retrieving user_timeline with Twitter API version 1.1 (from here we can get the text of each tweet, with the links coming in the format: http://t.co/...)
Rendering links in tweet when using Get Statuses API 1.1 (the code of the highest scored answer, in this link replaces, for instance, the text "http://t.co/Nf7j4TaB" with the hyperlink "<a target='_blank' href='http://t.co/Nf7j4TaB'>http://t.co/Nf7j4TaB</a>")
I appreciate very much any help on how to render the twitter's links!
With the tutorial you followed you can use these attributes to show actual link.
Note: In API v1.1, entities will always be included unless you set include_entities to False or 0.
The urls entity
An array of URLs extracted from the Tweet text. Each URL entity comes with the following attributes:
url: The URL that was extracted
display_url: (only for t.co links) Not a URL but a string to display instead of the URL
expanded_url: (only for t.co links) The fully resolved URL
indices: The character positions the URL was extracted from
https://dev.twitter.com/docs/tweet-entities
JavaScript only solution for now to get Twitter posts on your site without using new 1.1 API and actually returns the full url in posts, not the twitter shortened version :-) http://goo.gl/JinwJ
Thank you for your answers.
After analyzing the JSON in the suggested link (https://dev.twitter.com/docs/tweet-entities), I wrote a solution to the exposed problem:
// ...
$twitter_data = json_decode($json); // last line of the code in: http://stackoverflow.com/questions/12916539
// print the tweets, with the full URLs:
foreach ($twitter_data as $item) {
$text = $item->text;
foreach ($item->entities->urls as $url) {
$text = str_replace($url->url, $url->expanded_url, $text);
}
echo $text . '<br /><br />';
// optionally, here, the code from: http://stackoverflow.com/questions/15610968/
// can be added, too.
}
Friends,
I am going crazy with this issue, I hope you have the answer for me as I have searched wide for this issue. I have a WEB site that has implemented both the 'Like' button and the 'Comments' button. The issue I'm having is actually two-fold:
First:
The usual 'Admin Page' link that goes beside the 'Like' button once the Admin (me) has liked the page is not always present... I can't figure why, because they are exactly the same PHP pages with different info filled from the DB, but they have identical structure. So I don't understand why:
www.rafaelpolit.com/inicio/index.php?sid=14&gim=10
Shows me the Admin Page link, while
www.rafaelpolit.com/inicio/index.php?sid=14&gim=183
Doesn't.
Any ideas?
Second:
The above problem would not be much of an issue if the procedure described on the Open Graph Protocol page (https://developers.facebook.com/docs/opengraph/#publishing) under Publishing would actually work! Here's the actual problem:
My page uses two parameters in the URL to define the page content: one is the section, the other is the image ID.
My other pages that use a single URL attribute, work fine!!! So, if I access (I am using the graph for simplified purposes):
https://graph.facebook.com/http%3A%2F%2Fwww.rafaelpolit.com%2Finicio%2Findex.php%3Fsid%3D106
It correctly shows:
{
"id": "117419061672096",
"name": "Rafael P\u00f3lit - Macro y Objetos",
"picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/188186_117419061672096_2606222_s.jpg",
"link": "http://www.rafaelpolit.com/inicio/index.php?sid=106",
"likes": 2,
"category": "Unknown",
"website": "http://www.rafaelpolit.com/inicio/index.php?sid=106",
"description": "-",
"can_post": true
}
But if I access the graph for one of the URLs with multiple arguments, like:
https://graph.facebook.com/http%3A%2F%2Fwww.rafaelpolit.com%2Finicio%2Findex.php%3Fsid%3D14%26gim%3D10
It truncates the second argument and shows:
{
"id": "http://www.rafaelpolit.com/inicio/index.php?sid=14"
}
As you can see if you enter this though:
graph.facebook.com/159684077425429
The Facebook page is actually correctly working!!! :( Is there a way to actually know a Page_ID if I cannot access the page from any place other than my own site?
So, to sum up my issue:
For some pages I don't get the Admin Page link
For those pages, I have no way of knowing the Page_id
The graph options are not working for pages that have multiple URL arguments/parameters
In the exact same fashion, the https://graph.facebook.com/feed option does not send messages to the people that have 'liked' a page for those pages that have multiple URL parameters, it works fine for those with single parameter.
How do I access the information of a page with two or more parameters?
My final goal is to make something like this actually WORK!:
<?php
$ogurl = urlencode("http://www.rafaelpolit.com/inicio/index.php?sid=14&gim=10");
define("FACEBOOK_APP_ID", "15xxxx84127xxxx");
define("FACEBOOK_SECRET", "xxxx5391830xxxx744b171f0d4b5xxxx");
$mymessage = "Thank you for 'Liking' my Picture.";
$access_token_url = "https://graph.facebook.com/oauth/access_token";
$parameters = "grant_type=client_credentials&client_id=" . FACEBOOK_APP_ID .
"&client_secret=" . FACEBOOK_SECRET;
$access_token = file_get_contents($access_token_url . "?" . $parameters);
$apprequest_url = "https://graph.facebook.com/feed";
$parameters = "?" . $access_token . "&message=" .
urlencode($mymessage) . "&id=" . $ogurl . "&method=post";
$myurl = $apprequest_url . $parameters;
$result = file_get_contents($myurl);
// output the post id
echo "post_id" . $result;
?>
I repeat: This works FINE! if I use the URL of pages with a single URL parameter, it does NOT work if I use URL of pages with multiple parameters.
Any insight? This is a complex issue and I am not a native English speaker, so forgive the extension and any confusion. I appreciate all and every help you may provide!
Thanks a lot,
Rafael Pólit.
ps. Please forgive the non-working links, since I'm new only two of them could actually be links. Most work as copy paste links though, except the graph link which needs https:// in the beginning. Thanks for understanding.
Edit 1:
In response to #Abby 's comment bellow, this is the code I'm using (hopefully formatted instead of the responses in my comments) to insert the button:
<div class="fb_cont ui-corner-all" style="width:706px">
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
window.fbAsyncInit = function() {
FB.init({appId: '154581841273133', status: true, cookie: true, xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
//]]>
</script>
<div class="fb_cont_int" style="padding:5px;">
<div class="fb_likeDiv" style="width:240px;">
<div class="fb-like" data-href="http://www.rafaelpolit.com/inicio/index.php?sid=14&gim=183" data-send="false" data-width="240" data-show-faces="true" data-colorscheme="dark" data-font="tahoma"></div>
</div>
<div class="fb_commentDiv" style="width:446px;">
<div class="fb-comments" data-href="http://www.rafaelpolit.com/inicio/index.php?sid=14&gim=183" data-num-posts="4" data-width="446" data-colorscheme="dark"></div>
</div>
<div class="dummy"><!-- --></div>
</div>
</div>
Thanks again #Abby for looking into my issue.
I want to implement like for facebook and share for twitter with custom text. (Means text is already predefined). How can i do that.
I tried these:--
gem 'facebook_share'
addthis.com // as their promotion they are adding #addthis which is obvious for using there services but i want to have that.
Try these two. No need to include any sdk, plugin etc. Nothing. Just copy and paste it on ur view file.
For facebook:--
<iframe src="http://www.facebook.com/plugins/like.php?href=google.com&layout=standard&show_faces=true&width=450&action=recommend&font=arial&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>
for twitter:--
Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
For twitter:
<a href='https://twitter.com/share?url=google.com&text=Signup>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='//platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','twitter-wjs');</script>
For facebook: you can use the feed method API:
function streamPublish(name, hrefTitle, hrefLink, userPrompt){
FB.ui({ method : 'feed',
message: userPrompt,
link : hrefLink,
caption: hrefTitle,
picture: 'https://www.google.com/images/srpr/logo3w.png'
});
}
function publishStream(){
streamPublish("Stream Publish", "Google", "http://google.com/", "Check it out");
}
Hope you are having a good time.
I am creating a website where when users Tweet a wordpress blog entry then they get points on the websites.
So basically, if a user Tweets that entry on his Twitter then we would give him some points to use on the website (not money). Although this thing is plausible with Facebook but not with Twitter in my knowledge.
I am willing to try to both ways by Twitter Tweet Button or TweetMeme Retweet Facility. However, I could not find a facility for a callback at neither of these.
I am implementing a similar functionality in Facebook and I can see the light at the end of the tunnel with using FBML JS SDK. HOwever, if something similar can be achieved with Twitter then it would be awesome.
Would love to hear more from you guys,
Kind Regards,
Khuram
They've fixed this with the intents function:
https://dev.twitter.com/pages/intents-events
twttr.events.bind('tweet', function(event) {
// Do something there
});
or for clicking
twttr.events.bind('click', function(event) {
var click_type = event.region;
});
using Twitters #anywhere api, you can set an onTweet function that does something when someone tweets.
here is a 6-step tutorial, see number 4
A default tweetBox can be called after the element with the comments class with the following snippet.
twttr.anywhere(function(twitter) {
twitter(".comments").tweetBox();
});
So if you want a custom label, content, and a callback when the tweet has been sent, use this code.
twitter(".comments").tweetBox({
label: 'What do you think about this article?',
defaultContent: '#nettuts ',
onTweet: function(plain, html){
// Actions when tweet is sent
}
});
opening tweet intent pop from JS code will send a callback. You need to put your tweet URL in herf of anchor tag
HTML:
<a target="_blank" href="https://twitter.com/intent/tweet?text=itismytext&url=http://google.com"> twitter share</a>
JavaScript:
$(document).ready(function(){
twttr.events.bind('tweet', function(event) {
console.log(event);
// OR
alert(JSON.stringify(event));
});
});