cinco/glitch-images
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add twitter, facebook and reddit sharing buttons

Georg Fischer 2013-11-02 12:33:06 +01:00
parent d39a8797f8
commit 4f2370aa30
2 changed files with 25 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html

@ -43,7 +43,10 @@
<div id="imgur-url-container"> <div id="imgur-url-container">
<input id="imgur-url-input" type="text" readonly="readonly" /> <input id="imgur-url-input" type="text" readonly="readonly" />
<a href id="imgur-url-link" class="button" href="http://imgur.com" target="_blank">open</a> <a href id="imgur-url-link" class="button" href="http://imgur.com" target="_blank">open</a>
<span id="imgur-url-error">Sorry, something went wrong. Maybe try again?</span> <a href id="twitter-link" class="button" href="http://twitter.com" target="_blank" title="post your image on twitter">twitter</a>
<a href id="facebook-link" class="button" href="http://facebook.com" target="_blank" title="post your image on facebook">facebook</a>
<a href id="reddit-link" class="button" href="http://reddit.com" target="_blank" title="post your image on reddit">reddit</a>
<span id="imgur-url-error">sorry, something went wrong. maybe try again?</span>
</div> </div>
</div> </div>
<div class="canvas-wrapper"> <div class="canvas-wrapper">

21
scripts/src/upload-imgur.js

@ -9,6 +9,9 @@ define(
var imgur_url_input; var imgur_url_input;
var imgur_url_link; var imgur_url_link;
var imgur_url_error; var imgur_url_error;
var twitter_link;
var facebook_link;
var reddit_link;
var is_uploading = false; var is_uploading = false;
function init( shared ) function init( shared )
@ -19,6 +22,9 @@ define(
imgur_url_input = document.getElementById( 'imgur-url-input' ); imgur_url_input = document.getElementById( 'imgur-url-input' );
imgur_url_link = document.getElementById( 'imgur-url-link' ); imgur_url_link = document.getElementById( 'imgur-url-link' );
imgur_url_error = document.getElementById( 'imgur-url-error' ); imgur_url_error = document.getElementById( 'imgur-url-error' );
twitter_link = document.getElementById( 'twitter-link' );
facebook_link = document.getElementById( 'facebook-link' );
reddit_link = document.getElementById( 'reddit-link' );
imgur_button.addEventListener( 'click', buttonClicked, false ); imgur_button.addEventListener( 'click', buttonClicked, false );
imgur_url_input.addEventListener( 'click', selectInput, false ); imgur_url_input.addEventListener( 'click', selectInput, false );
@ -76,10 +82,25 @@ define(
if ( response && response.data && response.data.link ) if ( response && response.data && response.data.link )
{ {
var twitter_share_url_text = "Check out what I made with @snorpey’s glitch tool: ";
twitter_share_url_text += response.data.link;
twitter_share_url_text += ' http://snorpey.github.io/jpg-glitch';
//http://ar.zu.my/how-to-really-customize-the-deprecated-facebook-sharer-dot-php/
var facebook_share_url = 'http://www.facebook.com/sharer.php?s=100';
facebook_share_url += '&p[url]=' + response.data.link;
facebook_share_url += '&p[title]=Glitch!';
facebook_share_url += '&p[images][0]=' + response.data.link;
facebook_share_url += '&p[summary]=' + encodeURIComponent( 'Check out what I made with this glitch tool: http://snorpey.github.io/jpg-glitch' );
imgur_button.classList.remove( 'is-uploading' ); imgur_button.classList.remove( 'is-uploading' );
imgur_url_input.setAttribute( 'value', response.data.link ); imgur_url_input.setAttribute( 'value', response.data.link );
imgur_url_link.href = response.data.link; imgur_url_link.href = response.data.link;
imgur_url_container.classList.add( 'is-active', 'upload-successful' ); imgur_url_container.classList.add( 'is-active', 'upload-successful' );
twitter_link.href = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent( twitter_share_url_text );
facebook_link.href = facebook_share_url;
reddit_link.href = 'http://www.reddit.com/submit?url=' + encodeURIComponent( response.data.link ) + '&title=Glitch!';
} }
else else