Automatically load the URL from link field into a script

Question

I have a content type "Team" to add team members. In this content type I have a link field (called "LinkedIn") which holds the URL to the team member's LinkedIn page. What I want is to use the URL from the link field and use it with a script (provided by LinkedIn). The script looks like this:

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="linkedin-profile-link.com" data-format="hover"></script>

I have created a simple text field for the content type "Team" and in a team member node of that content type I copied above code into it and inserted the URL from the "LinkedIn" link field. This works but I would have to edit more 100 team member pages.

How could I automatically load the URL from the "LinkedIn" link field into this script (it needs to be added into data-id="link comes here") and display on every team member page? Can this be done with Display Suite? Or do I need to write a module?

Answer 1

You could use a field template in your theme.

Call it something like field--field-linkedin-url.tpl.php (whatever you have called your field. I'm assuming field_linkedin_url for my example. Notice the _'s are converted to -'s in the file name.

In the template put the following html:

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/MemberProfile" data-id="<?php print render($items); ?>" data-format="hover"></script>

It shows something like this: