Jquery socialist script

I’m attempting to install this script in vBulletin.
http://plugins.in1.com/socialist

Using this code:

<div id="content"></div>

<script type="text/javascript" src="clientscript/jquery.socialist.js"></script>
<link rel="stylesheet" type="text/css" href="clientscript/jquery.socialist.css" />


<script type="text/javascript">
    $('#content').socialist({ 
        networks: [ 
            {name:'facebook',id:'talkjesus'}, 
            {name:'twitter',id:'talkjesus'},
            {name:'instagram',id:'username',apiKey:'(my-ig-client-id-here)'},        
        ] 
    });
</script>

However, it is only pulling Twitter, not Facebook nor Instagram. Those are my actual usernames (I hid the IG apikey and username deliberately only here). Also, even the twitter feeds do not show the actual pics tweeted.

The page with the feed:
http://www.talkjesus.com/pages.php?pageid=16

Have I done something wrong?

As for the Instagram APIkey, I assume it’s the same as the Client ID section of my IG account?

It shows this:

CLIENT ID xxxxx
CLIENT SECRET xxxxx
WEBSITE URL http://www.talkjesus.com
REDIRECT URI http://www.talkjesus.com

I just noticed even though it shows Twitter feeds, those feeds are actually Instagram feeds.

Hi,

Let’s have a look then.

Your code:

$('#content').socialist({ 
        networks: [ 
            {name:'facebook',id:'talkjesus'},
            {name:'twitter',id:'talkjesus'},
            {name:'instagram',id:'chad_abizeid',apiKey:'(bdf4b903c55940aba13bcd8c0d2605b1)'},
        ] 
});

Try removing the comma after {name:'instagram',id:'chad_abizeid',apiKey:'(bdf4b903c55940aba13bcd8c0d2605b1)'},

That shouldn’t be there.

Does that help any?

Thanks @pullo . Unfortunately that did not change anything. Still shows twitter logos, but technically pulling only my instagram feeds. They are not pulling twitter nor facebook feeds too

edit: regarding twitter feeds, I was wrong about that. They are linking to IG because I tweeted my photos from Instagram. However, I’m thinking it should show actual picture instead of twitter logo.

Still doesn’t show Facebook or Instagram directly

Another bug: half the time the page is blank, have to refresh to load the feeds

OK, there is too much going on on the page you link to, to be able to debug easily.
Is it possible that you make a page for testing purposes, with your header and footer templates, but nothing else (i.e. no superfluous content).

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
	{vb:raw headinclude}
	<title>{vb:raw vboptions.bbtitle}</title>
	{vb:raw headinclude_bottom}
</head>
<body>
	{vb:raw header}
	{vb:raw navbar}


<!-- Custom Code Start Here -->
<p>Test</p>
<!-- / Custom Code Ends here -->


{vb:raw footer}
</body>
</html>

http://www.talkjesus.com/misc.php?do=page&template=test

Basic custom template with “test” in body, nothing else.

Wow, your basic template is huge :slight_smile:

Could you take out:

{vb:raw header}
{vb:raw navbar}
{vb:raw footer}

just for testing purposes, or does this make your page explode?

Ok done, updated

OK, that makes a big difference :slight_smile:

Before the closing head tag, can you insert the scripts, so that it reads:

  <link href="jquery.socialist.css" rel="stylesheet" />
  <script src="jquery.socialist.js"></script>
</head>

Then, directly after <p>Test</p> insert the rest, so that it reads:

<!-- Custom Code Start Here -->
<p>Test</p>
<!-- / Custom Code Ends here -->

<div id="content"></div>

<script type="text/javascript">
    $('#content').socialist({
        networks: [
            {name:'facebook',id:'talkjesus'},
            {name:'twitter',id:'talkjesus'},
            {name:'instagram',id:'username',apiKey:'(my-ig-client-id-here)'}
        ]
    });
</script>
</body>
</html>

The let me know what happens.

edit: had to fix path in css and script code to

<script type=“text/javascript” src=“clientscript/jquery.socialist.js”></script><link rel=“stylesheet” type=“text/css” href=“clientscript/jquery.socialist.css” />Still same problem as before. No IG and FB feeds. No Twitter actual photos

Hi,

So, a couple of things:

I just found out the plugin is not compatible with the latest version of jQuery.
I have made a demo of it working for you here.
It works just fine with your FaceBook and Twitter feeds, but adding instagram makes it die.
If you look at the docs, the format is this:

{name:'instagram',id:'socialmedia',apiKey:'(your-instagram-api-key here)'}

I hope this helps somewhat.
I’m turning in in ten minutes, so if you have any questions after that I’ll pick up tomorrow.

Hmm, odd. Ok thanks.

Any idea why it’s not displaying actual photos in the feeds and only 2 FB feeds?

Sorry, not really.
Try playing around with some of the parameters and checkout the project’s documentation.
From a JS perspective I believe it’s now doing what it should, we just need to work out how to configure it properly.

$('#content').socialist({ 
  networks: [ 
    {name:'facebook',id:'talkjesus'}, 
    {name:'twitter',id:'talkjesus'} 
  ], 
  maxResults:20,
  fields:['source','heading','text','date','image']
});

This page might help, too: https://github.com/iatek/jquery-socialist
Have a look under “Examples - Usage / options”

I hope this gives you something to go on.
Good night.