jekyll-brand-social-wall

jekyll-brand-social-wall

A jekyll plugin to generate a social wall with Facebook and Twitter

#social-network#social-wall#jekyll#jekyll-plugin#facebook#instagram#twitter
jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer
Download

Jekyll Brand Social Wall :barber:

A jekyll plugin to generate a social wall with your favorite social networks

What it does in 3 lines

  • Fetch your last posts from different social networks
  • Mix and sort them by date and time
  • Render HTML Markup

Why you should use it

  • Compared to all other js plugin, it doesn't expose any of your credentials
  • No need of real time update if your social accounts have no more than few news every day
  • Lightweight and cacheable

The Social Wall Definition

A social wall is a posts aggregator from multiple social networks. It combines them, display them and give to the public an insight of the social activity and the latest news of a brand.

Synonyms: Social.... Flow, Feeds, Board, Stream, Wall, Cards, Hub, Media Aggregator, Network wall, Tagboard

Various layouts

Flexible Layout Images show Pinterest-like Windows style Fixed size Timeline Another Layout?

Images from @Kombai plugin under the MIT license

What do you want to highlight?

Examples of criteria or questions you should ask yourself or your client: Some questions might need to improve this plugin !

  • Which number of posts to display (for all networks ? One network is preferred ?)
  • Do you need Hashtags filters ?
  • Show to your public one or many accounts (external: retweet, hashtags,...)
  • Sort by ? Date (usually newest), most liked/retweet/favorite posts,...
  • Which media to prioritize ? Text vs Pictures ? Video, GIF ?

Installation

  1. Copy the folder social_wall into _plugins within your Jekyll project.
  2. Generate your social networks credentials
  1. Create a .env file with your social networks credentials
# Facebook credentials

FACEBOOK_ACCESS_TOKEN=myaccestoken
FACEBOOK_SECRET=mysecret

# Twitter credentials

TWITTER_CONSUMER_KEY=myconsumerkey
TWITTER_CONSUMER_SECRET= myconsumersecret
TWITTER_OAUTH_TOKEN=myoauthtoken
TWITTER_OAUTH_TOKEN_SECRET=myoauthtokensecret

# Instagram credentials

INSTAGRAM_ID=myclientid
INSTAGRAM_SECRET=myclientsecret
INSTAGRAM_TOKEN=myaccesstoken
  1. Install the following gem by adding them to your _config.yml and running bundle install
gem 'dotenv', :groups => [:development, :test]

gem "koala", "~> 2.2"

gem "twitter", "~> 6.0.0"

gem "hashie"

gem "sinatra"

gem "instagram", :git => 'git://github.com/gunnertech/instagram-ruby-gem.git'

gem "mini_magick"

gem 'nokogiri'

gem 'metainspector'

gem 'packr'
  1. Configure a webhook subscription every social network used / (you can as well setup a cron for easier configuration)
  1. Customize the html template by rewriting the ruby files inside the social_networks folder
  2. Enjoy!

How To Use

Add the following liquid tag in any of your layout or pages. Every social network is optional. Remove ??_username to disable one.

{% social_wall

  fb_username: bbcnews,
  fb_amount: 5,

  tw_username: nytimes,
  tw_amount: 4,

  insta_username: 0123456789,
  insta_amount: 4

%}

Parameters

Name Description Default Value Limitation Example
fb_username any facebook username but only one! bbcnews
fb_amount exact number of posts needed 10 limited 10
tw_username any twitter username but only one! katyperry
tw_amount exact number of tweets needed 10 200 36
tw_include_rts retweets are fetched 1 false true
insta_username id of a user associated with your access token 2 limited by token 0123456789
insta_amount exact number of posts needed 10 limited: sandbox mode 20 10
  1. No special template at the moment
  2. The id is the first part of your access token

Output example

<div class='twitter_status ext_quote col-sm-6 col-md-4 item'>
  <div class='wrap_status'>
      <blockquote cite="http://nyti.ms/2kFGFHj">
        <p class="story_img"><a href="http://nyti.ms/2kFGFHj"><img src="https://static01.nyt.com/images/2017/01/28/world/28muslim/28muslim-facebookJumbo.jpg"></a></p>
        <div class="wrap_story">
          <cite>www.nytimes.com</cite>
          <h1><a href="http://nyti.ms/2kFGFHj">Fears That Trump’s Visa Ban Betrays Friends and Bolsters Enemies - The New York Times</a></h1>
          <p class="desc">Officials, analysts and citizens across Muslim-majority countries said the order was a sign that President Trump sees Islam itself as the problem.</p>
        </div>
      </blockquote>
    <div class="user_info row">
      <p class="profile_image col-xs-3">
        <a href="http://twitter.com/nytimes"><img src="http://pbs.twimg.com/profile_images/758384037589348352/KB3RFwFm.jpg" /></a>
      </p>
      <div class="wrap_user_name col-xs-8">
        <h1 class="user"><a href="http://twitter.com/nytimes">The New York Times</a></h1>
        <h2 class="username"><a href="http://twitter.com/nytimes">@nytimes</a></h2>
      </div>
      <p class="icon_social col-xs-1">
        <a href="http://twitter.com/nytimes/status/825492425925861376"><span class="icon-twitter"></span></a>
      </p>
    </div>
    <div class="status_box">
      <p class="status desc">People across the Muslim world worry President Trump's executive order is a sign that he sees Islam as the problem </p>
    </div>
    <p class="meta_info">
      <time pubdate datetime="2017-01-28T23:55:05+00:00">2017-01-28T23:55:05+00:00</time>
        <a class="icon-reply" href="https://twitter.com/intent/tweet?in_reply_to=825492425925861376" ></a>
        <a class="icon-loop" href="https://twitter.com/intent/retweet?tweet_id=825492425925861376" ></a>
        <a class="icon-heart" href="https://twitter.com/intent/favorite?tweet_id=#825492425925861376" ></a>
    </p>
  </div>

Futures Features

minimalacademicresumeportfoliodocumentationwikitailwindbootstrapdarkecommercegithub-pagesblog
jekyll logo

Want a Jekyll website built?

Hire a Jekyll developer