Skip to content Skip to navigation

Twitter and Facebook Widgets for Your Website

Social media could be said to be the new "press release," a concise way to get your latest updates out to an interested audience. If you're using Twitter or Facebook, here are a couple of quick and easy ways to integrate your social media content into your website.

Embedding Your Twitter Feed

Twitter provides a really awesome tool for creating embedded widgets at https://twitter.com/settings/widgets/new. Here you can choose whether you want to embed your tweets, your favorited tweets, tweets from a list you have created, or tweets that contain a search term, or hashtag (e.g. #cats). Typically you would want to choose your "User Timeline," tweets that you have sent, but if you are creating a website for an event or community, you might want to consider a hashtag search instead, using the hashtag that you are using for the event or community (e.g. #SUDrupalCamp).

Once you have chosen what kind of thing to embed, you can customize the way it looks by adjusting the height, theme, and link color. Click the "Create Widget" button to grab your embed code, and paste it anywhere in your website or template where full HTML is allowed. If you are using Drupal, make sure to set the WYSIWYG to "Full HTML" to enable the embed code to work properly.

Adding a Tweet Button

Example Tweet button

Let's say you want people to be able to tweet about your website or content. You can very easily create your own custom Tweet button at https://twitter.com/about/resources/buttons. Choosing the first option, "Share a Link," you can specify a custom URL, custom tweet message (this lets you customize what the tweet will say by default), and additional details. If you set a custom message, be sure to test your tweet (by clicking the tweet button example on the right) to make sure you are within the 140 character limit. Once you are done, just copy and paste the code snippet into your website or template where full HTML is allowed.

Adding a Like Button

Example Like button

Facebook also has an online widget creator for adding "Like" buttons to your site found at https://developers.facebook.com/docs/reference/plugins/like/. This lets people share your website on their timeline by "liking" it. Scroll down to the "Configurator" section of the page to create your button. Here you can customize what style of button you want, whether it will show the count (of how many people like it) or faces (profile pics of people who like it), and choice of fonts and visual style.

Once you click "Get Code," you will be presented with a couple of options. If you are able to edit the template for your page, consider the first option which requires adding a script in addition to the button code. You could also consider the iFrame option as it is simpler and just one element to copy/paste into a full HTML part of your site.

Embedding Your Facebook Timeline

If you are interested in embedding your Facebook activity into your website, there are instructions and a code generator at https://developers.facebook.com/docs/reference/plugins/activity/. Now this one is a little less intuitive, in that it is taking all activity happening everywhere on Facebook that refers to your website. It is not taking your Facebook page timeline and embedding your posts. Refer to the documentation to customize this widget – it can be very cool if your site has a lot of activity on Facebook.

This has been an introduction to some common ways to integrate social media into your website – I hope this has been helpful! How do you integrate social media on your site? I'd love to hear from you in the comments.

Categories: 

Comments

You can also use the "Like Box" widget to display a stream of the latest posts for a Facebook page. Just make sure you set stream=true, and the size (height and width) to be large enough to display the posts. See https://developers.facebook.com/docs/plugins/like-box-for-pages