Image sharing on Twitter page
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm building a page on my web app where users can browse various pictures. I want users to be able to Tweet pictures from their own Twitter account. Also, I want them to be logged out of Twitter automatically after Tweeting each picture.

Please provide the HTML and Javascript for the following functionality:

  • When the user clicks a "Tweet this picture" link, they are prompted to log into Twitter and authorize the application. (They will never be logged in to begin with, because they'll get logged out after the Tweet is posted; see requirement 3, below).
  • Then, the user is promoted to post a structured Tweet with an image in it. For the image, use the image url contained in a hidden div (#image-1-url-container) on the page (doesn't matter what img you use).
  • Finally, after the user posts the Tweet, your code should log them out of Twitter automatically. If this is not possible, provide a detailed explanation. The reason for this is that the app is used on a public computer in a public space, so we want to make sure people don't stay logged in.

Aside from the Twitter App keys, your solution should function by itself in a blank HTML document.

Let me know in the comments if you have any questions.

Which language do you use for the backend? Is PHP okay?
alex 9 years ago
@alex yes, PHP is great!
thebosco 9 years ago
Are you okay with using the Twitter OAuth API? And if yes, would you like for me to take you step by step into creating an API key for you?
alex 9 years ago
@alex yeah that's great, I've created an API key before.
thebosco 9 years ago
You don't need an API to do this. This can be done easily but you won't be able to meet the third requirement (As far as I know, I don't think this is possible using the API as well). I will provide the answer in a while however.
blackpla9ue 9 years ago
awarded to alex

Crowdsource coding tasks.

2 Solutions


If you are trying to accomplish something like in Instagram (where an image is shared in twitter, and once you click it expand it's details and view a thumbnail underneath the Tweet, you might want to take a look at the Twitter Cards

  1. You will have to fill out a quick and easy form with your site's details - https://dev.twitter.com/form/participate-twitter-cards

  2. You will have to make an image details page where you only display an individual image. eg: image-details.php

  3. On top of that image-details.php page add

  4. In the image gallery page, link the tweet this button to - http://twitter.com/home?status=<?php echo urlencode("Sample twitter status update - http://domain.com/image-details.php?imgId=123"); ?>


End result : Notice the extra details underneath the image in the expanded view

End Result

Winning solution

Overview

I used a combination of both Jaisen Mathai's Twitter-Async Library and Matt Harris' Twitter OAtuh library. The final result is a one page PHP file that should do the job. If you would like to test it out, I have a demo here.

Instructions

  1. Download this, unzip, and upload it to your webserver.
  2. Add your application consumer key and consumer secret key to the secret.php file in the lib directory.
  3. Enjoy!

Note(s)

The code is set to echo the URL of the image from the PHP into the HTML because to try and get it from the <div> would require possibly another HTTP request and the PHP script allows for only one request and then it will clear the session.

The end result looks like this

Awesome. Your demo works great, but when I try to Auth when running on my local server, Twitter says that I've been granted to the app but "Next, return to [app name] and enter this PIN to complete the authorization process:" Do you know why this happens for me and how I can avoid it?
thebosco 9 years ago
@thebosco Try setting your Callback URL under your twitter app page to a set URL. (ie. http://0x60.com/examples/twitapp/)
alex 9 years ago
@alex cool, that worked! Is there any way to log the user out, or is this an impossibility?
thebosco 9 years ago
@thebosco I guess that I could also add a session_destroy(); to the end of the file and end the PHP session, though the user cannot post again without authorizing the application.
alex 9 years ago
I added a session_destroy() and a link to the homepage. You can download the new file(s) here: http://cl.ly/3y3c0l0D0H23.
alex 9 years ago
@thebosco Sorry, I misunderstood the logout concept. Unfortunately, it is impossible to log a user out of a Twitter via their API. Source:http://stackoverflow.com/questions/5605175/logout-for-twitter-linkedin-and-last-fm
alex 9 years ago
I think it should be possible actually, you need to POST to https://twitter.com/logout, some of the POST data you have to use may be hidden in the actual logout page, but with client side JavaScript it should be possible to load the page in a separate window gather the data and make the POST request. This isn't via their API but could be done once the user is redirected back to your code.
svanderbleek 9 years ago
@svanderbleek could you potentially show me what this code would look like with an example?
thebosco 9 years ago
@thebosco I uploaded a new version (use the above download link) that after posting the tweet will show a popup that shows the twitter logout page.
alex 9 years ago
@alex is there a way to integrate authorize?force_login=true so that it effectively logs you out (forces you to log in) each time you try to post, or will this not be possible? If you can add this, I'll def accept your answer asap!
thebosco 9 years ago
@alex nevermind, i added it to the authorize URL and it worked. Thanks so much for your hard work!
thebosco 9 years ago
@thebosco Anytime!
alex 9 years ago
View Timeline