When including my LinkedIn public profile page as HTML inside a DIV it takes over my own jQuery includes how can i stop this?

Question

I can't be doing with the whole member profile auth thingy from LinkedIn, I just want to put our public profiles onto our site within our profile sections:

I can use a php include to do this and all is well, except that it ruins my jQuery already on my page and thus the tabs and their contents don't work.

function getProfileDivs ($dbc, $pg) {


    $q6 = "SELECT * FROM profilelinks WHERE parent='$_GET[title]' AND status=1 ORDER BY id ASC ";
    $r6 = mysqli_query($dbc, $q6);

    if ($r6) {

while ($link2 = mysqli_fetch_assoc($r6)) {

        $thread=$link2['label']; 

    echo "<div id='".$thread."'>";

        if ($thread=='Profile') { 
        $profile= $_GET['title'];
            profilePost ($dbc, $pg); 
        echo    '<div id="linkedin">';
        include ('http://www.linkedin.com/in/abstrkt'.$profile.'');
        echo    '</div>';

        }elseif ($thread=='Mixcloud'){ 

            echo '<h2>'.$thread.'</h2>'; 
            personalBlogs ($dbc, $pg, $thread); 
            echo "<script src='http://widget.mixcloud.com/media/js/follow_embed.js'></script>"; 

        }else{ 

                echo '<h2>'.$thread.'</h2>'; 
                personalBlogs ($dbc, $pg, $thread); 

            }
    echo '</div>';      }//create Divs dynamicallly CLOSE
        }//get Div Id's from table and display CLOSE
}

how can I isolate the LinkedIn HTML refs to only affect this DIV called profiles that it is within and thus still get my tabs to work properly?

currently it affects global CSS as well.

