Twitter Tweet or ReTweet Callbacks - twitter

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));
});
});

Related

Facebook Share and Share on Twitter in Rails

On my landing page I want users to be able to Share on Facebook and Share on Twitter that page with a particular message. I would like to be able to know when they have actually post it on Facebook and/or Twitter (any way to get the callback).
What is the correct way to add a Facebook Share link in Rails? I want to have my own button.
I have taken a look at Koala but I am wondering if it is too much because I just want to be able to Share that landing page. I don't want to provide any kind of authentication or anything more complex. The only tricky part is that I need to know when they have actually shared.
Thanks
You can use external service like sharethis,addthis with some option,
For facebook you can use own way of sharing for this by registering with facebook app
consider following example
<a href="#" onclick='postToFeed("<%= image_url%>","<%= somte text %>"); return false;'>
<%= image_tag("btn_fb.png" , :alt=>"Facebook") %>
</a>
<script type="text/javascript">
FB.init({appId: APP_ID", status: true, cookie: true});
function postToFeed(img,name) {
// calling the API ...
var obj = {
method: 'feed',
// redirect_uri: 'http://localhost:3000',
link: 'http://url/',
picture: img,
name: 'NAME',
caption: 'CAPTION',
description: DESCRIPTION
};
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>

Counting clicks to external links with rails

I have Entry model with url field, which contains link to external site.
In view I list these links, and now I'd like to start counting when someone clicks it, and keep this info in database. What's the best way of doing it?
You can easily use google analytics to track outbound links: http://support.google.com/analytics/bin/answer.py?hl=en&answer=1136920
If that is not an option you will need to add some javascript to your links make an ajax request to the server to increment the count before transferring the user to the new url. Something similar to this jquery code:
$('a').click(function(){
var stored_ulr = $(this).attr('href');
$.ajax({
url: #your server url to increment count,
data: #data you need to send,
success: function() { window.location = stored_url; },
});
return false;
});
The above code is just a general outline. You will have to fill in the blanks and make it work for your needs.

jQuery mobile and Google Analytics - single-page template

I didn't find an answer to my question anywhere and I know nothing about javascript, so I can't figure it out myself.
If I have jQuery mobile website built so that every single page is in separate html file (single page template). May I use standard asynchronous Google Analytics code with it, or do I have to make modifications similar to those used in multi page template?
Would be very thankful if someone could answer this question.
Yes, you can use the standard Google Analytics code. You will however, need to "push" certain page views to Google Analytics because of the way jQuery Mobile handles page navigation.
For example, if you have a Contact form on your site at contact.html that, once submitted, goes to a process.php page, and then after completing, the user arrives at thank-you.html, you will need to call some JavaScript to "push" the pageview to Google Analytics.
For example, if your jQuery Mobile page element (data-role="page") has id="thank-you", then I'd use this:
<script type="text/javascript">
$(document).delegate('#thank-you', 'pageshow', function () {
//Your code for each thank you page load here
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/thank-you.html']);
});
</script>
UPDATE:
I would put this in your script.js file which is included in the head after you load jQuery and jQuery Mobile. This fires on each data-role="page" pageshow event, and is currently working on my live projects just fine.
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
hash = location.hash;
if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {
}
});

Embed youtube comments and like

I was wondering if it's possible to embed youtube videos' comments and like button with the video?
If there is such thing, how can I do that or where can I get more info? Thanks
Here you can see an example of how to get and display the video comments
Getting Youtube Video Information using javascript/jquery
and in the Topic Explorer project you can see how to add a 'like' or add the video to your favorites:
https://code.google.com/p/yt-topic-explorer/source/browse/app/views/main.html
<button ng-click="addToList($event.target, 'likes', videoResult.id)">{{'LIKE'|i18n}}</button>
<button ng-click="addToList($event.target, 'favorites', videoResult.id)">{{'FAVORITE'|i18n}}</button>
and in:
https://code.google.com/p/yt-topic-explorer/source/browse/app/scripts/controllers/main.js
$scope.addToList = function(target, listName, videoId) {
var listId = $rootScope.relatedPlaylists[listName];
target.textContent = topicExplorerApp.filter.i18n('ADDING');
target.disabled = true;
youtube({
method: 'POST',
service: 'playlistItems',
params: {
part: 'snippet'
},
body: {
snippet: {
playlistId: listId,
resourceId: {
kind: constants.VIDEO_KIND,
videoId: videoId
}
}
},
callback: function(results) {
if ('error' in results) {
target.textContent = 'Error';
} else {
target.textContent = topicExplorerApp.filter.i18n('ADDED');
}
}
});
};
YouTube does not have any embed code that you can use to embed comments. So basically there are 2 options to embed comments -
1. Use the YouTube API to embed and post comments. This will need a good coding knowledge.
To get comments use this endpoint
GET https://www.googleapis.com/youtube/v3/commentThreads
To add comments use this endpoint
POST https://www.googleapis.com/youtube/v3/playlistItems
2. Or you can use a ready-made plugin that allows this functionality. Here is a small demo of the Youmax plugin that will list comments as well as allow you to add comments.
EDITED: On Feb,2016 YT has stopped the solution bellow from working :-( I'll keep it here just for reference
FOR THE COMMENTS:
As YT has deprecated the gdata for the comments url, you can scrape 'em also from here; its a workaround though :D
https://www.youtube.com/all_comments?v=cOIKAnF3mjs
...no authentication needed! :) and if you want to work the client side only (in this example by cross-domain), go through JS
<textarea style="width:100%;height:100%" id=cu></textarea>
<script>
var r='';
function c(d)
{
for(i=0;i<=d.query.count-1;i++)
r=r+d.results[i];
document.getElementById('cu').innerHTML=r;
}
</script>
<script src="http://query.yahooapis.com/v1/public/yql?q=%20SELECT%20*%20FROM%20html%20WHERE%20url%3D%22https://www.youtube.com/all_comments?v=cOIKAnF3mjs%22&callback=c"></script>
You can Access YouTube Comments by processing this URL
http://gdata.youtube.com/feeds/api/videos/{$videoID}/comments
The YouTube like functionality requires the user to be logged-in to his/hers Google account

Is there a way to get the twitter share count for a specific URL?

I looked through the API documentation but couldn't find it. It would be nice to grab that number to see how popular a url is. Engadget uses the twitter share button on articles if you're looking for an example. I'm attempting to do this through javascript. Any help is appreciated.
You can use the following API endpoint,
http://cdn.api.twitter.com/1/urls/count.json?url=http://stackoverflow.com
Note that the http://urls.api.twitter.com/ endpoint is not public.)
The endpoint will return a JSON string similar to,
{"count":27438,"url":"http:\/\/stackoverflow.com\/"}
On the client, if you are making a request to get the URL share count for your own domain (the one the script is running from), then an AJAX request will work (e.g. jQuery.getJSON). Otherwise, issue a JSONP request by appending callback=?:
jQuery.getJSON('https://cdn.api.twitter.com/1/urls/count.json?url=http://stackoverflow.com/&callback=?', function (data) {
jQuery('#so-url-shares').text(data.count);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="so-url-shares">Calculating...</div>
Update:
As of 21st November 2015, this way of getting twitter share count, does not work anymore. Read more at: https://blog.twitter.com/2015/hard-decisions-for-a-sustainable-platform
This is not possible anymore as from today, you can read more here:
https://twitter.com/twitterdev/status/667836799897591808
And no plans to implement it back, unfortunately.
Up vote so users do not lose time trying out.
Update:
It is however possible via http://opensharecount.com, they provide a drop-in replacement for the old private JSON URL based on searches made via the API (so you don't need to do all that work).
It's based on the REST API Search endpoints. Its still new system, so we should see how it goes. In the future we can expect more of similar systems, because there is huge demand.
this is for url with https (for Brodie)
https://cdn.api.twitter.com/1/urls/count.json?url=YOUR_URL
No.
How do I access the count API to find out how many Tweets my URL has had?
In this early stage of the Tweet Button the count API is private. This means you need to use either our javascript or iframe Tweet Button to be able to render the count. As our systems scale we will look to make the count API public for developers to use.
http://dev.twitter.com/pages/tweet_button_faq#custom-shortener-count
Yes,
https://share.yandex.ru/gpp.xml?url=http://www.web-technology-experts-notes.in
Replace "http://www.web-technology-experts-notes.in" with "your full web page URL".
Check the Sharing count of Facebook, Twitter, LinkedIn and Pinterest
http://www.web-technology-experts-notes.in/2015/04/share-count-and-share-url-of-facebook-twitter-linkedin-and-pininterest.html
Update:
As of 21st November 2015, Twitter has removed the "Tweet count endpoint" API.
Read More: https://twitter.com/twitterdev/status/667836799897591808
The approved reply is the right one. There are other versions of the same endpoint, used internally by Twitter.
For example, the official share button with count uses this one:
https://cdn.syndication.twitter.com/widgets/tweetbutton/count.json?url=[URL]
JSONP support is there adding &callback=func.
I know that is an old question but for me the url http://cdn.api.twitter.com/1/urls/count.json?url=http://stackoverflow.com did not work in ajax calls due to Cross-origin issues.
I solved using PHP CURL, I made a custom route and called it through ajax.
/* Other Code */
$options = array(
CURLOPT_RETURNTRANSFER => true, // return web page
CURLOPT_HEADER => false, // don't return headers
CURLOPT_FOLLOWLOCATION => true, // follow redirects
CURLOPT_MAXREDIRS => 10, // stop after 10 redirects
CURLOPT_ENCODING => "", // handle compressed
CURLOPT_USERAGENT => "test", // name of client
CURLOPT_AUTOREFERER => true, // set referrer on redirect
CURLOPT_CONNECTTIMEOUT => 120, // time-out on connect
CURLOPT_TIMEOUT => 120, // time-out on response
);
$url = $_POST["url"]; //whatever you need
if($url !== ""){
$curl = curl_init("http://urls.api.twitter.com/1/urls/count.json?url=".$url);
curl_setopt_array($curl, $options);
$result = curl_exec($curl);
curl_close($curl);
echo json_encode(json_decode($result)); //whatever response you need
}
It is important to use a POST because passsing url in GET request cause issues.
Hope it helped.
This comment https://stackoverflow.com/a/8641185/1118419 proposes to use Topsy API. I am not sure that API is correct:
Twitter response for www.e-conomic.dk:
http://urls.api.twitter.com/1/urls/count.json?url=http://www.e-conomic.dk
shows 10 count
Topsy response fro www.e-conomic.dk:
http://otter.topsy.com/stats.json?url=http://www.e-conomic.dk
18 count
This way you can get it with jquery. The div id="twitterCount" will be populated automatic when the page is loaded.
function getTwitterCount(url){
var tweets;
$.getJSON('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=?', function(data){
tweets = data.count;
$('#twitterCount').html(tweets);
});
}
var urlBase='http://http://stackoverflow.com';
getTwitterCount(urlBase);
Cheers!
Yes, there is. As long as you do the following:
Issue a JSONP request to one of the urls:
http://cdn.api.twitter.com/1/urls/count.json?url=[URL_IN_REQUEST]&callback=[YOUR_CALLBACK]
http://urls.api.twitter.com/1/urls/count.json?url=[URL_IN_REQUEST]&callback=[YOUR_CALLBACK]
Make sure that the request you are making is from the same domain as the [URL_IN_REQUEST]. Otherwise, it will not work.
Example:
Making requests from example.com to request the count of example.com/page/1. Should work.
Making requests from another-example.com to request the count of example.com/page/1. Will NOT work.
I just read the contents into a json object via php, then parse it out..
<script>
<?php
$tweet_count_url = 'http://urls.api.twitter.com/1/urls/count.json?url='.$post_link;
$tweet_count_open = fopen($tweet_count_url,"r");
$tweet_count_read = fread($tweet_count_open,2048);
fclose($tweet_count_open);
?>
var obj = jQuery.parseJSON('<?=$tweet_count_read;?>');
jQuery("#tweet-count").html("("+obj.count+") ");
</script>
Simple enough, and it serves my purposes perfectly.
This Javascript class will let you fetch share information from Facebook, Twitter and LinkedIn.
Example of usage
<p>Facebook count: <span id="facebook_count"></span>.</p>
<p>Twitter count: <span id="twitter_count"></span>.</p>
<p>LinkedIn count: <span id="linkedin_count"></span>.</p>
<script type="text/javascript">
var smStats=new SocialMediaStats('https://google.com/'); // Replace with your desired URL
smStats.facebookCount('facebook_count'); // 'facebook_count' refers to the ID of the HTML tag where the result will be placed.
smStats.twitterCount('twitter_count');
smStats.linkedinCount('linkedin_count');
</script>
Download
https://404it.no/js/blog/SocialMediaStats.js
More examples and documentation
Javascript Class For Getting URL Shares On Facebook, Twitter And LinkedIn

Resources