vb.org Archive - Add-On Releases - v3 Arcade Share Tools - Facebook, Google+, Twitter and More

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 4.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=246)

- - Add-On Releases - v3 Arcade Share Tools - Facebook, Google+, Twitter and More (https://vborg.vbsupport.ru/showthread.php?t=265545)

Gemma

06-19-2011 10:00 PM

v3 Arcade Share Tools - Facebook, Google+, Twitter and More

1 Attachment(s)

This is loosely based on my v3 Arcade Integrate Facebook and Twitter Add-on.

This template modification will add submit buttons to Facebook, Twitter, Google +1, StumbleUpon and Pinterest.

1. Open v3ARCADE_PLAY template

Find:

Code:

{vb:raw headinclude_bottom}

Below that add:

Code:

<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />

<meta property="og:title" content="{vb:raw game.title}" />

<meta property="og:type" content="website" />

<meta property="og:description" content="{vb:raw game.description}" />

<meta property="og:url" content="{vb:raw vboptions.bburl}/arcade/game-{vb:raw game.gameid}/" />

<meta property="og:image" content="{vb:raw vboptions.bburl}/images/arcade/{vb:raw game.stdimage}" />

Replacing xxxxxxxxxxxxxxx with your Facebook APP ID

Find:

Code:

<div class="blockrow" align="center">

                        <vb:if condition="!$show['challenge'] AND !$show['tournament']">

                            <img src="{vb:raw vboptions.arcadeimages}/backtip.gif" border="0" alt="" />

                        <vb:else />

                            {vb:rawphrase challenge_warning}

                        </vb:if>

                    </div>

Add below

Code:

<div class="collapse"><h3 class="blockhead">Share and Bookmark</h3>

<div class="blockrow" align="center">

<div> 

<table width="300" height="75" border="0" align="right">

<tr bgcolor="#d2e7fd">

<td width="60" align="center">

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall" count="true"></g:plusone>

</td>

<td width="60" align="center">

<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">

</script>

</td>

<td width="60" align="center">

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</td>

<td width="60" align="center">

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5" type="text/javascript">

</script>

</td>

<td width="60" align="center">

<a href="http://pinterest.com/pin/create/button/?url={vb:raw  vboptions.bburl}/arcade/game-{vb:raw game.gameid}&media={vb:raw  vboptions.bburl}/images/arcade/{vb:raw  game.stdimage}&description={vb:raw game.title} -- {vb:raw  game.description}" class="pin-it-button" count-layout="vertical"  target="_blank"><img border="0"  src="//assets.pinterest.com/images/PinExt.png" title="Pin It"  /></a>

</td>

</table>

</div>

2. Still in v3ARCADE_PLAY

Find:

Code:

<!-- main -->

            <div class="blockrow">{vb:raw flashcode}</div>

Replace with:

Code:

<!-- main -->

<vb:if condition="$show['guest']">

<div class="standard_error">

    <h2 class="blockhead">Arcade Error Message</h2>

    <div class="blockbody formcontrols">

                

                <p class="blockrow">Sorry, guests cannot play games in the arcade, you must be a registered member of {vb:raw vboptions.bbtitle} to play games and submit scores.<br/><br/> This will also allow you to compete on our arcade leaderboards, play tournaments or challenge other players to a 1v1 match.<br/><br/> Registration is quick, free and simple. Click <a href="register.php">HERE</a> to join our site.</p>

    </div>

</div></vb:if>

<vb:if condition="$show['member']"><div class="blockrow">{vb:raw flashcode}</div></vb:if>

Save template

3. Open your footer template and add this to the bottom

Code:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Save template.

4. Open your v3arcade_headinclude template and at the bottom add this:

Code:

<script>var fbShare = {url: '{vb:raw href}',size: 'large',badge_text: 'fff',badge_color: '6666CC',google_analytics: 'true'}</script>

5. Goto Usergroups > Usergroup Manager > Unregistered / Not Logged In and change the Can View Arcade and Can Play Arcade to YES

History
11.05.12 - v1.04 - Revised code and some additional Facebook integration code
13.04.12 - v1.03 - Added Pinterest Integration. Removed support for Facebook Comments
19.12.11 - v1.02 - Fixed Facebook Comments
05.07.11 - v1.01 - Fixed problem with Twitter counter not updating
20.06.11 - v1.00 - Initial release

How To Add 'Pin It' button if upgrading (www.pinterest.com) - https://vborg.vbsupport.ru/showpost....8&postcount=12

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

dmm2020

06-20-2011 11:05 PM

A note on above...only one of the 3 options needed right?

I tried all 3 and realized you only need one of them. Had to back some of the code out.

Might clear the instructions a bit Gemma, but very good work otherwise. I love it.

Gemma

06-20-2011 11:58 PM

I thought they were clear and simple :confused:

I've made them as clearer I think. :erm:

Brandon Sheley

06-21-2011 03:39 AM

Thank you!

/me clicks install

Gemma

07-05-2011 06:58 PM

I'm getting reports of the twitter counter not updating (or staying at 0) even though the tweets are being sent to the twitter page so I've changed the twitter code to fix this.

In your v3ARCADE_PLAY template find:

Code:

<td width="60" align="center">

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical">Tweet</a> 

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

</td>

Replace it with:

Code:

<td width="60" align="center">

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</td>

Gemma

12-08-2011 03:30 PM

Something has gone skew-whiff with the Twitter button, seems like they have changed it and the alignment is all wrong.

If it is a problem for you, you may want to revert to using this alternative until I fix it up.

https://vborg.vbsupport.ru/showpost....39&postcount=5

tidus78

02-09-2012 07:06 AM

THanks Gemma,works perfectly on 4.1.10.

But I have a question : sharing any game with my profile facebook,it links my homepage forum not the game

Something to fix?

Gemma

02-10-2012 04:58 PM

Quote:

Originally Posted by tidus78 (Post 2297816)

THanks Gemma,works perfectly on 4.1.10.

But I have a question : sharing any game with my profile facebook,it links my homepage forum not the game

Something to fix?

I'll look into it when I get time.

tidus78

02-11-2012 10:30 AM

Ok thanks :)

