How should I integrate my website with social networking?

Image
Social Media Integration image

Hi everybody, it's me, The Geek.

So today I'm here to talk about some ways you can integrate your site with social media, in order to drive more traffic to your site.

First, let's talk about what this means, and why we would want to do it. For the most part, websites are built with the intention that people will visit them. And to come to a website, it needs to be able to be found! In past years, this meant working on Search Engine Optimization (SEO), which was coding a site in a manner that the search engines could figure out what the content was, so that when people made searches that matched the content of that site, it would come up near the top of the search results.

SEO is still a major factor that websites should attempt to work on, as search engines are one of the primary resources people use to find websites. However, in recent years, social networking has become a major driver of traffic towards websites. People share websites and web pages they like on Facebook and Twitter, and everyone in their network then has the opportunity to visit those sites. For sensei-and-the-geek.com, social networking is the primary driving force of traffic to the website, as the subject matter (podcasts + Japan + tech) already has many, many well-established websites who have been doing it longer,  and therefore come first in search engine results.

Because we want to encourage as much social networking traffic to come to our sites as possible, we have set up sensei-and-the-geek.com to be social networking friendly. We do this in a few different ways, which I'm going to discuss below.

Facebook

We have integrated Facebook with the site in two ways. The first is sending content to Facebook in the form of Facebook Instant Articles, which I've discussed in a previous blog post. I won't go into too much detail on this here, as you can get the full story from our other post, but basically I've set up the site to post special HTML to Facebook each time we make a post on the site (like this one you're reading now). This way, when people link to a page that we've submitted as an Instant Article, it loads instantly on Facebook rather than loading the page from the sense-and-the-geek.com server, which takes more time and increases the likelihood of the user 'bouncing' (leaving without waiting for the content to load).

--------------------------------------

Pros: Quick loading time on Facebook means that users are more likely to read the content that has been submitted. If they have to wait for the content to load, particularly if it's slow, they are more likely to bounce and not see your content.

Cons: Difficult to set up. Instant Articles have strict rules about the types and format of HTML that they allow. Getting articles onto Facebook requires going through a vetting process, which takes a few days, and not passing it at first is quite common.

Resource: https://instantarticles.fb.com/

--------------------------------------

The other way we have integrated with Facebook is to add some metatags to our website that tell Facebook which image to use when someone shares a link to our site. Without these metatags, Facebook just grabs one or more images that it finds on the page, which may be entirely unrelated to the content being shared. For example, we have our Instagram images on the bottom of every page, so without these metatags, Facebook would grab one of these Instagram images and uses it for the image when people share that page. At the time of this posting, the first image from our Instagram feed is a picture of tulips, so if someone were to share this article before we had set up our site to tell Facebook what image to use, Facebook would likely show a picture of tulips for the article image - and tulips are entirely unrelated to social networking!

To tell Facebook what image we want to use, we add the following meta tags to the head of the HTML on this page:

<meta property="og:image" content="https://www.sensei-and-the-geek.com/image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="952" />
<meta property="og:image:height" content="498" />

These tags tell Facebook the URL of the image to show when someone shares the page, what kind of file it is, and the size of the image. Now when people share this article, it shows that image, thereby letting us retain control of how our content looks when our pages are shared on Facebook.

--------------------------------------

Pros: Easy to set up, gives control over how your content appears on Facebook when it's shared.

Cons: None really

Resource: https://developers.facebook.com/docs/sharing/webmasters

--------------------------------------

Twitter

We also integrate with Twitter in two ways. The first you can see in the 'Recent Tweets' section of this page, where people that visit our page can see the type of stuff we're tweeting about. We include a link to our twitter handle, allowing people to go directly to Twitter to follow us, so that they can keep up to date with new content on our site, and ideally share it themselves.

This integration is done by adding a bit of JavaScript into the page. When the page is loaded, it then sends a request to Twitter, which sends back the most recent tweets for our account, and inserts them into the page.

--------------------------------------

Pros: Easy to set up, automatically updates as new posts are added to the Twitter account

Cons: Requires JavaScript - so users who have it blocked will see an empty block

Resource: https://support.twitter.com/articles/20170071#

