SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery socialist script

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


    Using this code:

    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
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  2. #2
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just noticed even though it shows Twitter feeds, those feeds are actually Instagram feeds.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  3. #3
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Let's have a look then.

    Your code:

    Code JavaScript:
    $('#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?

  4. #4
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    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).

  6. #6
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    {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.
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Wow, your basic template is huge

    Could you take out:

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

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

  8. #8
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok done, updated
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    OK, that makes a big difference

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

    HTML Code:
      <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:

    HTML Code:
    <!-- 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.

  10. #10
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    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:
    Code:
    {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.

  12. #12
    SitePoint Enthusiast LogicWeb's Avatar
    Join Date
    Feb 2008
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, odd. Ok thanks.

    Any idea why it's not displaying actual photos in the feeds and only 2 FB feeds?
    Talk Jesus Forums [ Father's Love Letter ]
    ..............................................................
    LogicWeb...a smart web solution [ managed hosting since 2004 ]

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by LogicWeb View Post
    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.

    Code JavaScript:
    $('#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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •