Tweet to Download for SMF

in Tutorials on 08 May 2013


Allow your members to ?pay with a tweet?. Namely you take something that you would otherwise offer for free and make it available to your members only after they tweet about your website. It is a great way to promote your products and get noticed, and it doesn?t cost anything to your visitors.

We're going to implement this to the Download System

Demo: Alert box for announcements

[admin]Photo and Credit: Tutorialzine | Web Development Tutorials & Resources[/admin]

1. Download the ZIP Making a Simple Tweet to Download System | Tutorialzine
2. Create a folder called "tweet-download" in your current theme.
3. Extract all files from the 'assets' folder and load them to the new folder you created.

Let's get rid of some items we dont need...

1. In the tweet-download/css/styles.css remove everything except:
/*----------------------------
Download Button
-----------------------------*/


a.downloadButton{
display:inline-block;
width:187px;
height:69px;
text-indent:-99999px;
overflow:hidden;
background:url('../img/buttons.png') no-repeat;
cursor:default;
border:none;
text-decoration:none !important;
}

a.downloadButton.active{
background-position:left bottom;
cursor:pointer;
}


2. In the tweet-download/img folder, remove all images except the "buttons.png".

3. In the tweet-download/js folder, remove the script.js




Now let's open the /Themes/your_theme/index.template.php

Find:
// Here comes the JavaScript bits!
echo '


Add after:
        <link rel="stylesheet" href="', $settings['theme_url'], '/tweet-download/css/styles.css" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
        <script type="text/javascript" src="', $settings['theme_url'], '/tweet-download/js/jquery.tweetAction.js"></script>





Now let's do one more thing, edit the downloads page...

Open /Themes/default/Downloads2.template.php

Find:
// Show the main download
echo '
<tr class="windowbg2">
<td align="center">';

echo '<a href="' . $scripturl . '?action=downloads;sa=downfile&id=', $context['downloads_file']['ID_FILE'], '">', ($context['downloads_file']['fileurl'] == '' ? $context['downloads_file']['orginalfilename'] : $txt['downloads_app_download']), '</a>';

echo '
</td>
</tr>';


Replace with:
// Show the main download
echo '
<tr class="windowbg2">
<td align="center">
        <p><a href="#" id="tweetLink">Tweet this</a> to activate the download button.</p><br />';

echo '<a href="javascript:void(0)" class="downloadButton">', ($context['downloads_file']['fileurl'] == '' ? $context['downloads_file']['orginalfilename'] : $txt['downloads_app_download']), '</a><br /><br />';

              echo '

<script type="text/javascript">
$(document).ready(function(){

// Using our tweetAction plugin. For a complete list with supported
// parameters, refer to http://dev.twitter.com/pages/intents#tweet-intent

$("#tweetLink").tweetAction({
text: "Download Professional SMF Themes. Free and Premium.",
url: "http://idesign360.com",
via: "idesign360",
related: "idesign360"
},function(){

// When the user closes the pop-up window:

$("a.downloadButton")
.addClass("active")
.attr("href", "' . $scripturl . '?action=downloads;sa=downfile&id=', $context['downloads_file']['ID_FILE'], '");

});

});
</script>';

echo '
</td>
</tr>';


Make sure you replace your own text and Twitter id.

That's it. Have fun.

QuoteBut wait! This doesn?t work!

And you are entirely correct. As you can see from the code (and confirm from the demo), we assume that closing the popup window equals a published tweet. It does not.

As this is a cross domain interaction, there is no way to subscribe for when a tweet is actually published. The only way to do this would be to use Twitter?s more complex https://dev.twitter.com/docs/anywhere/welcome, but even then people could just hotlink to your file.

Does it even matter? The real purpose of this technique is to give people an incentive to tweet about your product/service, something that a lot of folks would love to do just for the feeling of receiving your ?members-only? download.



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.

idesignSMF.com | SimpleMachines.org



2 Comments

It works as it should but throws errors in which i havent been able to correct.

[admin]8: Undefined index: downloads_file[/admin]


Im going to separate the php from the Javascript.
#1
This tutorial is now fixed and works as it should  :wink:
#2

rocket_launch

Awesome Support. Download our themes, you also get theme support.