here is the iframe code that doesn't work at all just a blank box:

            if ($thread=='Profile') { 
            $profile= $_GET['title'];
                profilePost ($dbc, $pg); 
            echo    '<div id="linkedin">';
            echo '<iframe src="http://www.linkedin.com/in/abstrkt'.$profile.'" width="100%" height="450px" scrolling="yes"></iframe>';
            //include ('http://www.linkedin.com/in/abstrkt'.$profile.'');
            echo    '</div>';

here is what the iframes look like on view source of the page for the whole tabs structure, everything works like this except the 1st linkedin iframe:

    <div id="MainContent" class="background1"> <div id="ProfileStructure" class="ProfileStructure"><ul><li><a href=#Profile>Profile</a></li><li><a href=#Soundcloud>Soundcloud</a></li><li><a href=#Mixcloud>Mixcloud</a></li><li><a href=#Vimeo>Vimeo</a></li><li><a href=#Programming>Programming</a></li></ul><div id='Profile'><div id="linkedin"><iframe src="http://www.linkedin.com/in/abstrktRobbie" width="100%" height="450px" scrolling="yes"></iframe></div></div><div id='Soundcloud'><h2>Soundcloud</h2><div id="blogPosts">
        <table>
        <tr><h3>Soundcloud by Robbie</h3></tr>
        <tr><iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Fusers%2F4985712&amp;color=8267c9&amp;auto_play=false&amp;show_artwork=true"></iframe></tr>
        </table> <br></br></div></div><div id='Mixcloud'><h2>Mixcloud</h2><div id="blogPosts">
        <table>
        <tr><h3>Mixcloud by Robbie</h3></tr>
        <tr><div><object width="100%" height="480"><param name="movie" value="//www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FEnnoia_Delusions_of_Self%2F%3Flimit%3D10&embed_uuid=90a1ce18-e71a-45f4-825f-c2097e674728&stylecolor=&embed_type=widget_standard"></param><param name="allowFullScreen" value="true"></param><param name="wmode" value="opaque"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.mixcloud.com/media/swf/player/mixcloudLoader.swf?feed=http%3A%2F%2Fwww.mixcloud.com%2FEnnoia_Delusions_of_Self%2F%3Flimit%3D10&embed_uuid=90a1ce18-e71a-45f4-825f-c2097e674728&stylecolor=&embed_type=widget_standard" type="application/x-shockwave-flash" wmode="opaque" allowscriptaccess="always" allowfullscreen="true" width="100%" height="480"></embed></object><div style="clear:both; height:3px;"></div><p style="display:block; font-size:12px; font-family:Helvetica, Arial, sans-serif; margin:0; padding: 3px 4px; color:#02a0c7; width:auto;"><a href="http://www.mixcloud.com/Ennoia_Delusions_of_Self/?utm_source=widget&amp;utm_medium=web&amp;utm_campaign=base_links&amp;utm_term=resource_link" target="_blank" style="color:#02a0c7; font-weight:bold;">Latest Ennoia's Cloudcasts</a><span> on </span><a href="http://www.mixcloud.com/?utm_source=widget&utm_medium=web&utm_campaign=base_links&utm_term=homepage_link" target="_blank" style="color:#02a0c7; font-weight:bold;"> Mixcloud</a></p><div style="clear:both; height:3px;"></div></div>

<div style="clear:both; height:3px; width:auto;"></div><p style="display:block; font-size:12px; font-family:Helvetica, Arial, sans-serif; margin:0; padding: 3px 4px; color:#f3eaf5; width:auto;"><a href="http://www.mixcloud.com/Ennoia_Delusions_of_Self/?utm_source=widget&amp;utm_medium=web&amp;utm_campaign=base_links&amp;utm_term=resource_link" target="_blank" style="color:#f3eaf5; font-weight:bold;">Latest Ennoia's Cloudcasts</a><span> on </span><a href="http://www.mixcloud.com/?utm_source=widget&utm_medium=web&utm_campaign=base_links&utm_term=homepage_link" target="_blank" style="color:#f3eaf5; font-weight:bold;"> Mixcloud</a></p><div style="clear:both; height:3px;"></div>
<a class="mixcloud-follow-widget" href="http://www.mixcloud.com/Ennoia_Delusions_of_Self/" data-h="160" data-w="315" data-faces="on">Follow Ennoia on Mixcloud</a></tr>
        </table> <br></br></div><script src='http://widget.mixcloud.com/media/js/follow_embed.js'></script></div><div id='Vimeo'><h2>Vimeo</h2><div id="blogPosts">
        <table>
        <tr><h3>Vimeo by Robbie</h3></tr>
        <tr><iframe src="http://player.vimeo.com/hubnut/user/user2484971/uploaded_videos?color=000000&amp;background=ffffff&amp;slideshow=0&amp;video_title=1&amp;video_byline=1" height="450" width="100%"></iframe></tr>
        </table> <br></br></div></div><div id='Programming'><h2>Programming</h2><div id="blogPosts">
        <table>

        </table> <br></br></div><div id="blogPosts">
        .<br></tr>
        </table> <br></br></div></div></div>    </div>

EDIT 3

So here's the api page copied directly from linkedin site with my api key number in it and this gives me this error:

'); IN.parse(document.getElementById("profile")) }) }

which seems to me to be the ' is opening or closing something that it then can't read after it... in dreamweaver there is no syntax errors or anything on that line but line 6, where the key is has got one that makes no sense... the number 5 at the start is red and yet if i build this from the bottom up i can get hello Robbie Miller to appear but as soon as i build the profile div it asks for in the JS it does this`

<html>
<head>
<title>Profile App Example</title>

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
  api_key: 5m5y1ybx85gp
  authorize: true
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5b1.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>  

<script type="text/javascript">

function loadData() {
IN.API.Profile("me")
   .result(function(result) { 
      $("#profile").html('<script type="IN/FullMemberProfile" data-id="' + result.values[0].id + '"></script>');
      IN.parse(document.getElementById("profile"))
   })
}

</script>

</head>
<body class="yui3-skin-sam     yui-skin-sam">
<div id="profile"></div>
<script type="IN/Login" data-onAuth="loadData"></script>
</body>
</html>`

Most would simply use an Iframe and point it to LinkedIn. – Diodeus - James MacFarlane Aug 12 '13 at 18:37 — Diodeus - James MacFarlane, Aug 12 '13 at 18:37

stanlest · Answer 1 · 2013-08-13T15:28:29.070

0

You could just put it in an iFrame like Diodeus said or you can follow Linkedin's own help

http://help.linkedin.com/app/answers/detail/a_id/85

It describes ways to help promote your profile. Most people just have a follow link on their site to their profile or their companies page.

UPDATE: Looks like the frame is causing a cross origin problem.

so the only real solution is to use Linkedin tools

edited Aug 13 '13 at 15:28

answered Aug 12 '13 at 18:45

stanlest

56
5

the iframe thing doesn't work it just loads blank so no i can't – Robbie Miller Aug 12 '13 at 22:44
what's the src for the iFrame look like when page is loaded. can you copy out and get to linkedin? – stanlest Aug 13 '13 at 13:15
indeed i can do as u say, there is only 1 difference that i can discern from the original linkedin link, and it makes no difference when used as a plain url, a capitol R in my name, full link is http://www.linkedin.com/in/abstrktrobbie, and all references to my name are capitolised so when $profile get's it from the page it is Robbie – Robbie Miller Aug 13 '13 at 13:27
i've updated the original post with the source code, scroll right to find the linkedin link in the 1st iframe – Robbie Miller Aug 13 '13 at 13:34
http://www.abstrkt.org.uk/index.php?page=1&title=Robbie here's the site which i will leave as is until a reply so u can see the iframe that is grey – Robbie Miller Aug 13 '13 at 13:36
updated my answer looks like iFrame on your server is causing a cross-origin problem noticed it in firebug when testing your site. – stanlest Aug 13 '13 at 15:29
Load denied by X-Frame-Options: http://www.linkedin.com/in/abstrktRobbie does not permit cross-origin framing. is the reason the iframe doesn't work so can u please look again at it now where i have put it back to the include and you will see what i wish to do is just box this up so that i's isolated and my JS comes back on – Robbie Miller Aug 13 '13 at 16:22
it's broken again uncommenting and commenting has created an error, i will repost when i get it back – Robbie Miller Aug 13 '13 at 16:24
done, for some other reason the include brackets work sometimes and then need to be taken away others – Robbie Miller Aug 13 '13 at 16:25

When including my LinkedIn public profile page as HTML inside a DIV it takes over my own jQuery includes how can i stop this?

1 Answers1