v3 Arcade Integrate Facebook and Twitter

v3 Arcade Integrate Facebook and Twitter

Mod Version: 1.01, by Gemma

vB Version: 4.x.x	Rating: (3 votes - 5.00 average)	Installs: 16
Released: 29 Apr 2011	Last Update: Never	Downloads: 49
Not Supported Template Edits Re-usable Code

What does this do?

This will add a Twitter button to your arcade playing area (v3ARCADE_PLAY template), allowing the user to update their Twitter status about your arcade/game they are playing. It will also add a Facebook button to allow publishing to Facebook and a Facebook comments box (optional) to the same area.

And it will add a Facebook comments box to your highscore table where users can publish scores/comments to their Facebook wall.

(see attached images).

Open your v3ARCADE_PLAY template

Find:

Code:

</div>
            </div>
            <!-- /right area-->
        </td>
    </tr>
</table>

Add above:

Code:

<div class="collapse"><h3 class="blockhead">Share A Link On Twitter</h3>
<div class="blockrow" align="center">
Share a link to {vb:raw game.title} on Twitter<br/><br/>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div></div>
<div class="collapse"><h3 class="blockhead">Share This Game Link on Facebook</h3>
<div class="blockrow" align="center">
<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a rel="nofollow" href="http://www.facebook.com/share.php?u=<;url>" onclick="return fbs_click()" target="_blank"><img src="{vb:raw vboptions.arcadeimages}/Facebook-Social-Bar-128.png"></a><br>If you like {vb:raw game.title} you can share our game link with your Facebook friends.</div></div>
<div class="collapse"><h3 class="blockhead">Leave A Comment</h3>
<div class="blockrow" align="center">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments expr:xid="APP_ID" simple="1" css="{vb:raw vboptions.bburl}/fb_comments.css" numposts="0" width="300" publish_feed="true"></fb:comments>
</div>

You will need to replace APP_ID with your Facebook Application ID (both instances). If you use a different image you will also need to alter this line <img src="{vb:raw vboptions.arcadeimages}/Facebook-Social-Bar-128.png">

Save the template.

Open v3ARCADE_SCORES

Find:

Code:

        </td>
    </tr>
</table>
{vb:raw footer}

Add above:

Code:

<div class="threadlisthead table">
                    <span class="threadinfo">
                        <span class="threadtitle">
                            Enjoyed a game? Got a good score? Tell your Facebook Friends about it!
                        </span>
                    </span>
                                    </div>
<center><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=APP_ID&amp;xfbml=1"></script><fb:comments expr:xid="APP_ID" simple="1" css="{vb:raw vboptions.bburl}/fb_comments.css" numposts="0" width="425" publish_feed="true"></fb:comments><br/><br/>
<div>Please finalise your comments in the game highscore table to ensure the correct url is sent (click the Add Comment button)<br/>before posting any comments to Facebook. Thanks
</center></div>

You will need to replace APP_ID with your Facebook Application ID (both instances)

Save the template.

Extract the contents of the facebook.zip archive. Upload fb_comment.css to your forum root and Facebook-Social-Bar-128.png to your images/arcade folder (or if you are using your own image upload it to images/arcade)

Change log version 1.0 to 1.01
Update code to fix 'The comments plugin requires an href parameter' error in Facebook Comments plugin.

If anyone wants to further develop any of my addons, you are free to do so.

Download

facebook.zip (6.9 KB, 54 downloads)

Screenshots

vBulletin LTS