Can anyone point me to some resources on hardcoding Social Media Links for EE channel entries? Basically Facebook, Twitter, Pinterest, etc..

I'm in a situation where it's not feasible for various reasons to use a plugin or module for this but not sure how best to approach it.

  • Can you clarify what you mean by "Social Media Links for EE channel entries"? Do you mean links which will share each particular entry via a social media platform (e.g., a Tweet button which tweets the title of and link to an entry)? Dec 31 '14 at 19:50
  • yes, to share a specific entry (some are videos) to FB, Twitter, Pinterest, YouTube and Instagram. Usually would do it with a plugin but we can't really do that here.
    – segovius
    Jan 3 '15 at 13:56

This can be done using standard template code. All the various social media services have documented APIs for their javascript sharing widgets, and mostly you just need to use their default code. If you want to get more specific, you can hard-code URLs, text, etc, using EE tags within those widgets.


So as a quick example, within a Channel Entries loop:

<script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=XXXXXXX&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div class="share">
    <div class="fb-like" data-layout="button_count" data-action="like" data-url="{title_permalink="news/entry"}" data-show-faces="false" data-share="true"></div>
    <a class="twitter-share-button" href="https://twitter.com/share" data-url="{title_permalink="news/entry"}" data-via="mytwitterusername" data-text="{title}: ">Tweet</a>

You maybe want to include the javascript in your global header or footer of course, and Facebook also requires you have an fb-root element on your page, but you get the idea.

You should also look at setting proper Open Graph tags, and activating Twitter Cards as well, to greatly enhance how your URLs appear when shared.


I'm assuming you just want to add social icons that link to your clients' social pages? Or are you trying to add "sharing" capabilities? If that's the case then that's a whole different situation :)

If you're just trying to link to social pages then why not just use a grid fieldtype or you could use a matrix fieldtype too? Set it up with a column for an image (a file/asset fieldtype works great) for the image and a URL. Then code that out in your template.

It's pretty easy to setup and I've never had to use a plugin or a module to do that. Of course it all depends on how your site is setup.

  • Yeah, it's sharing we need so it's a bit more challenging.
    – segovius
    Jan 3 '15 at 13:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.