--------------------------------------

The other way we integrate with Twitter is similar to how we add metatags for Facebook. In this case, we add metatags specific for Twitter. We have three different types of metatags that we embed for twitter:

  1. Image (square)
  2. Image (rectangle)
  3. Player (podcasts)

On any page that has an image on it (for the most part, our blogs), we have a script whereby we determine whether the image is closer to a 1:1 square, or a 2:1 rectangle. In the back end of the site, we have a script that crops and scales images, and we use this to make the image the exact size required by Twitter. Finally we add some metatags to the head of the page to tell Twitter where to find that image. Here is an example:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@Sensei_Geek" />
<meta name="twitter:title" content="Chopsticks" />
<meta name="twitter:description" content="Hi everybody, it's me, The Geek..." />
<meta name="twitter:image" content="https://www.sensei-and-the-geek.com/image.jpg" />
<meta name="twitter:image:alt" content="Colorful Chopsticks" />

The tags above tell Twitter the name of the page, the type of content it contains, the image to use, alternate text for that image, and a brief description of the content on the page. When a user shares this page on their Twitter timeline, Twitter then uses these details, and gives a visual indication of the the page shared, rather than just a URL. This is more likely to result in page clicks, as users have an idea of what they will read if they click the link.

For podcasts, we also include a link to a standalone player page, so that a player can be directly embedded into the Tweet. This allows users to listen to our podcasts directly in Twitter, rather than having to come to our site. This makes it more likely that people will listen, rather than just passing it by without giving it a chance.

--------------------------------------

Pros: Gives people reading Twitter a clear indication of what they will see on the given link, making them more likely to visit the link. Also allows for embedding of  of audio and video directly into Twitter timelines.

Cons: A little more difficult to set up. Images have to be specific dimensions (either 1:1 or 2:1), and audio/video files have to have a standalone page that can be embedded directly into Twitter timelines. If audio or video is to be included, an approval process is also required before the audio/video can be embedded into timelines.

Resource: https://dev.twitter.com/cards/getting-started

--------------------------------------

Instagram

Unlike Facebook and Twitter, we've only got one-way integration with Instagram. I have set up the site to pull the most recent images from our Instagram feed, and display them on the site. The four most recent images are shown on the bottom of most pages of the site, and the Instagram page shows our most recent 20 images.

Setting this up was actually quite difficult. I had to first create an 'authentication mechanism' for the site, by which our site programmatically logs into Instagram, and identifies itself. Then once an hour, the site asks Instagram for our stream, and caches it on the site. Whenever someone loads a page, it grabs the URLs of the images from the cache, and inserts them into the HTML on the page.

We then added a link to our Instagram account on the Instagram page, so that people will ideally go to Instagram and follow us. This way they can see our images as we post them, so that we can periodically let them know we still exist! And on our Instagram account we have links back to our site, so that people who find our images on Instagram may come check out our site.

--------------------------------------

Pros: Once it's set up, it's really easy to use. We post an image on Instagram, and it automatically appears on our site, with no additional steps. Everything is automated. People can find our Instagram from the site, and can find our site from the Instagram.

Cons: It's quite difficult to set up. OAuth2 authentication is required, which can be tricky. After the authentication has been set up, the site has to make requests for data from Instagram, and the developer has to parse this data to be able to embed the images on the site.

Resource: https://www.instagram.com/developer/

--------------------------------------

Other resources

The above are just some ways we have integrated with social media to make our site more appealing to those who come across it on Social media. There are other services that can also be integrated with, depending on your site content, such as LinkedIn, and Pintrest. Here is a page that gives generic templates you can add to your site to make them a little more social networking friendly: https://moz.com/blog/meta-data-templates-123

 

Good luck, and be social!

Comments

Fabulous .. Astounding .. I'll bookmark your online journal and take the sustains likewise… I'm cheerful to discover such a large number of helpful information here in the post, we need work out more procedures in such manner, much obliged for sharing. Get connect with custom essay writing service.

There are a few courses in which to show your catches or connections and none of them are incorrect. For this situation, Assignment Help it is to a greater degree a plan inclination concentrated on how the client will interface with the site.