tidus78

03-26-2012 08:27 AM

Quote:

Originally Posted by tidus78 (Post 2297816)

THanks Gemma,works perfectly on 4.1.10.

But I have a question : sharing any game with my profile facebook,it links my homepage forum not the game

Something to fix?

Something new?:)

Gemma

03-27-2012 01:12 PM

I can't reproduce any error. If you go to the facebook link below and enter the url of one of your games does it give any errors and does it pull the game information for that url? (ie - http://www.yoursite.com/arcade.php?do=play&gameid=789)

http://developers.facebook.com/tools/debug

Gemma

04-13-2012 12:24 PM

1 Attachment(s)

Here is how to add a Pin It (www.pinterest.com) button to your arcade.

Open your footer template and add this to the bottom and save.

Code:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

This is the code you want to use in your arcade

Code:

<a href="http://pinterest.com/pin/create/button/?url=http://www.forumbanter.com/arcade/game-{vb:raw game.gameid}&media={vb:raw vboptions.bburl}/images/arcade/{vb:raw game.stdimage}&description={vb:raw game.title} -- {vb:raw game.description}" class="pin-it-button" count-layout="vertical" target="_blank"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

So if you want to add it to the rest of your bookmarks open the v3ARCADE_PLAY template and find your existing code (I'm using the default OP code as example)

Code:

<div class="collapse"><h3 class="blockhead">Share and Bookmark</h3>

<div class="blockrow" align="center">

<div> 

<table width="250" height="75" border="0" align="right">

<tr bgcolor="#d2e7fd"><td width="60" align="center">

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall" count="true"></g:plusone>

</td>

<td width="60" align="center">

<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">

</script>

</td>

<td width="60" align="center">

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</td>

<td width="60" align="center">

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5" type="text/javascript">

</script>

</td>

</table>

</div>

Replace it with

Code:

<div class="collapse"><h3 class="blockhead">Share and Bookmark</h3>

<div class="blockrow" align="center">

<div> 

<table width="300" height="75" border="0" align="right">

<tr bgcolor="#d2e7fd">

<td width="60" align="center">

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<g:plusone size="tall" count="true"></g:plusone>

</td>

<td width="60" align="center">

<script src="http://widgets.fbshare.me/files/fbshare.js" type="text/javascript">

</script>

</td>

<td width="60" align="center">

<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>

</td>

<td width="60" align="center">

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5" type="text/javascript">

</script>

</td>

<td width="60" align="center">

<a href="http://pinterest.com/pin/create/button/?url={vb:raw vboptions.bburl}/arcade/game-{vb:raw game.gameid}&media={vb:raw vboptions.bburl}/images/arcade/{vb:raw game.stdimage}&description={vb:raw game.title} -- {vb:raw game.description}" class="pin-it-button" count-layout="vertical" target="_blank"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a>

</td>

</table>

</div>

Save the template.

Mark.B

04-15-2012 12:00 PM

Quote:

Originally Posted by Gemma (Post 2313815)

Gemma I have this issue too and I've done some investigating.
I know the cause but I cannot solve it.

Facebook is not picking up any Opengraph meta tags, hence it doesn't know any of the parameters (this can be seen in the debugger tool.

On your site, og: tags are visible in the source code, like this:

Code:

<meta property="fb:app_id" content="snipped" />

<meta property="og:title" content="TOTWO" />

<meta property="og:type" content="website" />

<meta property="og:description" content="TOTWO is a pairs game. Click on the cards to see what is behind them, and try to match all the pairs before the time runs out! 



Have fun!" />

<meta property="og:url" content="http://www.forumbanter.com/arcade/game-873/" />

<meta property="og:image" content="http://www.forumbanter.com/images/arcade/totwo.jpg" />

But as far as I can see this mod doesn't add those. I'm wondering if you have something else running that adds those for you, or whether you've added them manually, but without them it won't work.

Now, beyond that, I have tried adding suitable tags into the v3ARCADE_PLAY template, but Facebook still doesn't pick them up! Although they are visible in the source, Facebook's debugger doesn't "see" them.

Oddly if, as a test, I put some manual tags in the v3ARCADE_MAIN template, Facebook DOES see them (though of course that's no use for this mod!)

Bit weird and I've spent hours trying to figure it out to no avail.

It's possible others haven't reported this, since unless you try clicking your own Facebook links (which most people probably won't do), they may not be aware it might not be working.

Gemma

04-15-2012 12:25 PM

Quote:

Originally Posted by Mark.B (Post 2320296)

Code:

<meta property="fb:app_id" content="snipped" />

<meta property="og:title" content="TOTWO" />

<meta property="og:type" content="website" />

<meta property="og:description" content="TOTWO is a pairs game. Click on the cards to see what is behind them, and try to match all the pairs before the time runs out! 



Have fun!" />

<meta property="og:url" content="http://www.forumbanter.com/arcade/game-873/" />

<meta property="og:image" content="http://www.forumbanter.com/images/arcade/totwo.jpg" />

Hmmm, I might need to revise this.

Could you try this for me please.

Open your v3ARCADE_PLAY template and search for:

Code:

{vb:raw headinclude_bottom}

Below that add: (adding your own FB APP ID instead of xxxxxxxxxxxxxxx):

Code:

<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />

<meta property="og:title" content="{vb:raw game.title}" />

<meta property="og:type" content="website" />

<meta property="og:description" content="{vb:raw game.description}" />

<meta property="og:url" content="{vb:raw vboptions.bburl}/arcade/game-{vb:raw game.gameid}/" />

<meta property="og:image" content="{vb:raw vboptions.bburl}/images/arcade/{vb:raw game.stdimage}" />

Then in your v3arcade_headinclude template add this at the bottom

Code:

<script>var fbShare = {url: '{vb:raw href}',size: 'large',badge_text: 'fff',badge_color: '6666CC',google_analytics: 'true'}</script>

Mark.B

04-15-2012 01:15 PM

Thanks Gemma, still doesn't seem to pick up the tags which is bizarre since they are visible in the source.

Debugger with a sample game URL:

http://developers.facebook.com/tools...26gameid%3D162

Mark.B

04-15-2012 01:20 PM

Wait...I've got it!

The debugger is seeing the standard no permissions error (as my site doesn't allow guests to play) and of course the og:tags are not sent on error pages!

Your site has guest playing enabled hence the debugger works.

Anyone without guest playing enabled cannot use the debugger.

So now I need to run some tests, I will do that later. :)

I have temporarily enabled guest playing.

Gemma

04-15-2012 01:23 PM

Are you running any other Facebook plugins on your site? For example does this work if you disable Facebook Connect?

Mark.B

04-15-2012 07:13 PM

Quote:

Originally Posted by Gemma (Post 2320323)

Are you running any other Facebook plugins on your site? For example does this work if you disable Facebook Connect?

Thanks Gemma....I think I have it working.....it seems that it struggles when guests get the standard vBulletin permissions error.

I have gone down the road of a workaround, such as seen here:
http://www.bowlandcentral.com/forum/...lay&gameid=831

Basically it's a fiddle...guest view in the arcade is actually enabled, but a standard vBulletin conditional around the embed allows me to NOT display the game but instead display a message. This seems to allow the Facebook stuff to work correctly.

I hate Facebook...trying to get Like buttons to post correctly to walls is sooooo awkward...

Ancient Dragon

04-19-2012 03:20 PM

Quote:

Open your footer template and add this to the bottom

Code:
<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>
Save template.

What "footer" template is this talking about? I did a template search in cp for "footer" in the titles and found several templates with that. I'm soooo confused!:confused:

Gemma

04-20-2012 06:59 AM

Quote:

Originally Posted by Ancient Dragon (Post 2321609)

What "footer" template is this talking about? I did a template search in cp for "footer" in the titles and found several templates with that. I'm soooo confused!:confused:

In the template called footer. In the templates section of your admincp, select edit templates and scroll down to the one called footer. There is only one template called footer per style

tidus78

05-10-2012 07:13 AM

Quote:

Originally Posted by Gemma (Post 2313815)

No,it links to front page of the forum :confused:

Gemma

05-10-2012 07:51 AM

There are some other posts earlier in this thread about opengraph meta tags - https://vborg.vbsupport.ru/showpost....3&postcount=14 which may need to be implemented.

Quote:

Originally Posted by tidus78 (Post 2327917)

No,it links to front page of the forum :confused:

That is probably happening if your arcade isn't set to allow guests to play games.

In your usergroup settings for Unregistered/Not Logged In you would need to set Can View Arcade and Can Play Arcade to YES. Then in your v3ARCADE_PLAY template find:

Code:

<!-- main -->

            <div class="blockrow">{vb:raw flashcode}</div>

Replace that with:

Code:

<vb:if condition="$show['guest']">

<div class="standard_error">

    <h2 class="blockhead">Arcade Error Message</h2>

    <div class="blockbody formcontrols">

                

                <p class="blockrow">Sorry, guests cannot play games in the arcade, you must be a registered member of {vb:raw vboptions.bbtitle} to play games and submit scores.<br/><br/> This will also allow you to compete on our arcade leaderboards, play tournaments or challenge other players to a 1v1 match.<br/><br/> Registration is quick, free and simple. Click <a href="register.php">HERE</a> to join our site.</p>

    </div>

</div></vb:if>

<vb:if condition="$show['member']"><div class="blockrow">{vb:raw flashcode}</div></vb:if>

Changing the error message to suit your own needs.

tidus78

05-10-2012 04:51 PM

Tried but no results...

http://img821.imageshack.us/img821/9...0510194840.png

Gemma

05-11-2012 02:52 PM

Updated: Revised code and some additional Facebook integration code.

Quote:

Tried but no results...

Not sure :(

Did you try the additional steps in previous posts - adding the OG meta tags and making your arcade available to guests?

Do you have any other Facebook integration mods installed (other than the standard Facebook Connect that comes with the vbulletin software) that could be conflicting?

tidus78

05-12-2012 11:13 PM

Look at the URL,is it a SEO problem?

http://www.console-planet.it/arcade....lay&gameid=128

Gemma

05-13-2012 12:19 PM

Quote:

Originally Posted by tidus78 (Post 2328848)

Look at the URL,is it a SEO problem?

http://www.console-planet.it/arcade....lay&gameid=128

Looking at your source code you have two sets of OG meta tags. One for your site information and this one. The one for your site information is conflicting with this one. Even if you try displaying an arcade url from your site directly onto your Facebook page you will get the same results.

Do you have any other Facebook modifications installed?

tidus78

05-15-2012 06:16 PM

Yes,this one : https://vborg.vbsupport.ru/showthread.php?t=266159

I tried to disable it but no results...

Datenpapst

06-23-2012 08:13 AM

Hey Gemma, for my site, facebook etc still picks up the site information instead of the game info :(
Any solution for that? Did it like mentioned in the install in the first post and post 14 :(

Gemma

06-23-2012 10:36 AM

Quote:

Originally Posted by Datenpapst (Post 2342221)

Hey Gemma, for my site, facebook etc still picks up the site information instead of the game info :(
Any solution for that? Did it like mentioned in the install in the first post and post 14 :(

I've updated the opening post, to get Facebook to work you need to include step 2 and also set the usergroup permissions mentioned in step 5

5. Goto Usergroups > Usergroup Manager > Unregistered / Not Logged In and change the Can View Arcade and Can Play Arcade to YES

Then, hopefully, it should work as intended :o

Datenpapst

06-23-2012 02:39 PM

http://www.c-arena.com/attachment.ph...1&d=1340465850

Did as you said. :(

Gemma

06-23-2012 03:13 PM

Think it is clashing with something else, I can see two sets of OG tags in your source code.

Do you have any other Facebook mods enabled?
Does it work if you disable Facebook connect?

Datenpapst

06-23-2012 03:30 PM

Tried it with FB Connect off. Still the same. No other FB Mode is installed :(

Gemma

06-23-2012 03:56 PM

Try moving this code to just below <head> in v3ARCADE_PLAY

Code:

<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />

<meta property="og:title" content="{vb:raw game.title}" />

<meta property="og:type" content="website" />

<meta property="og:description" content="{vb:raw game.description}" />

<meta property="og:url" content="{vb:raw vboptions.bburl}/arcade/game-{vb:raw game.gameid}/" />

<meta property="og:image" content="{vb:raw vboptions.bburl}/images/arcade/{vb:raw game.stdimage}" />

Does it give the correct info in the debugger if you enter one of your game urls? - http://developers.facebook.com/tools/debug

If you want me to have a look at your site, PM me temporary admin access and I'll have a look at your templates and setup to see if anything stands out that would cause an error.

All times are GMT. The time now is 07:41 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.02001 seconds Memory Usage 1,882KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (22)bbcode_code_printable (12)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (33)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: