How to Embed Twitter, Facebook and Google+ Updates Within Blog Posts

On with 0 Comment
With the explosion of new media, social updates are often referenced, quoted and displayed on external platforms in different ways. Bloggers often look for ways to easily embed social updates from popular social media services. Fortunately, each of these services provides ample options to integrate updates without messing with a bloat of code. If you're happy with basic copy pasting of code, you can embed these updates within blog posts in no time. We're going to focus on Twitter, Facebook and Google+ to know how we can easily embed social updates from these platforms within our web pages and blogs. While learning the embedding methodologies, make sure you first test it on a dummy blog or website before applying it on the live version of the site. If you have working knowledge of HTML and CSS, you can further customize the embedded updates, at will. Let's try out these social update embedding exercises and see how we can easily share and quote information available on the social media channels.

Embedding Twitter Updates

One of the popular forms of social updates often embedded in web content is a tweet. Fortunately, one can easily embed the same in its default format by simply copy pasting the code generated by the Twitter platform.

Tweet embedding option context menu entry

While copy pasting the code, make sure your CMS's post editor is in HTML mode. Pasting the code in visual (WYSIWYG mode) is only going to display the code instead of tweet. In WordPress, switch to text mode instead of working in visual mode before pasting the code. And here's how a typical tweet may display after pasting the default code.



And, the code itself may look like this:


<blockquote class="twitter-tweet" lang="en">
<p lang="en" dir="ltr">
Introducing Private Ghost Blogs <a href="http://t.co/YEVn4Pp3QE">http://t.co/YEVn4Pp3QE</a> - Simple, password protected writing. ���� <a href="http://t.co/xt7qVEdTsS">pic.twitter.com/xt7qVEdTsS</a></p>
— Ghost (@TryGhost) <a href="https://twitter.com/TryGhost/status/605369194587267072">June 1, 2015</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Aligning Tweet - You can observe that by default the tweet is aligned on the left side. One can easily tweak it and can align the tweet in center or at the right side. To do so, follow these simple steps.


/** Use 'data-align=center' for center aligning tweet. **/
<blockquote class="twitter-tweet" lang="en" data-align="center">

/** Use 'data-align=right' for right aligning tweet. **/
<blockquote class="twitter-tweet" lang="en" data-align="right">

Hiding Media - One can also override the default behavior of displaying photo, video or a link preview associated with the tweet. As visible in the tweet above, an image is associated with the tweet. If we just want plain tweet, we can easily hide the image as follows.


/** Use 'data-cards=hidden' to hide media. **/
<blockquote class="twitter-tweet" lang="en" data-cards="hidden">

Changing Theme - If your blog design is a dark template and you want to override the default light theme of the embedded tweets, you can use a dark theme as follows.


/** Use 'data-cards=hidden' to change theme. **/
<blockquote class="twitter-tweet" lang="en" data-theme="dark">

Hide Conversation - If you've embedded a tweet with associated conversation, it is possible to hide the conversation thread while keeping the parent tweet intact. Here's how to do it.


/** Use 'data-conversation=none' to hide conversation thread. **/
<blockquote class="twitter-tweet" lang="en" data-conversation="none">

Change Link Colors - And, in case you just want to change the colors of the hyperlinks within the embedded tweets, use the following attribute.


/** Use 'data-link-color=#hex_color_code' to change hyperlink colors. **/
<blockquote class="twitter-tweet" lang="en" data-link-color="#efefef">

Site Wide Visual Customization - Instead of tweet specific customization, one can also do site wide visual customization of all the embedded tweets regardless of the web page they're embedded on the site. The following 3 meta tags should be included within the <head> tag of your template.


/** Use the following meta tags for normal HTML templates. **/
<meta name="twitter:widgets:theme" content="light">
<meta name="twitter:widgets:link-color" content="#55acee">
<meta name="twitter:widgets:border-color" content="#55acee"> 

/** Use the following meta tags with forward slash for XML templates like Blogger platform. **/
<meta name="twitter:widgets:theme" content="light" />
<meta name="twitter:widgets:link-color" content="#55acee" />
<meta name="twitter:widgets:border-color" content="#55acee" />

