You are here

Drupal Twitter Block Configuration Manual

UPDATE: I just realized that I also have customized versions of the sharebar & follow blocks on all of my websites. Future blog posts will cover these topics.

On June 11, 2013, Twitter updated its API from version 1 to 1.1. This caused a lot of headaches and rendered a bunch of Drupal modules useless all of a sudden, including the following:

1) Twitter Block
2) Twitter Profile Widget
3) Twitter Follow Block

The first one of the above examples was the only one that got upgraded to utilize 1.1, but the problem was that I also wanted to figure out how to make the block match the looks of the Facebook block (I also wrote a manual on how to do this a few weeks ago) that I have on all of my websites (look to the right to see the two blocks, as well as Mediography.by & Vector.dj to see their own versions). So I eventually found a simple solution that made this possible, without using a module whatsoever. Here's how to do this:

1) Log in to your Twitter account, and click on Settings.

2) Click on Widgets.

3) Click the "Create new" button.

4) Fill out the fields under Configuration, and click the "Create widget" button.

5) Copy the code generated under Preview. It should look something like the following:

<a class="twitter-timeline" href="https://twitter.com/wwwjaylee" data-widget-id="xxxxxxxxxxxxxxxxxx">Tweets by @wwwjaylee</a>
<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>

6) In your Drupal website, create a new block and paste the code above to test it out and see what it looks like. If you like what you see, you're good to go. But if you use a Facebook block like I do and want both blocks to match in design, follow the next optional steps.

7) You'll want a header code to go along with the generated code. Use something like the following:

<div style="height:500px;position:relative;padding:1px;border:1px solid #aaa;">
<div style="margin:10px;color:#666;line-height:.6em;"><big>Follow us on Twitter<br /></big></div>
<div style="margin:10px;line-height:.6em;"><big><b><a href="http://twitter.com/wwwjaylee">@wwwjaylee</a></b></big></div>

8) You'll also want a footer code to go along with the generated code. Use something like the following:

<div style="margin-left:10px;margin-top:-11px;color:#666;line-height:1.25em;background:url(http://yourwebsite.com/images/twitter.jpg) no-repeat;background-size:15px 15px;padding-left:20px;"><a href="http://twitter.com/wwwjaylee">Join the conversation</a></div>
</div>

9) The following is everything above put together (note the important addition of the highlighted code, which you might have to change if you change the only other height in the header code, which is currently set to 500px):

<div style="height:500px;position:relative;padding:1px;border:1px solid #aaa;">
<div style="margin:10px;color:#666;line-height:.6em;"><big>Follow us on Twitter<br /></big></div>
<div style="margin:10px;line-height:.6em;"><big><b><a href="http://twitter.com/wwwjaylee">@wwwjaylee</a></b></big></div>

<a class="twitter-timeline" href="https://twitter.com/wwwjaylee" data-widget-id="xxxxxxxxxxxxxxxxxx" height="410px">Tweets by @wwwjaylee</a>
<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 style="margin-left:10px;margin-top:-11px;color:#666;line-height:1.25em;background:url(http://yourwebsite.com/images/twitter.jpg) no-repeat;background-size:15px 15px;padding-left:20px;"><a href="http://twitter.com/wwwjaylee">Join the conversation</a></div>
</div>

10) In your Drupal website, update the block you created above with the full code above.

And that's it!

P.S. Google something like "Twitter square image" to find whatever image that suits the look of your website for step #8. You might also have to tweak a bit of the CSS code for everything to look pixel perfect for your website, depending on the width of your block. And finally, note the different colors:

* Red means you need to put in your own data.
* Blue just means that it's the header part of the code.
* Green just means that it's the footer part of the code.

You are here