Pay special attention on the second set of meta tags shown above which contains an extra forward slash character at the end. This format is needed for XML templates which are used on Blogger platform. Through these tags, you can customize the theme, link color and border color of the embedded tweets.

Embedding Facebook Updates

Next comes the most popular social network on this planet, Facebook. If you want to embed updates from this platform, the procedure is dead simple. Simply open the status update and click the top right drop down menu to grab the embedding code as shown in the image below.

Facebook post embedding option

Like before, I'll remind you to make sure you're embedding the code in HTML mode else it may not work at all. Here's a sample Facebook post embedded within this post.

Let’s talk about Real-Life Responsive Web Design Patterns. A talk by yours truly Vitaly Friedman at ColdFront conference (50 mins). https://www.youtube.com/watch?v=_sBWeX3u-Vw

Posted by Smashing Magazine on Sunday, 4 October 2015


And, the code itself may look like this:


<div id="fb-root">
</div>
<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_GB/sdk.js#xfbml=1&version=v2.3";  fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/smashmag/posts/10153700495102490" data-width="500">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="https://www.facebook.com/smashmag/posts/10153700495102490">
<p>
Let’s talk about Real-Life Responsive Web Design Patterns. A talk by yours truly Vitaly Friedman at ColdFront conference (50 mins). https://www.youtube.com/watch?v=_sBWeX3u-Vw</p>
Posted by <a href="https://www.facebook.com/smashmag">Smashing Magazine</a> on <a href="https://www.facebook.com/smashmag/posts/10153700495102490">Sunday, 4 October 2015</a></blockquote>
</div>
</div>

Customizing Update Width - By default, the embedded Facebook update width is 500px which can be easily customized. The value of this attribute can range between 350px to 750px. To adjust the update width, simply update the following attribute data-width="450" with the appropriate numerical value that lies within the allowed range. You can also use the code generator to grab the embedding code if you have the post update URL handy in your clipboard.

Site Wide Manual Embedding - In case, you frequently embed Facebook post updates within your site content, a better strategy is to load the essential script code block once in your page and then use the embedding HTML markup at the desired place within the design or content. Here's how to do it.

First of all, paste the following code, right after the opening <body> tag of your site template.


<div id="fb-root"></div>
<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&version=v2.2";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Thereafter, paste the following code within the web page wherever you want the update to be displayed. You can display multiple updates on the same page at different locations.


<div class="fb-post" data-href="paste your-post-url here"></div>

Paste the actual Facebook post update URL in the data-href attribute as indicated above.

Language Adjustments - In case, you want to display the embedded Facebook update in a different language other than Standard English (U.S), you can do so by simply changing the locale in the code. The complete list of the supported languages and their locale codes are available here.


<div id="fb-root"></div>
<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/de_DE/sdk.js#xfbml=1&version=v2.2";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Observe the highlight locale code de_DE above which is replaced by the default en_US locale code. This new local code will display the embedded Facebook update in German language.

Embedding Google+ Updates

And last but not the least is the exercise of embedding Google+ social updates within web pages. Like the other two, this one is also simple and involves copy pasting of code within the design template. To grab the embedding code, click the drop down menu available at the top right corner of the Google+ post as shown below.

Google+ update drop down menu

The Google+ update embedding code is divided into two different parts. One part is a permanent snippet that is included on every page where you want to display the social update. The second part is the HTML markup of the actual social update. Following is the demo of Google+ post update embedded within this post.




And following is the sample embedding code of a typical Google+ social update.


<!-- Place this tag in your head or just before your close body tag. -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

<!-- Place this tag where you want the widget to render. -->
<div class="g-post" data-href="https://plus.google.com/+JoelComm1/posts/7rKRdHcRT5Y"></div>

As I mentioned before that the code itself is divided into two parts. The first line of code should be included either in the <head> tag of the template or just before the closing </body> tag.

The second part of the embedding code is the HTML markup with <div> tag that should be inserted at the place where you want the social update to render on the page.

Although there are various other methods like deferred loading and explicit loading of embedded Google+ updates, we're going to skip them as this is just a primer of basic embedding options.

0 comments:

Post a Comment